CSS3 से अपने Website के लिए Shapes कैसे Design करें
Website में उपयोग होने वाले ज्यादातर shapes rectangle या square होते हैं जिस का use आपने भी किया होगा, लेकिन क्या आपको पता है हम इन common shapes के अलावा भी और कई तरह के shapes बना सकते हैं वो भी सिर्फ CSS द्वारा कुछ line के code लिख कर।
आज आप इस tutorial में CSS shapes बनाना सीखेंगे जिसमे से कुछ basic और कुछ advanced shapes भी हैं जिसे आप pure CSS से बना सकते हैं।
Contents
CSS Shapes का उपयोग करने के क्या फायदे हैं?
- CSS shapes की सबसे ख़ास बात यह है की इसका उपयोग कर आप अपने web page को अच्छा तो बना ही सकते हैं इसके अलावा site पर space खर्च करने वाले unnecessary images का उपयोग करने से बच जायेंगे।
- CSS shape को manage करना आसान है, जब चाहें इसके size, आकार, color आदि में बदलाव कर सकते हैं जबकि image के साथ यह संभव नहीं है।
- CSS shapes का उपयोग करना इसलिए भी फायदेमंद है क्योंकि ये client side browser के द्वारा render होते हैं जिससे server bandwidth की बचत होती है और आपकी website की speed कम नही होती है।
Basic CSS Shapes Tutorial in Hindi
चलिए अब हम कुछ basic shapes design करना सीखते हैं। इन shapes को बनाना बहुत ही आसान है और ये आपके वेबसाइट के लिए काफी उपयोगी भी हैं।
CSS Square Shape
CSS square shape बहुत ही simple shape है जिसे आसानी से बनाया जा सकता है| इसके लिए हमें div की height और width बराबर set करनी होती है|
इसका HTML and CSS codes आप नीचे देख सकते हैं:
HTML
<div class="square"></div>CSS
.square {
width: 100px;
height: 100px;
background: gray;
}CSS Rectangle Shape
Rectangle बनाने के लिए इसकी width की value को height से ज्यादा रखना होता है| इसका code आप नीचे देख सकते हैं:
HTML
<div class="rectangle"></div>CSS
.rectangle {
width: 200px;
height: 100px;
background: gray;
}CSS Circle Shape
CSS में circle shape design करने के लिए div की height-width set करनी होती है और इसकी border radius को इसके height और width से 50% यानी की आधी रखनी होती है|
इसका HTML और CSS code नीचे दिया गया है:
HTML
<div class=”circle”></div>CSS
.circle {
width: 100px;
height: 100px;
background: gray;
border-radius:50%;
}CSS Oval Shape
Oval shape की width उसकी height से ज्यादा होती है और इसकी भी border-radius circle की तरह 50% होती है| इसका code आप नीचे देख सकते हैं:
HTML
<div class=”oval”></div>CSS
.oval {
width: 200px;
height: 100px;
background: gray;
border-radius: 50%;
}CSS Triangle Shape
Triangle shape को कुछ अलग तरीके से बनाया जाता है, इसमें height और width को 0 (zero) रखा जाता है क्योंकि यहाँ सारा काम border से किया जाता है|
left और right border को transparent रखा जाता है जबकि border-bottom की width ज्यादा रखी जाती है और उसमें background-color set किया जाता है|
इसका code आप नीचे देख सकते हैं:
HTML
<div class=”triangle”></div>CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}इसी प्रकार यदि आप ऐसे triangle को design करना चाहते हैं जो की नीचे की तरफ point करे (down triangle), तो इसके लिए simply border-bottom को border-top से replace कर दें|
Complex shapes
आपने basic CSS shapes design करना सीख लिया अब कुछ advanced CSS shapes design करना सीखेंगे|
CSS Parallelogram Shape
Parallelogram बनाने के लिए transform property का use किया जाता है और इससे 20 degree angle पर skew किया जाता है|
आप नीचे दिए गये code को run करके इस shape की बनावट को समझ सकते हैं:
HTML
<div class=”parallelogram”></div>CSS
.parallelogram {
width: 200px;
height: 100px;
background:#ccc;
transform:skew(20deg);
margin:25px;
}CSS Star (6-points) Shape
आपने अपने बचपन में star बनाने का तरीका सीखा होगा जिसमे हम एक के ऊपर एक triangles बनाते थे जिससे वह star की तरह दिखने लगता था, हम CSS में same method का use कर 6 points वाला star बना सकते हैं|
six-point star बनाने के लिए दो triangles की जरूरत पड़ती है जिसमे से एक top की ओर और दूसरा bottom की ओर point करता है|
दोनों triangles को position property का use करके एक के ऊपर एक रखा जाता है|
इसका example code आप नीचे देख सकते हैं:
HTML
<div class=”star6”></div>CSS
.star6 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid grey;
position: relative;
}
.star6:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid grey;
position: absolute;
content: "";
top: 30px;
left: -50px;
}CSS Star (5 point) Shape
Five points वाले star को बनाने के लिए हमें तीन triangles की जरूरत पड़ती है जिन्हें एक के ऊपर एक रखा जाता है और उनमे से एक को 35 degree, दुसरे को -35 degree और तीसरे को -70 degree पर rotate किया जाता है|
इसका एक example code नीचे दिया गया है जिसे देख कर आप इस design को आसानी से समझ सकते हैं :
HTML
<div class=”star5”></div>CSS
.star5 {
width: 0;
height: 0;
margin: 50px 0;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid grey;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
.star5:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid grey;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
transform: rotate(-35deg);
}
.star5:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid grey;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}CSS Talk Bubble Shape
Talk bubble या speech bubble बनाने के लिए आपको एक rectangle या square और एक triangle shape की जरूरत पड़ेगी|
इस shape को बनाने के लिए एक example code नीचे दिया गया है:
HTML
<div class=”talk-bubble”></div>CSS
.talk-bubble {
margin:30% 40%;
width: 120px;
height: 80px;
background:grey;
position: absolute;
border-radius: 10px;
}
.talk-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid grey;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}CSS Egg Shape
अंडाकार बनाने के लिए oval जैसा ही shape बनाया जाता है बस इसकी height width से थोड़ी ज्यादा होती है और border-radius property का उपयोग किया जाता है|
इसका HTML और CSS code नीचे दिया गया है:
HTML
<div class=”talk-bubble”></div>CSS
.egg {
margin: 30% auto;
display: block;
width: 126px;
height: 180px;
background-color: grey;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}CSS Heart Shape
Heat shape यानि दिल का आकार बनाने के लिए elements को rotate किया जाता है और transform-origin property से इसमें transform होने वाले position को change किया जाता है|
इसका code आप नीचे देख सकते हैं:
HTML
<div class=”talk-bubble”></div>CSS
.heart {
margin: 30% auto;
position: relative;
width: 100px;
height: 90px;
}
.heart:before,.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: grey;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}तो आज आपने इस article में CSS shapes बनाना सीखा जो की website design करने में बहुत ही उपयोगी साबित होगा| आगे पढ़ें: CSS में Gradient Background कैसे बनायें
अगर आपको CSS shapes design करने में कोई परेशानी हो तो आप नीचे comment box में अपना सवाल पूछ सकते हैं|
