सामग्री विपणन
CSS3 वैशिष्ट्ये तुम्हाला कदाचित माहिती नसतील: फ्लेक्सबॉक्स, ग्रिड लेआउट, सानुकूल गुणधर्म, संक्रमण, अॅनिमेशन आणि एकाधिक पार्श्वभूमी
कॅस्केडिंग शैली पत्रके (CSS) विकसित होत राहा आणि नवीनतम आवृत्त्यांमध्ये काही वैशिष्ट्ये असू शकतात ज्यांची तुम्हाला कदाचित माहिती नसेल. कोड उदाहरणांसह, CSS3 सह सादर केलेल्या काही प्रमुख सुधारणा आणि पद्धती येथे आहेत:
- लवचिक बॉक्स लेआउट (फ्लेक्सबॉक्स): एक लेआउट मोड जो तुम्हाला वेब पृष्ठांसाठी लवचिक आणि प्रतिसादात्मक मांडणी तयार करण्यास अनुमती देतो. फ्लेक्सबॉक्ससह, आपण कंटेनरमध्ये घटक सहजपणे संरेखित आणि वितरित करू शकता. n हे उदाहरण, द
.container
वर्ग वापरdisplay: flex
फ्लेक्सबॉक्स लेआउट मोड सक्षम करण्यासाठी. दjustify-content
मालमत्ता सेट केली आहेcenter
कंटेनरमध्ये मूल घटक क्षैतिज मध्यभागी ठेवण्यासाठी. दalign-items
मालमत्ता सेट केली आहेcenter
मूल घटकाला अनुलंब मध्यभागी ठेवण्यासाठी. द.item
वर्ग मूल घटकासाठी पार्श्वभूमी रंग आणि पॅडिंग सेट करतो.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
निकाल
केंद्रीत घटक
- ग्रिड लेआउट: दुसरा लेआउट मोड जो तुम्हाला वेब पृष्ठांसाठी जटिल ग्रिड-आधारित लेआउट तयार करण्यास अनुमती देतो. ग्रिडसह, तुम्ही पंक्ती आणि स्तंभ निर्दिष्ट करू शकता आणि नंतर ग्रिडच्या विशिष्ट सेलमध्ये घटक ठेवू शकता. या उदाहरणात, द
.grid-container
वर्ग वापरdisplay: grid
ग्रिड लेआउट मोड सक्षम करण्यासाठी. दgrid-template-columns
मालमत्ता सेट केली आहेrepeat(2, 1fr)
समान रुंदीचे दोन स्तंभ तयार करण्यासाठी. दgap
गुणधर्म ग्रिड सेलमधील अंतर सेट करते. द.grid-item
वर्ग ग्रिड आयटमसाठी पार्श्वभूमी रंग आणि पॅडिंग सेट करतो.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
निकाल
आयटम 1
आयटम 2
आयटम 3
आयटम 4
- संक्रमणे: CSS3 ने वेब पृष्ठांवर संक्रमण तयार करण्यासाठी अनेक नवीन गुणधर्म आणि तंत्रे सादर केली. उदाहरणार्थ, द
transition
प्रॉपर्टीचा वापर कालांतराने CSS गुणधर्मांमधील बदल अॅनिमेट करण्यासाठी केला जाऊ शकतो. या उदाहरणात, द.box
वर्ग घटकासाठी रुंदी, उंची आणि प्रारंभिक पार्श्वभूमी रंग सेट करतो. दtransition
मालमत्ता सेट केली आहेbackground-color 0.5s ease
इझी-इन-आउट टाइमिंग फंक्शनसह अर्ध्या सेकंदात बॅकग्राउंड कलर प्रॉपर्टीमध्ये बदल अॅनिमेट करण्यासाठी. द.box:hover
क्लास घटकाचा पार्श्वभूमी रंग बदलतो जेव्हा माउस पॉइंटर त्यावर असतो, संक्रमण अॅनिमेशन ट्रिगर करतो.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
निकाल
फिरवा
येथे!
येथे!
- अॅनिमेशन: CSS3 ने वेब पृष्ठांवर अॅनिमेशन तयार करण्यासाठी अनेक नवीन गुणधर्म आणि तंत्रे सादर केली. या उदाहरणात, आम्ही वापरून अॅनिमेशन जोडले आहे
animation
मालमत्ता. आम्ही परिभाषित केले आहे a@keyframes
अॅनिमेशनसाठी नियम, जे निर्दिष्ट करते की बॉक्स 0 सेकंदांच्या कालावधीत 90 अंश ते 0.5 अंशांवर फिरला पाहिजे. जेव्हा बॉक्स वर फिरवला जातो, तेव्हाspin
बॉक्स फिरवण्यासाठी अॅनिमेशन लागू केले जाते. दanimation-fill-mode
मालमत्ता सेट केली आहेforwards
अॅनिमेशन पूर्ण झाल्यानंतर त्याची अंतिम स्थिती कायम राहते याची खात्री करण्यासाठी.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
निकाल
फिरवा
येथे!
येथे!
- CSS कस्टम गुणधर्म: त्याला असे सुद्धा म्हणतात CSS व्हेरिएबल्स, सानुकूल गुणधर्म CSS3 मध्ये सादर केले गेले. ते तुम्हाला CSS मध्ये तुमच्या स्वत:च्या सानुकूल गुणधर्म परिभाषित करण्याची आणि वापरण्याची अनुमती देतात, जी तुमच्या संपूर्ण स्टाईलशीटमध्ये मूल्ये संचयित आणि पुनर्वापर करण्यासाठी वापरली जाऊ शकतात. CSS व्हेरिएबल्स दोन डॅशने सुरू होणाऱ्या नावाने ओळखले जातात, जसे की
--my-variable
. या उदाहरणात, आम्ही -primary-color नावाचे CSS व्हेरिएबल परिभाषित करतो आणि त्याला एक मूल्य देतो#007bff
, जो सामान्यतः अनेक डिझाइनमध्ये प्राथमिक रंग म्हणून वापरला जाणारा निळा रंग आहे. आम्ही हे व्हेरिएबल सेट करण्यासाठी वापरले आहेbackground-color
वापरून, बटण घटकाची गुणधर्मvar()
व्हेरिएबलच्या नावात फंक्शन आणि पासिंग. हे बटणासाठी पार्श्वभूमी रंग म्हणून व्हेरिएबलचे मूल्य वापरेल.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- एकाधिक पार्श्वभूमी: CSS3 तुम्हाला घटकासाठी एकाधिक पार्श्वभूमी प्रतिमा निर्दिष्ट करण्यास अनुमती देते, त्याचे स्थान आणि स्टॅकिंग ऑर्डर नियंत्रित करण्याच्या क्षमतेसह. पार्श्वभूमी दोन प्रतिमांनी बनलेली आहे,
red.png
आणिblue.png
, जे वापरून लोड केले जातातbackground-image
मालमत्ता. पहिली प्रतिमा,red.png
, घटकाच्या उजव्या तळाशी कोपर्यात स्थित आहे, तर दुसरी प्रतिमा,blue.png
, घटकाच्या डाव्या शीर्षस्थानी स्थित आहे. दbackground-position
प्रत्येक प्रतिमेची स्थिती नियंत्रित करण्यासाठी गुणधर्माचा वापर केला जातो. दbackground-repeat
प्रतिमांची पुनरावृत्ती कशी होते हे नियंत्रित करण्यासाठी गुणधर्माचा वापर केला जातो. पहिली प्रतिमा,red.png
, पुनरावृत्ती न करण्यासाठी सेट केले आहे (no-repeat
), तर दुसरी प्रतिमा,blue.png
, पुनरावृत्ती करण्यासाठी सेट केले आहे (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}