Forme de imagini CSS
Pentru a decupa imagini în cercuri, elipse și poligoane este nevoie de foarte puțin CSS.
Proprietatea CSS clip-path și funcția circle()
Ca să decupezi un element într-o formă de bază, folosește clip-path.
Una dintre aceste forme este circle(), descrisă prin rază și poziție.
Cerc cu rază de 50%
O rază de 50% este tot ce îi trebuie decupării circulare a acestei imagini.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path</title>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Cerc poziționat la dreapta
Centrul unui cerc poate fi și el ajustat. Acceptă o lungime, un procent sau unul dintre cuvintele cheie left, right, top și bottom; dacă nu setezi nimic, rămâne la center.
Această imagine păstrează raza de 50%, dar centrul cercului se mută la dreapta.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path Positioned</title>
<style>
img {
clip-path: circle(50% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside și circle()
Când conținutul inline se așază în jurul unui element flotant, shape-outside decide forma pe care o urmează.
Aici acea formă vine de la circle(), care primește o rază și o poziție.
Exemplu
Textul urmează aici o curbă pentru că shape-outside este un cerc cu rază de 45%, în timp ce imaginea însăși este decupată într-un cerc cu rază de 40%.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Shape Outside</title>
<style>
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
</style>
</head>
<body>
<h2>Circle with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit.</p>
</body>
</html>
CSS clip-path și ellipse()
Pe lângă cercuri, clip-path poate decupa un element și în alte forme de bază.
ellipse() este una dintre ele și are nevoie de două raze, x și y.
Decupare elipsă
Razele pentru decuparea eliptică a acestei imagini sunt 50% pentru x și 35% pentru y.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path</title>
<style>
img {
clip-path: ellipse(50% 35%);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Elipsă poziționată la dreapta
Și elipsele își pot muta centrul, folosind o lungime, un procent sau cuvântul cheie left, right, top sau bottom. Dacă îl omiți, înseamnă center.
Cu aceleași raze de 50% pe x și 35% pe y, elipsa acestei imagini este centrată la dreapta.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path Positioned</title>
<style>
img {
clip-path: ellipse(50% 35% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside și ellipse()
Textul se poate așeza și în jurul unei forme eliptice, dacă îi dai lui shape-outside o valoare ellipse().
Exemplu
Decuparea acestei imagini este o elipsă cu raza x de 40% și raza y de 50%. shape-outside folosește una puțin mai mare, cu 45% pe x și 50% pe y, iar textul se așază în jurul acestei forme eliptice.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Shape Outside</title>
<style>
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
</style>
</head>
<body>
<h2>Ellipse with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit.</p>
</body>
</html>
Funcția CSS polygon()
O formă poligonală se descrie cu polygon().
Argumentele sale sunt o listă de puncte, fiecare fiind o pereche de coordonate x și y date ca lungimi sau procente. Colțul din stânga sus este 0 0, iar colțul din dreapta jos este 100% 100%.
Două proprietăți acceptă această funcție: clip-path și shape-outside.
Exemplu
Poligonul folosit pentru a decupa această imagine formează un romb.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polygon Clip Path</title>
<style>
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Polygon</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Proprietăți și funcții CSS
O recapitulare a ceea ce a folosit acest capitol, atât proprietăți, cât și funcții:
clip-path- decupează un element într-o formă de bază sau după o sursă SVG.shape-outside- îi dă conținutului inline care se așază în jur o formă de urmat.circle()- un cerc, definit prin rază și poziție.ellipse()- o elipsă, definită prin razele x și y.polygon()- un poligon.