Lectia 11.1 Gradienturi și Imagini de Fundal în CSS pentru Design Avansat

by

Overview:

În această lecție, vom explora tehnici avansate de stilizare a fundalurilor în CSS, inclusiv utilizarea gradienturilor și a imaginilor de fundal. Aceste elemente permit dezvoltatorilor să creeze design-uri complexe și atractive pentru paginile web.

Key Concepts:

  1. Gradienturi în CSS:
    • Linear Gradient: O tranziție de culoare de-a lungul unei linii.
    • Radial Gradient: O tranziție de culoare în jurul unui punct central.
  2. Utilizarea Gradienturilor:
    • background: linear-gradient() și background: radial-gradient(): Adăugarea gradientului la fundalul unui element.
    • Definirea Punctelor de Oprire (color stops): Precizarea culorilor la diferite puncte ale gradientului.
  3. Imagini de Fundal în CSS:
    • background-image: Adăugarea unei imagini de fundal unui element.
    • background-repeat, background-size, background-position: Controlul repetării, dimensiunii și poziționării imaginii de fundal.

Detailed Examples:

1. Linear Gradient:
/* Stilizare cu un gradient liniar */
.gradient-liniar {
  background: linear-gradient(to right, #ff8c00, #ff2d2d);
}
2. Radial Gradient:
/* Stilizare cu un gradient radial */
.gradient-radial {
  background: radial-gradient(circle, #4caf50, #2196f3);
}
3. Imagine de Fundal:
/* Stilizare cu o imagine de fundal */
.imagine-fundal {
  background-image: url('calea-catre-imagine.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


Exercițiul Practic: CSS – Gradienturi și Imagini de Fundal

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercițiul Practic: Gradienturi și Imagini de Fundal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: CSS - Gradienturi și Imagini de Fundal</h1>

  <div class="gradient-container gradient-linear">
    <p>Acesta este un element cu gradient liniar.</p>
  </div>

  <div class="gradient-container gradient-radial">
    <p>Acesta este un alt element cu gradient radial.</p>
  </div>

  <div class="background-image-container">
    <p>Acesta este un element cu imagine de fundal.</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare cu un gradient liniar */
.gradient-container.gradient-linear {
  background: linear-gradient(to right, #00bfff, #ff8c00);
  color: #fff; /* Text alb pentru contrast */
  padding: 20px;
  text-align: center;
}

/* Stilizare cu un gradient radial */
.gradient-container.gradient-radial {
  background: radial-gradient(circle, #ff6347, #008000);
  color: #fff; /* Text alb pentru contrast */
  padding: 20px;
  text-align: center;
}

/* Stilizare cu o imagine de fundal */
.background-image-container {
  background-image: url('calea-catre-imagine.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff; /* Text alb pentru contrast */
  padding: 20px;
  text-align: center;
}