కంటెంట్ మార్కెటింగ్
CSS3 ఫీచర్లు మీకు తెలియకపోవచ్చు: ఫ్లెక్స్బాక్స్, గ్రిడ్ లేఅవుట్లు, అనుకూల లక్షణాలు, పరివర్తనాలు, యానిమేషన్లు మరియు బహుళ నేపథ్యాలు
క్యాస్కేడింగ్ స్టైల్ షీట్లు (CSS) అభివృద్ధి చెందడం కొనసాగుతుంది మరియు తాజా సంస్కరణలు మీకు తెలియని కొన్ని లక్షణాలను కలిగి ఉండవచ్చు. కోడ్ ఉదాహరణలతో పాటు CSS3తో పరిచయం చేయబడిన కొన్ని ప్రధాన మెరుగుదలలు మరియు మెథడాలజీలు ఇక్కడ ఉన్నాయి:
- ఫ్లెక్సిబుల్ బాక్స్ లేఅవుట్ (ఫ్లెక్స్బాక్స్): వెబ్ పేజీల కోసం అనువైన మరియు ప్రతిస్పందించే లేఅవుట్లను సృష్టించడానికి మిమ్మల్ని అనుమతించే లేఅవుట్ మోడ్. ఫ్లెక్స్బాక్స్తో, మీరు కంటైనర్లోని ఎలిమెంట్లను సులభంగా సమలేఖనం చేయవచ్చు మరియు పంపిణీ చేయవచ్చు. ఈ ఉదాహరణలో, ది
.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;
}