కంటెంట్ మార్కెటింగ్

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;
    }

    ఫలితం

    Douglas Karr

    Douglas Karr యొక్క CMO ఓపెన్‌ఇన్‌సైట్‌లు మరియు స్థాపకుడు Martech Zone. డగ్లస్ డజన్ల కొద్దీ విజయవంతమైన మార్టెక్ స్టార్టప్‌లకు సహాయం చేసారు, మార్టెక్ సముపార్జనలు మరియు పెట్టుబడులలో $5 బిలియన్ల కంటే ఎక్కువ శ్రద్ధ వహించడంలో సహాయం చేసారు మరియు కంపెనీల అమ్మకాలు మరియు మార్కెటింగ్ వ్యూహాలను అమలు చేయడంలో మరియు ఆటోమేట్ చేయడంలో కంపెనీలకు సహాయం చేస్తూనే ఉన్నారు. డగ్లస్ అంతర్జాతీయంగా గుర్తింపు పొందిన డిజిటల్ ట్రాన్స్‌ఫర్మేషన్ మరియు మార్టెక్ నిపుణుడు మరియు స్పీకర్. డగ్లస్ డమ్మీస్ గైడ్ మరియు వ్యాపార నాయకత్వ పుస్తకం యొక్క ప్రచురించిన రచయిత కూడా.

    సంబంధిత వ్యాసాలు

    తిరిగి టాప్ బటన్ కు
    క్లోజ్

    Adblock కనుగొనబడింది

    Martech Zone మేము ప్రకటన రాబడి, అనుబంధ లింక్‌లు మరియు స్పాన్సర్‌షిప్‌ల ద్వారా మా సైట్‌ను మానిటైజ్ చేయడం వల్ల ఎటువంటి ఖర్చు లేకుండా ఈ కంటెంట్‌ని మీకు అందించగలుగుతుంది. మీరు మా సైట్‌ని వీక్షిస్తున్నప్పుడు మీ ప్రకటన బ్లాకర్‌ని తీసివేస్తే మేము అభినందిస్తాము.