CSS3 से अपने Website के लिए Shapes कैसे Design करें? – CSS Shapes

0
32
css shapes
css shapes

CSS3 से अपने Website के लिए Shapes कैसे Design करें? – CSS Shapes

Hello Friends ! आज हम इस Article में आपको CSS से Shapes कैसे Design करते है ये बताने जा रहे है। आपने देखा होगा Websites में बहुत सी Shapes का Use किया जाता है Websites को Attractive बनाने के लिए कुछ Shapes Square में होती है और कुछ होती है Rectangle में।

लेकिन क्या आप ये जानते है की इन Common Shapes के अलावा और भी बहुत सी Shapes बनाई जा सकती है CSS का Use करके। आज इस आर्टिकल में हम आपको CSS से कुछ Attractive Shapes बनाना सिखाएंगे।

तो चलिए जानते है की कैसे CSS Se Website K Liye Shapes Kaise Design Kare?

CSS Shapes को Use करने के क्या फायदे हैं?

  • CSS Shapes को Use करने का सबसे बड़ा Benefit ये है की इन Shapes को Use करके Website का look अच्छा बनाया जा सकता है।
  • Css Shapes को Manage करना थोड़ी Easy होता है , इन Shapes को अपने हिसाब से Size , Color और Shapes दे सकते है। आपने ये देखा होगा की image के साथ हम ऐसा नहीं कर सकते है।

Basic CSS Shapes Tutorial in Hindi

अब हम आपको कुछ Basic Shapes Sesign करना बताने जा रहे है , जो आपके लिए काफी Useful होगा।

CSS Square Shape

CSS square shape एक बहुत ही Common और Simple Shape है जिसे आप बहुत आसानी से बना सकते है। इसके लिए हमें div की height और width बराबर set करनी होती है।

HTML Code : –

<div class="square"></div>

CSS Code : –

.square {
 width: 100px;
 height: 100px;
 background: gray;
}
css square
css square

CSS Rectangle Shape

Rectangle Shape बनाने के लिए इसकी Width की Value को Height से थोड़ा ज्यादा रखा जाता है।

HTML Code : –

<div class="rectangle"></div>

CSS Code : –

.rectangle {
 width: 200px;
 height: 100px;
 background: gray;
}
css rectangle shape

CSS Circle Shape

CSS में Circle Shape Design करने के लिए div की height-width set करनी पड़ती है और इसकी border radius को इसके height और width से 50% यानी की Half रखनी होती है।

HTML Code : –

<div class=”circle”></div>

CSS Code :-

.circle {
width: 100px;
height: 100px;
background: gray;
border-radius:50%;
}

CSS Oval Shape

Oval Shape बनाने के लिए उसकी Width को Height से ज्यादा रखा जाता है, और इसकी भी border-radius circle की तरह 50% होती है।

HTML Code : –

<div class=”oval”></div>

CSS Code : –

.oval {
width: 200px;
height: 100px;
background: gray;
border-radius: 50%;
}
css oval shape

CSS Triangle Shape

Triangle shape को बनाने का तरीका कुछ अलग है , इसमें height और width को 0 (zero) रखा जाता है क्योंकि इसमें सारा काम border से किया जाता है।

left और right border को transparent रखा जाता है जबकि border-bottom की width ज्यादा रखी जाती है, और फिर इसमें background-color set किया जाता है।

HTML Code :-

<div class=”triangle”></div>

CSS Code : –

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}
css triangle shape

Complex shapes

अब आपने basic CSS shapes design करना तो सीख लिया है ,अब हम आपको कुछ advanced CSS shapes design करना सिखानेंगे।

CSS Parallelogram Shape

Parallelogram Shape को बनाने के लिए transform property को use किया जाता है और इससे 20 degree angle पर skew किया जाता है।

HTML Code : –

<div class=”parallelogram”></div>

CSS Code : –

.parallelogram {
width: 200px;
height: 100px;
background:#ccc;
transform:skew(20deg);
margin:25px;
}
css parallelogram shapes

CSS Star (6-points) Shape

six-point star Shape को बनाने के लिए दो triangles की जरूरत होती है , जिसमें से एक Top और दूसरा bottom को Point करने का काम करता है।

दोनों triangles में position property का use करके एक दूसरे के ऊपर रखा जाता है।

HTML Code : –

<div class=”star6”></div>

CSS Code : –

.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 shape

CSS Star (5 point) Shape

Five Points Star Shape बनाने के लिए 3 triangles की जरूरत होती है , जिन्हें एक दूसरे के ऊपर रखा जाता है और उनमे से किसी एक को 35 degree, दुसरे को -35 degree और तीसरे को -70 degree पर rotate किया जाता है।

HTML Code : –

<div class=”star5”></div>

CSS Code : –

.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);
}
5 star shapes

CSS Talk Bubble Shape

Talk bubble या speech bubble Shape को बनाने के लिए आपको एक rectangle या square और एक triangle shape की जरूरत होती है।

HTML Code :-

<div class=”talk-bubble”></div>

CSS Code : –

.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 shape

CSS Heart Shape

Heat shape मतलब की दिल का आकार बनाने के लिए elements को rotate किया जाता है और transform-origin property का Use करके इसमें transform होने वाले position को change किया जाता है।

HTML Code : –

<div class=”talk-bubble”></div>

CSS Code : –

.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%;
}
css heart shape

Conclusion

तो आज हमने आपको इस article में CSS shapes बनाना सिखाया है जो की आपको website design करने में बहुत ही Helpful रहेगा। अगर आपको CSS shapes design करने में कभी भी कोई परेशानी आये तो आप नीचे comment करके पूछ सकते है।

LEAVE A REPLY

Please enter your comment!
Please enter your name here