CSS (Cascading Style Sheets) este un limbaj de stilizare folosit în dezvoltarea web pentru a controla prezentarea și aspectul documentelor HTML. Acesta permite definirea modului în care elementele HTML arată, inclusiv culori, fonturi, spațiere și margini, contribuind la îmbunătățirea designului vizual și a experienței utilizatorului pe un site web.
Exemplu: Poți copia următorul cod chiar și într-un notepad, să îl salvezi cu extensia .html (exemplu.html), iar apoi la dublu click se va deschide o pagină într-un browser și vei vedea rezultatul.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #28292b;
}
div {
margin: 25px;
width: 100px;
height: 100px;
border-color: #368372;
}
</style>
</head>
<body>
<div style=”border-style: dotted;”></div>
<div style=”border-style: dashed;”></div>
<div style=”border-style: solid;”></div>
<div style=”border-style: double;”></div>
<div style=”border-style: dotted dashed solid double;”></div>
</body>
</html>
Ce apare în browser?
În exemplul furnizat:
- Selectorul body stabilește culoarea de fundal a întregii pagini la #28292b.
- Selectorul div definește un stil comun pentru toate elementele div. Fiecare div are o margine de 25 de pixeli, o lățime și înălțime de 100 de pixeli și o culoare a marginii de #368372.
- Stilurile inline pentru elementele individuale div specifică tipurile lor de margini (dotted, dashed, solid, double) și chiar o combinație de margini punctate și liniate.
În ansamblu, acest exemplu demonstrează utilizarea CSS pentru a stiliza elementele HTML, oferind o structură și un aspect vizual consecvent pentru elementele div specificate în documentul HTML.
Acum, hai să adăugăm niște animații pentru aceste borders:
Pasul 1: Crearea clasei .animated-border:
css
.animated-border {
animation: mymove 10s infinite;
}
Această clasă este destinată să fie aplicată la div-urile pentru care dorești să adaugi animații la borders. Proprietatea animation este folosită pentru a specifica numele animației (mymove), durata acesteia (10s) și faptul că animația se repetă la infinit (infinite).
Pasul 2: Definirea animației @keyframes mymove:
css
@keyframes mymove {
0% {
border-width: 0px;
}
25% {
border-width: 5px;
}
50% {
border-width: 10px;
}
75% {
border-width: 5px;
}
100% {
border-width: 0px;
}
}
Aici, se definește animația mymove cu ajutorul @keyframes. Aceasta specifică cum se schimbă proprietatea border-width (grosimea border-ului) pe parcursul timpului. În acest exemplu, animația începe cu o grosime de 0px la 0% și ajunge la 10px la 50%, apoi revine la 0px la 100%. Aceste valori și procente pot fi ajustate pentru a obține efectul dorit.
Pasul 3: Adăugarea clasei animated-border la fiecare div:
html
<div style=”border-style: dotted;” class=”animated-border”></div>
<div style=”border-style: dashed;” class=”animated-border”></div>
<div style=”border-style: solid;” class=”animated-border”></div>
<div style=”border-style: double;” class=”animated-border”></div>
<div style=”border-style: dotted dashed solid double;” class=”animated-border”></div>
Prin adăugarea clasei animated-border la fiecare div, se aplică animația specificată în CSS acestora.
Aceasta este o modalitate simplă de a adăuga animații la border-urile div-urilor utilizând CSS și keyframes. Poți ajusta valorile din keyframes pentru a personaliza aspectul animației.
Codul, în final, va arata așa:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #28292b;
}
div {
margin: 25px;
width: 100px;
height: 100px;
border-color: #368372;
}
.animated-border {
animation: mymove 10s infinite;
}
@keyframes mymove {
0% {
border-width: 0px;
}
25% {
border-width: 5px;
}
50% {
border-width: 10px;
}
75% {
border-width: 5px;
}
100% {
border-width: 0px;
}
}
</style>
</head>
<body>
<div style=”border-style: dotted;” class=”animated-border”></div>
<div style=”border-style: dashed;” class=”animated-border”></div>
<div style=”border-style: solid;” class=”animated-border”></div>
<div style=”border-style: double;” class=”animated-border”></div>
<div style=”border-style: dotted dashed solid double;” class=”animated-border”></div>
</body>
</html>
Pune acest cod din nou în Notepad și verifică ce apare în browser.
Dacă ai întrebări, nu ezita să mă contactezi!