Lecția 16: Efecte CSS

by

Overview:

În această lecție, vom explora diferite efecte CSS care pot fi aplicate la elemente pentru a îmbunătăți aspectul și interactivitatea paginilor web.

Key Concepts:

  1. Efecte de Tranziție:
    • Utilizarea proprietății transition pentru a adăuga tranziții de animație la schimbările de stare ale elementelor.
  2. Efecte Hover:
    • Aplicarea stilurilor specifice la elemente atunci când utilizatorul plasează cursorul deasupra lor (:hover).
  3. Umbră și Contur:
    • Adăugarea umbrei și a unui contur pentru a evidenția elementele și pentru a le oferi o adâncime vizuală.
  4. Efecte de Transformare:
    • Utilizarea proprietăților transform și rotate pentru a realiza transformări 2D sau 3D ale elementelor.

Detailed Examples:

1. Efecte de Tranziție:
/* Adăugare tranziții pentru schimbările de culoare */
.transition-effect {
  transition: background-color 0.3s ease-in-out;
}

/* Tranziție pentru schimbarea dimensiunilor */
.resize-effect {
  transition: width 0.5s ease-out, height 0.5s ease-out;
}
2. Efecte Hover:
/* Stiluri implicite ale elementelor */
.hover-effect {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Stiluri pentru efectul la hover */
.hover-effect:hover {
  opacity: 0.7;
}
3. Umbră și Contur:
/* Adăugare umbră pentru efect de adâncime */
.shadow-effect {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Adăugare contur */
.outline-effect {
  outline: 2px solid #3498db;
}
4. Efecte de Transformare:
/* Rotirea elementului la hover */
.rotate-effect:hover {
  transform: rotate(45deg);
}

Exercițiul Practic: CSS – Efecte

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: Efecte CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="transition-effect">
    <p>Schimbare de culoare cu tranziție.</p>
  </div>

  <div class="resize-effect">
    <p>Mărimea se schimbă cu tranziție.</p>
  </div>

  <div class="hover-effect">
    <p>Efect la hover pentru opacitate.</p>
  </div>

  <div class="shadow-effect">
    <p>Element cu umbră pentru adâncime.</p>
  </div>

  <div class="outline-effect">
    <p>Element cu contur.</p>
  </div>

  <div class="rotate-effect">
    <p>Rotire la hover.</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Adăugare tranziții pentru schimbările de culoare */
.transition-effect {
  background-color: #3498db;
  padding: 10px;
  color: white;
  transition: background-color 0.3s ease-in-out;
}

/* Tranziție pentru schimbarea dimensiunilor */
.resize-effect {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  color: white;
  padding: 10px;
  transition: width 0.5s ease-out, height 0.5s ease-out;
}

/* Stiluri implicite ale elementelor */
.hover-effect {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Stiluri pentru efectul la hover */
.hover-effect:hover {
  opacity: 0.7;
}

/* Adăugare umbră pentru efect de adâncime */
.shadow-effect {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 10px;
}

/* Adăugare contur */
.outline-effect {
  outline: 2px solid #3498db;
  padding: 10px;
  margin: 10px;
}

/* Rotirea elementului la hover */
.rotate-effect {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

/* Rotire la hover */
.rotate-effect:hover {
  transform: rotate(45deg);
}