Gradient liniar
Gradienții reprezintă o tranziție lină de la o culoare la alta. În CSS3, există mai multe tipuri de gradienți pe care îi poți utiliza pentru a crea fundalul unui element.
Gradienții în CSS nu constituie o proprietate specială. Ei creează o valoare care este atribuită proprietății background-image.
Un gradient liniar se extinde într-o linie dreaptă de la un capăt al elementului la altul, realizând o tranziție lină de la o culoare la alta.
Pentru a crea un gradient, trebuie să specifici punctul său de început și mai multe culori, de exemplu:
background-image: linear-gradient(left, black, white);În acest caz, punctul de început al gradientului este marginea stângă a elementului, indicată de valoarea left. Culorile gradientului sunt negru (black) și alb (white). Astfel, începând de la marginea stângă a elementului până la dreapta, va avea loc o tranziție lină de la negru la alb.
Utilizarea gradienților are un dezavantaj - diversitatea browserelor necesită utilizarea prefixelor de vendor:
-webkit- /* Pentru Google Chrome, Safari, Microsoft Edge, Opera versiunea peste 15 */
-moz- /* Pentru Mozilla Firefox */
-o- /* Pentru Opera mai veche de versiunea 15 (Opera 12) */Astfel, utilizarea completă a unui gradient arată în felul următor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stilizarea tabelelor în CSS3</title>
<style>
div {
width: 200px;
height: 100px;
background-color: #eee;
background-image: linear-gradient(left, black, white);
background-image: -o-linear-gradient(left, black, white);
background-image: -moz-linear-gradient(left, black, white);
background-image: -webkit-linear-gradient(left, black, white);
}
p {
margin: 0;
padding-top: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div><p>Gradient liniar alb-negru</p></div>
</body>
</html>
Pentru a seta punctul de început al gradientului, se pot utiliza următoarele valori: left (de la stânga la dreapta), right (de la dreapta la stânga), top (de sus în jos) sau bottom (de jos în sus). De exemplu, un gradient vertical ar arăta astfel:
background-image: linear-gradient(bottom, black, white);De asemenea, poți seta o direcție diagonală folosind două valori:
background-image: linear-gradient(top left, black, white);
Pe lângă valorile specifice precum top sau left, poți specifica un unghi de la 0 la 360 de grade, care va defini direcția gradientului:
background-image: linear-gradient(30deg, black, white);După valoarea unghiului, se adaugă cuvântul deg.
De exemplu, 0deg înseamnă că gradientul începe din partea stângă și se deplasează către partea dreaptă, iar la 45deg începe din colțul stânga jos și se mișcă sub un unghi de 45° spre colțul dreapta sus.
După definirea punctului de început al gradientului, poți specifica culorile utilizate sau punctele de referință. Nu este obligatoriu să folosești doar două culori, pot fi și mai multe:
background-image: linear-gradient(top, red, #ccc, blue);Toate culorile aplicate sunt distribuite uniform. Cu toate acestea, poți specifica și locațiile specifice pentru punctele de culoare. Pentru aceasta, după culoare se adaugă o a doua valoare care determină poziția punctului.
background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);Gradientul repetitiv
Cu ajutorul repeating-linear-gradient, poți crea gradienți liniari repetitivi. De exemplu:
background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);În acest caz, gradientul începe de la marginea stângă a elementului cu o bandă de culoare gri (#ccc) de 20 de pixeli, apoi trece la roșu până la 30 de pixeli, urmat de un revers la un albastru deschis (rgba(0, 0, 126, .5)) până la 40 de pixeli. După aceea, browserul repetă gradientul până când umple întreaga suprafață a elementului.