Inhalt Marketing
CSS3 Features déi Dir vläicht net bewosst sidd: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, a Multiple Backgrounds
Cascading Style Sheets (CSS) weider ze entwéckelen an déi lescht Versioune kënnen e puer Features hunn, déi Dir vläicht net emol bewosst sidd. Hei sinn e puer vun de grousse Verbesserungen a Methodologien agefouert mat CSS3, zesumme mat Code Beispiller:
- Flexibel Box Layout (Flexbox): e Layoutmodus deen Iech erlaabt flexibel a reaktiounsfäeger Layouten fir Websäiten ze kreéieren. Mat Flexbox kënnt Dir Elementer an engem Container einfach ausrichten a verdeelen. n dësem Beispill, der
.container
Klass benotztdisplay: flex
fir de flexbox Layoutmodus z'aktivéieren. Déijustify-content
Propriétéit ass opcenter
fir d'Kandelement am Container horizontal ze zentréieren. Déialign-items
Propriétéit ass opcenter
fir d'Kandelement vertikal ze zentréieren. Déi.item
Klass setzt den Hannergrondfaarf a Padding fir d'Kandelement.
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;
}
Resultat
zentréiert Element
- Gitter Layout: en anere Layoutmodus deen Iech erlaabt komplex Gitter-baséiert Layouten fir Websäiten ze kreéieren. Mat Gitter kënnt Dir Reihen a Spalten spezifizéieren, an dann Elementer bannent spezifesch Zellen vum Gitter setzen. An dësem Beispill, der
.grid-container
Klass benotztdisplay: grid
Gitter Layout Modus z'aktivéieren. Déigrid-template-columns
Propriétéit ass oprepeat(2, 1fr)
fir zwou Saile vun der selwechter Breet ze kreéieren. Déigap
Property setzt d'Distanz tëscht Gitterzellen. Déi.grid-item
Klass setzt d'Hannergrondfaarf an d'Padding fir d'Gitterartikelen.
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;
}
Resultat
Artikel 1
Artikel 2
Artikel 3
Artikel 4
- Iwwergäng: CSS3 huet eng Rei vun neien Eegeschaften an Techniken agefouert fir Iwwergäng op Websäiten ze kreéieren. Zum Beispill, de
transition
Eegeschafte kënne benotzt ginn fir Ännerungen an CSS Eegeschafte mat der Zäit ze animéieren. An dësem Beispill, der.box
Klass setzt d'Breet, d'Héicht an d'initial Hannergrondfaarf fir d'Element. Déitransition
Propriétéit ass opbackground-color 0.5s ease
fir Ännerungen an der Hannergrondfaarfeigenschaft iwwer eng hallef Sekonn mat enger einfacher Timingfunktioun ze animéieren. Déi.box:hover
Klass ännert d'Hannergrondfaarf vum Element wann de Mauszeiger driwwer ass, wat d'Iwwergangsanimatioun ausléist.
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;
}
Resultat
Hover
Hei!
Hei!
- Animatiounen: CSS3 huet eng Rei vun neien Eegeschaften an Techniken agefouert fir Animatiounen op Websäiten ze kreéieren. An dësem Beispill hu mir eng Animatioun bäigefüügt mat der
animation
Propriétéit. Mir hunn eng definéiert@keyframes
Regel fir d'Animatioun, déi spezifizéiert datt d'Këscht vun 0 Grad op 90 Grad iwwer eng Dauer vun 0.5 Sekonnen rotéiere soll. Wann d'Këscht iwwerhiewen ass, gëtt despin
Animatioun gëtt applizéiert fir d'Këscht ze rotéieren. Déianimation-fill-mode
Propriétéit ass opforwards
fir sécherzestellen datt den definitiven Zoustand vun der Animatioun erhale bleift nodeems se fäerdeg ass.
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;
}
Resultat
Hover
Hei!
Hei!
- CSS Custom Properties: Och bekannt CSS Verännerlechen, Benotzerdefinéiert Eegeschafte goufen an CSS3 agefouert. Si erlaben Iech Är eege personaliséiert Eegeschaften an CSS ze definéieren an ze benotzen, déi benotzt kënne fir Wäerter an Äre Stylesheets ze späicheren an ze benotzen. CSS Variablen ginn identifizéiert mat engem Numm deen mat zwee Bindestrecke ufänkt, wéi z
--my-variable
. An dësem Beispill definéiere mir eng CSS Variabel genannt -primary-color a ginn et e Wäert vun#007bff
, wat eng blo Faarf ass, déi allgemeng als primär Faarf a ville Designen benotzt gëtt. Mir hunn dës Variabel benotzt fir d'background-color
Propriétéit vun engem Knäppche Element, andeems Dir devar()
Funktioun a laanschtgoungen an der Variabel Numm. Dëst wäert de Wäert vun der Variabel als Hannergrondfaarf fir de Knäppchen benotzen.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Multiple Hannergrënn: CSS3 erlaabt Iech e puer Hannergrondbiller fir en Element ze spezifizéieren, mat der Fäegkeet fir seng Positionéierungs- a Stackuerdnung ze kontrolléieren. Den Hannergrond besteet aus zwee Biller,
red.png
anblue.png
, déi gelueden sinn mat derbackground-image
Propriétéit. Dat éischt Bild,red.png
, ass um riets ënnen Eck vum Element positionéiert, während dat zweet Bild,blue.png
, ass am lénksen ieweschten Eck vum Element positionéiert. Déibackground-position
Property gëtt benotzt fir d'Positionéierung vun all Bild ze kontrolléieren. Déibackground-repeat
Eegeschafte gëtt benotzt fir ze kontrolléieren wéi d'Biller widderhuelen. Dat éischt Bild,red.png
, ass agestallt fir net ze widderhuelen (no-repeat
), während dat zweet Bild,blue.png
, ass agestallt fir ze widderhuelen (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;
}