मैं सीएसएस का उपयोग करके सरल क्षेत्र कैसे बना सकता हूं?

Question

क्या सीएसएस का उपयोग करके एक साधारण क्षेत्र बनाना संभव है? मैं एक 3D क्षेत्र की तरह कुछ सोच रहा हूँ।

Comments

bloggermild.com/2012/12/3d-bubbles-using-css3.html जैसा कुछ ?

— 4dgaurav

@ गौरव ऊई! लेकिन एनीमेशन के बिना

— SomeAmbigiousUserName

jsfiddle.net/4dgaurav/prh3hufh

— 4dgaurav

"मैं एक 3D क्षेत्र की तरह कुछ सोच रहा हूं।" क्या अन्य प्रकार के गोले हैं? एक 2D गोला एक गोला होगा, गोला नहीं होगा, और 4D क्षेत्र मुझे लगता है कि बोर्ग क्षेत्र होगा ।

— पॉल डी। वेट

@ PaulD.Waite मेरे शब्दों में नहीं, किसी ने साथ आकर मेरे सवाल को संपादित किया

— SomeAmbigiousUserName

Answer 1

मुझे पहले से उपलब्ध कराए गए उत्तरों और टिप्पणियों से प्यार नहीं था; html में एक साधारण क्षेत्र के लिए बहुत अधिक कोड - सीएसएस। आप बस कर सकते हैं:

<div class = "sphere">Test</div>

सीएसएस:

body {
    background: #333;
    }

.sphere {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #FFF;
    margin: 100px auto;
    /* The magic are those 2 lines: */
    border-radius: 100%;
    box-shadow: inset 0 0 80px #FFF;
    }

सरल JSFiddle डेमो

तब मैं खुद को और इतने अधिक जटिल सामान को चुनौती देना चाहता था। यह परिणाम है:

HTML:

<div class = "sphere a">This</div>
<div class = "sphere b">Is</div>
<div class = "sphere c">A</div>
<div class = "sphere d">Test</div>

सीएसएस:

body {
    background: #333;
}
.sphere {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    position: absolute;
    margin: -100px;
    border-radius: 100%;
    box-shadow: inset 0 0 80px #FFF;
    color: #FFF;
}
.a {
    top: 10%;
    left: 20%;
}
.b {
    top: 30%;
    left: 60%;
}
.c {
    top: 60%;
    left: 40%;
}
.d {
    top: 80%;
    left: 70%;
}

पूर्ण JSFiddle डेमो

Comments

अच्छा जवाब - हालांकि, मैं border-radius: 100%निश्चित आकार के बजाय सलाह देता हूं । सोचने के लिए विफलता / बात का एक बिंदु निकालें।

— क्जिल्ड श्मिट

धन्यवाद @Kjeld, फिक्स्ड। कोई और सिफारिश?

— फ्रांसिस्को प्रेसेनिया

ऐसा मत सोचो। मैं व्यक्तिगत रूप से के class="sphere"बजाय है class = "sphere", लेकिन यह बल्कि nitpicky है और वैचारिक नहीं है।

— क्जिल्ड श्मिट

Answer 2

डेमो

सीएसएस

.demo-container {  
 height:300px;  
 overflow:hidden;  
 display:block;  
 position:relative;  
 /* CSS3 Gradient */  
 background: rgb(125,126,125);  
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ZDdlN2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGUwZTBlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);  
 background: -moz-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);  
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));  
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
 background: -o-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
 background: -ms-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
 background: radial-gradient(ellipse at center,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);  
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );  
 }  
.bubble1, .bubble2, .bubble3, .bubble4 {  
 position:absolute;  
 display:block;  
 /* CSS3 Box Shadow */  
 box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);  
 -webkit-box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);  
 -moz-box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);  
 /* CSS3 Border Radius */  
 border-radius:50%;  
 -webkit-border-radius:50%;  
 -moz-border-radius:50%;  
 /* CSS3 Transition */  
 -webkit-transition: all .5s ease-in-out;  
 -moz-transition: all .5s ease-in-out;  
 -o-transition: all .5s ease-in-out;  
 transition: all .5s ease-in-out;  
 }  
.bubble1 {  
 width:100px;  
 height:100px;  
 top:20%;  
 left:50%;  
 }   
.bubble2 {  
 width:200px;  
 height:200px;  
 left:20%;  
 top:10%;  
 }  
.bubble3 {  
 width:150px;  
 height:150px;  
 left:50%;  
 top:40%;  
 }  
.bubble4 {  
 width:90px;  
 height:90px;  
 left:70%;  
 top:15%;  
 }  
/* .bubble1:hover {  
 margin-top:30px;  
 width:90px;  
 }  
.bubble2:hover {  
 margin-left:20px;  
 height:190px;  
 }  
.bubble3:hover {  
 margin-top:60px;  
 width:160px;  
 }  
.bubble4:hover {  
 margin-left:50px;  
 height:100px;  
 }  */

/* remove below codes if you don't wish to have the texts "3D Bubbles" */
.demo-text{  
 position:absolute;  
 bottom:20px;  
 right:15px;  
 font-size:36px;  
 color:#666;  
 text-shadow:0 2px 0 #000;  
 }

एचटीएमएल

<div class="demo-container">  
 <span class="bubble1"></span>  
 <span class="bubble2"></span>  
 <span class="bubble3"></span>  
 <span class="bubble4"></span>  
 <div class="demo-text">3D Bubbles</div> <!-- remove this div if you don't wish to have the texts "3D Bubbles" --> 
</div> 

देखें

Comments

+1, फ्रांसिस्को के जवाब में एक साधारण गोलाकार ढाल की तुलना में एक गोले की तरह दिखता है।

— ब्रायन एस