Stilizarea imaginilor cu CSS
CSS oferă mai multe moduri de a stiliza imaginile, iar această lecție le parcurge pe rând.
Imagini rotunjite
Imaginile rotunjite se obțin cu proprietatea border-radius.
Sfat: Modelarea (decuparea) imaginilor în cercuri, elipse și poligoane este explicată în capitolul Forme CSS pentru imagini.
Imagine rotunjită
Pentru colțuri rotunjite la o imagine ai nevoie doar de border-radius: 8px.
Prompt
Creați o pagină care afișează o imagine cu colțuri rotunjite folosind border-radius: 8px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Image</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
</body>
</html>
Imagine circulară
O imagine se transformă în cerc cu border-radius: 50%.
Prompt
Creați o pagină care afișează o imagine stilizată ca un cerc folosind border-radius: 50%.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circled Image</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circled Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="300">
</body>
</html>
Imagini miniatură
Imaginile miniatură se bazează pe proprietatea border.
Imagine miniatură
Un chenar, border-radius și padding transformă împreună această imagine într-o miniatură.
Prompt
Creați o pagină care afișează o imagine stilizată ca o miniatură cu un chenar deschis la culoare, border-radius și padding.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre">
</body>
</html>
Miniatură ca link
Dacă pui imaginea miniatură într-o etichetă anchor, ea devine un link, iar box-shadow îi dă un efect hover.
Prompt
Creați o pagină care afișează o imagine miniatură încadrată într-un link. Adăugați un efect hover cu box-shadow pe imagine.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image as Link</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<a href="https://prompt-cookbook.com" target="_blank">
<img src="img_5terre.jpg" alt="Cinque Terre">
</a>
</body>
</html>
Imagini responsive
O imagine este responsivă atunci când se ajustează singură pentru a se potrivi dimensiunii ecranului.
Dacă setezi max-width: 100% și height: auto, imaginea se micșorează ori de câte ori este nevoie, dar nu crește peste dimensiunea sa originală.
Sfat: Design-ul Web Responsiv este explicat separat în tutorialul CSS RWD.
Exemplu
Prompt
Creați o pagină cu o imagine responsivă care se micșorează, dar nu depășește niciodată dimensiunea sa originală, folosind max-width: 100% și height: auto.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect.</p>
<img src="img_5terre.jpg" alt="Cinque Terre" width="1000" height="300">
</body>
</html>
Imagini / Carduri Polaroid
Un efect box-shadow și o legendă text sub imagine îți dau un card de imagine în stil polaroid.
Exemplu
Prompt
Creați o pagină cu două carduri de imagini în stil polaroid. Fiecare card are o imagine deasupra și o legendă text dedesubt, cu un box-shadow pentru efectul de card.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polaroid Images / Cards</title>
<style>
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
img {
width: 100%;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="container">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="container">
<p>Northern Lights</p>
</div>
</div>
</body>
</html>
Galerie de imagini responsivă
Și galeriile de imagini pot fi făcute responsive cu CSS: media queries rearanjează imaginile pentru diferite dimensiuni de ecran.
Sfat: Design-ul Web Responsiv este explicat separat în tutorialul CSS RWD.
Exemplu
Prompt
Creați o galerie de imagini responsivă folosind CSS. Afișați patru imagini pe un rând pe ecrane mari, câte două pe rând pe ecrane medii (max-width: 768px) și una pe rând pe ecrane mici (max-width: 480px). Folosiți media queries.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
div.gallery-item {
width: calc(25% - 20px);
margin: 10px;
}
div.gallery-item img {
width: 100%;
border-radius: 4px;
}
div.gallery-item .desc {
text-align: center;
padding: 8px;
}
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<img src="https://prompt-cookbook.com" alt="Green Forest">
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>