Content Marketing

Ny endri-javatra CSS3 mety tsy ho fantatrao: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, ary marolafy

Cascading Style Sheets (CSS) mitohy mivoatra ary ny dikan-teny farany dia mety manana endri-javatra sasany izay mety tsy ho fantatrao akory. Ireto ny sasany amin'ireo fanatsarana lehibe sy fomba fiasa nampidirina tamin'ny CSS3, miaraka amin'ireo ohatra kaody:

  • Fametrahana Boaty Flexible (Flexbox): fomba fandrafetana izay ahafahanao mamorona filaharana moramora sy mamaly ho an'ny pejin-tranonkala. Miaraka amin'ny flexbox, azonao atao ny mampifanaraka mora foana sy mizara singa ao anaty fitoeran-javatra iray. n ity ohatra ity, ny .container fampiasana kilasy display: flex mba hahafahan'ny flexbox layout mode. ny justify-content fananana dia napetraka amin'ny center mba hampifantoka marindrano ny singa zaza ao anatin'ny fitoeran-javatra. ny align-items fananana dia napetraka amin'ny center mitsangana mitsangana ny singa zaza. ny .item class dia mametraka ny loko sy ny padding ho an'ny singa ankizy.

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

Result

Element afovoany
  • Fametrahana ny tsipika: fomba fandrafetana hafa ahafahanao mamorona filaharana mifototra amin'ny grid sarotra ho an'ny pejin-tranonkala. Miaraka amin'ny grid, azonao atao ny mamaritra andalana sy tsanganana, ary avy eo mametraka singa ao anatin'ny sela manokana amin'ny grid. Amin'ity ohatra ity, ny .grid-container fampiasana kilasy display: grid mba hahafahan'ny maodely layout grid. ny grid-template-columns fananana dia napetraka amin'ny repeat(2, 1fr) mba hamoronana tsanganana roa mitovy sakany. ny gap Ny fananana dia mametraka ny elanelana misy eo amin'ny cellule grid. ny .grid-item Ny kilasy dia mametraka ny loko sy ny padding ho an'ny singa grid.

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

Result

Andininy faha-1
Andininy faha-2
Andininy faha-3
Andininy faha-4
  • Tetezamita: CSS3 dia nampiditra fananana sy teknika vaovao maromaro hamoronana fifindrana amin'ny pejin-tranonkala. Ohatra, ny transition Ny fananana dia azo ampiasaina hamelomana ny fanovana amin'ny fananana CSS rehefa mandeha ny fotoana. Amin'ity ohatra ity, ny .box class dia mametraka ny sakany, ny haavony ary ny loko fototra voalohany ho an'ny singa. ny transition fananana dia napetraka amin'ny background-color 0.5s ease hamelombelona ny fiovana amin'ny fananana loko ambadika mandritra ny antsasa-tsegondra miaraka amin'ny fampandehanana fotoana mora miditra. ny .box:hover Ny kilasy dia manova ny loko ambadiky ny singa rehefa eo amboniny ny fanondro ny totozy, ka mahatonga ny sarimiaina tetezamita.

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

Result

miaraka amin
Eto!
  • Animations: CSS3 dia nampiditra fananana sy teknika vaovao maromaro amin'ny famoronana sary mihetsika amin'ny pejin-tranonkala. Amin'ity ohatra ity dia nampiana sary mihetsika mampiasa ny animation fananana. Nofaritanay a @keyframes fitsipika ho an'ny animation, izay mamaritra fa ny boaty dia tokony hihodina avy amin'ny 0 degre ka hatramin'ny 90 degre mandritra ny 0.5 segondra. Rehefa atsipy eo ambonin'ilay boaty ny spin Animation dia ampiharina hanodinana ny boaty. ny animation-fill-mode fananana dia napetraka amin'ny forwards mba hahazoana antoka fa tazonina ny toetra farany amin'ny sarimiaina rehefa vita.

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

Result

miaraka amin
Eto!
  • CSS Custom Properties: Fantatra ihany koa CSS variables, ny fananana manokana dia nampidirina tao amin'ny CSS3. Izy ireo dia mamela anao hamaritra sy hampiasa ny fanananao manokana ao amin'ny CSS, izay azo ampiasaina hitahiry sy hampiasaina indray ny soatoavina manerana ny stylesheets. Ny fari-piainan'ny CSS dia fantatra amin'ny anarana izay manomboka amin'ny tsipika roa, toy ny
    --my-variable. Amin'ity ohatra ity, dia mamaritra ny fari-piadidiana CSS antsoina hoe -primary-color ary manome azy sanda ny #007bff, izay loko manga fampiasa matetika ho loko voalohany amin'ny endrika maro. Nampiasa an'io variable io izahay mba hametrahana ny background-color fananan'ny singa bokotra iray, amin'ny fampiasana ny var() miasa sy mandalo amin'ny anarana miovaova. Izany dia hampiasa ny sandan'ny fari-piainana ho loko ambadiky ny bokotra.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Fototra maro: Ny CSS3 dia ahafahanao mamaritra sary lafika maro ho an'ny singa iray, miaraka amin'ny fahafahana mifehy ny filaharany sy ny filaharany. Ny lafika dia ahitana sary roa, red.png ary blue.png, izay entina mampiasa ny background-image fananana. Ny sary voalohany, red.png, dia apetraka eo amin'ny zoro havanana ambany amin'ilay singa, raha ny sary faharoa kosa, blue.png, dia mipetraka eo amin'ny zoro ambony havia amin'ny singa. ny background-position Ny fananana dia ampiasaina hifehezana ny toerana misy ny sary tsirairay. ny background-repeat Ny fananana dia ampiasaina hifehezana ny famerimberenan'ny sary. Ny sary voalohany, red.png, dia natao tsy hamerina (no-repeat), raha ny sary faharoa, blue.png, dia natao hamerina (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;
    }

    Result

    Douglas Karr

    Douglas Karr dia CMO ny OpenINSIGHTS ary ny mpanorina ny Martech Zone. Nanampy tamin'ny fanombohana MarTech am-polony maro i Douglas, nanampy tamin'ny fahazotoana mitentina 5 miliara dolara amin'ny fividianana sy fampiasam-bola Martech, ary manohy manampy ireo orinasa amin'ny fampiharana sy ny automatique ny paikady momba ny varotra sy ny varotra. Douglas dia fanovàna nomerika eken'ny sehatra iraisam-pirenena ary manampahaizana sy mpandahateny MarTech. Douglas dia mpanoratra navoakan'ny torolàlana Dummie ary boky fitarihana orinasa.

    Related Articles

    Miverina amin'ny bokotra ambony
    akaiky

    Adblock hita

    Martech Zone dia afaka manome anao ity votoaty ity tsy misy vidiny satria ataonay vola ny tranokalanay amin'ny alàlan'ny fidiram-bolan'ny doka, ny rohy mifandray, ary ny fanohanana. Mankasitraka izahay raha esorinao ny fanakanana dokao rehefa mijery ny tranokalanay ianao.