Lecția 17: Editarea Imaginilor

by

Overview:

În această lecție, vom explora diverse tehnici și proprietăți CSS care pot fi folosite pentru a edita și îmbunătăți imagini pe o pagină web.

Key Concepts:

  1. Filtre CSS:
    • Utilizarea filtrelor CSS precum brightness, contrast, grayscale, sepia, blur etc., pentru a ajusta aspectul imaginilor.
  2. Superpoziție de Text:
    • Adăugarea de text peste imagini folosind proprietăți precum position, color, font-size etc.
  3. Opacitate și Overlay:
    • Utilizarea opacității pentru a face o imagine mai transparentă.
    • Adăugarea unui strat suplimentar (overlay) pentru a schimba tonul general al imaginii.
  4. Croirea Imaginilor:
    • Folosirea proprietăților object-fit și object-position pentru a controla modul în care o imagine este afișată într-un container.

Detailed Examples:

1. Filtre CSS:
/* Aplicare filtru de lumină și contrast */
.image-filter {
  filter: brightness(120%) contrast(150%);
}

/* Convertirea imaginii la tonuri de gri */
.grayscale-effect {
  filter: grayscale(100%);
}

/* Aplicarea unui efect sepia */
.sepia-effect {
  filter: sepia(80%);
}

/* Adăugare efect de blur */
.blur-effect {
  filter: blur(5px);
}
2. Superpoziție de Text:
/* Superpoziție de text peste imagine */
.text-overlay {
  position: relative;
}

.text-overlay h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
3. Opacitate și Overlay:
/* Reducerea opacității imaginii */
.transparent-image {
  opacity: 0.7;
}

/* Adăugare overlay cu culoare */
.overlay-color {
  position: relative;
}

.overlay-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* Culoare și opacitate */
}
4. Croirea Imaginilor:
/* Controlul modului de afișare a imaginii într-un container */
.object-fit-example {
  width: 200px;
  height: 200px;
  object-fit: cover; /* Aspect de acoperire, fără deformare */
  object-position: center; /* Poziționare la centru */
}

Exercițiul Practic: CSS – Editare Imagini

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

  <div class="image-container">
    <img src="sample-image.jpg" alt="Imagine de exemplu" class="image-filter grayscale-effect">
    <h2 class="text-overlay">Imagine Grayscale</h2>
  </div>

  <div class="image-container transparent-image">
    <img src="sample-image.jpg" alt="Imagine de exemplu" class="overlay-color">
    <h2 class="text-overlay">Imagine Transparentă</h2>
  </div>

  <div class="image-container">
    <img src="sample-image.jpg" alt="Imagine de exemplu" class="object-fit-example">
    <h2 class="text-overlay">Imagine cu Object Fit</h2>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Clasa pentru containerul imaginii */
.image-container {
  position: relative;
  margin: 20px;
}

/* Aplicare filtru de lumină și contrast */
.image-filter {
  filter: brightness(120%) contrast(150%);
}

/* Convertirea imaginii la tonuri de gri */
.grayscale-effect {
  filter: grayscale(100%);
}

/* Superpoziție de text peste imagine */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Reducerea opacității imaginii */
.transparent-image {
  opacity: 0.7;
}

/* Adăugare overlay cu culoare */
.overlay-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* Culoare și opacitate */
}

/* Controlul modului de afișare a imaginii într-un container */
.object-fit-example {
  width: 200px;
  height: 200px;
  object-fit: cover; /* Aspect de acoperire, fără deformare */
  object-position: center; /* Poziționare la centru */
}