सामग्री मार्केटिङ
CSS3 सुविधाहरू तपाईलाई थाहा नहुन सक्छ: फ्लेक्सबक्स, ग्रिड लेआउटहरू, अनुकूलन गुणहरू, ट्रान्जिसनहरू, एनिमेसनहरू, र बहुविध पृष्ठभूमिहरू
क्यास्केडिङ शैली पाना (CSS) विकसित हुन जारी राख्नुहोस् र नवीनतम संस्करणहरूमा केहि सुविधाहरू हुन सक्छ जुन तपाईलाई थाहा नहुन सक्छ। यहाँ CSS3 सँग परिचय गरिएका केही प्रमुख सुधार र विधिहरू छन्, कोड उदाहरणहरू सहित:
- लचिलो बक्स लेआउट (फ्लेक्सबक्स): लेआउट मोड जसले तपाईंलाई वेब पृष्ठहरूको लागि लचिलो र उत्तरदायी लेआउटहरू सिर्जना गर्न अनुमति दिन्छ। फ्लेक्सबक्सको साथ, तपाइँ कन्टेनर भित्र तत्वहरू सजिलै पङ्क्तिबद्ध र वितरण गर्न सक्नुहुन्छ। यो उदाहरण, द
.container
वर्ग प्रयोग गर्दछdisplay: flex
flexbox लेआउट मोड सक्षम गर्न। द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
सम्पत्ति। हामीले एक परिभाषित गरेका छौं@keyframes
एनिमेसनको लागि नियम, जसले बक्सलाई ०.५ सेकेन्डको अवधिमा ० डिग्रीदेखि ९० डिग्रीसम्म घुमाउनुपर्छ भनेर निर्दिष्ट गर्छ। जब बक्स माथि होभर गरिएको छ,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;
}