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?
- HTML or CSS Se Simple Slider Kaise Banaye?, HTML & CSS Slider
- HTML Se Blinking Text Effect Kaise Banaye ? HTML Blink Tag
- React Native Kya Hai? | What is React Native In Hindi | React Native Tutorial In Hindi
- Flutter Kya Hai? | What is Flutter in Hindi | पूरी जानकारी 2021
- React JS Kya Hai? | React JS Tutorial In Hindi | React JS In Hindi
- Node JS Kya Hai? | Node JS Tutorial In Hindi | Node JS In Hindi
- React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi
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 Rectangle Shape
Rectangle Shape बनाने के लिए इसकी Width की Value को Height से थोड़ा ज्यादा रखा जाता है।
HTML Code : –
<div class="rectangle"></div>CSS Code : –
.rectangle {
width: 200px;
height: 100px;
background: gray;
}
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 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;
}
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 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 (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);
}
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 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%;
}
Conclusion
तो आज हमने आपको इस article में CSS shapes बनाना सिखाया है जो की आपको website design करने में बहुत ही Helpful रहेगा। अगर आपको CSS shapes design करने में कभी भी कोई परेशानी आये तो आप नीचे comment करके पूछ सकते है।
