Conținut de marketing
Caracteristici CSS3 de care este posibil să nu fii conștient: Flexbox, Aspecte de grilă, Proprietăți personalizate, Tranziții, Animații și fundaluri multiple
Foi de stil în cascadă (CSS) continuă să evolueze, iar cele mai recente versiuni pot avea unele caracteristici de care este posibil să nu fii conștient. Iată câteva dintre îmbunătățirile și metodologiile majore introduse cu CSS3, împreună cu exemple de cod:
- Aspect cutie flexibilă (Flexbox): un mod de aspect care vă permite să creați machete flexibile și receptive pentru paginile web. Cu flexbox, puteți alinia și distribui cu ușurință elementele într-un container. n acest exemplu,
.container
utilizări de clasădisplay: flex
pentru a activa modul de aspect flexbox. Thejustify-content
proprietatea este setată lacenter
pentru a centra orizontal elementul copil în interiorul containerului. Thealign-items
proprietatea este setată lacenter
pentru a centra vertical elementul copil. The.item
clasa stabilește culoarea de fundal și umplutura pentru elementul copil.
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;
}
Rezultat
Element centrat
- Aspectul grilei: un alt mod de aspect care vă permite să creați machete complexe bazate pe grilă pentru pagini web. Cu grilă, puteți specifica rânduri și coloane și apoi plasați elemente în anumite celule ale grilei. În acest exemplu,
.grid-container
utilizări de clasădisplay: grid
pentru a activa modul de aspect al grilei. Thegrid-template-columns
proprietatea este setată larepeat(2, 1fr)
pentru a crea două coloane de lățime egală. Thegap
proprietatea stabilește distanța dintre celulele grilei. The.grid-item
clasa stabilește culoarea de fundal și umplutura pentru elementele grilei.
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;
}
Rezultat
Postul 1
Postul 2
Postul 3
Postul 4
- Tranziții: CSS3 a introdus o serie de proprietăți și tehnici noi pentru crearea de tranziții pe paginile web. De exemplu, cel
transition
proprietatea poate fi folosită pentru a anima modificările proprietăților CSS în timp. În acest exemplu,.box
class setează lățimea, înălțimea și culoarea inițială de fundal pentru element. Thetransition
proprietatea este setată labackground-color 0.5s ease
pentru a anima modificările aduse proprietății de culoare de fundal în decurs de o jumătate de secundă cu o funcție de temporizare de ea-in-out. The.box:hover
clasa schimbă culoarea de fundal a elementului când cursorul mouse-ului este peste el, declanșând animația de tranziție.
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;
}
Rezultat
Planare
Aici!
Aici!
- animaţii: CSS3 a introdus o serie de proprietăți și tehnici noi pentru crearea de animații pe paginile web. În acest exemplu, am adăugat o animație folosind
animation
proprietate. Am definit o@keyframes
regula pentru animație, care specifică că caseta trebuie să se rotească de la 0 grade la 90 de grade pe o durată de 0.5 secunde. Când cutia este plasată deasupra,spin
animația este aplicată pentru a roti caseta. Theanimation-fill-mode
proprietatea este setată laforwards
pentru a se asigura că starea finală a animației este păstrată după ce se termină.
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;
}
Rezultat
Planare
Aici!
Aici!
- Proprietăți personalizate CSS: De asemenea cunoscut ca si variabile CSS, proprietățile personalizate au fost introduse în CSS3. Acestea vă permit să definiți și să utilizați propriile proprietăți personalizate în CSS, care pot fi folosite pentru a stoca și reutiliza valori în foile de stil. Variabilele CSS sunt identificate printr-un nume care începe cu două liniuțe, cum ar fi
--my-variable
. În acest exemplu, definim o variabilă CSS numită –primary-color și îi dăm o valoare de#007bff
, care este o culoare albastră folosită în mod obișnuit ca culoare primară în multe modele. Am folosit această variabilă pentru a setabackground-color
proprietatea unui element buton, prin folosireavar()
funcția și transmiterea numelui variabilei. Aceasta va folosi valoarea variabilei ca culoare de fundal pentru buton.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Fundaluri multiple: CSS3 vă permite să specificați mai multe imagini de fundal pentru un element, cu capacitatea de a controla poziționarea și ordinea de stivuire a acestuia. Fundalul este compus din două imagini,
red.png
șiblue.png
, care sunt încărcate folosindbackground-image
proprietate. Prima imagine,red.png
, este poziționat în colțul din dreapta jos al elementului, în timp ce a doua imagine,blue.png
, este poziționat în colțul din stânga sus al elementului. Thebackground-position
proprietatea este utilizată pentru a controla poziționarea fiecărei imagini. Thebackground-repeat
proprietatea este utilizată pentru a controla modul în care se repetă imaginile. Prima imagine,red.png
, este setat să nu se repete (no-repeat
), în timp ce a doua imagine,blue.png
, este setat să se repete (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;
}