CSS clip-path

Mattepuffo's logo
CSS clip-path

CSS clip-path

Programmazione, HTML - CSS

La proprietà clip-path di CSS 3 ci permette di "clippare" parti di una pagina senza ricorrere ad immagini create ad-hoc o ad altri tecnicismi.

Ad oggi (20 giugno 2016) non è compatibile con Firefox, ma potete testarlo su Chrome e Safari.

Qui vi propongo due esempi:

  • in uno clippiamo una immagine creando un rombo
  • nell'altro tagliamo una parte del titolo

Questa è la sintassi di base:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

In verità bisogna usare prefissi per i browser.

Quindi prendendo il nostro esempio:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Clip Path</title>
        <style>
            h1 {
                background: cornflowerblue;
                -webkit-clip-path: polygon(0 0, 70% 0%, 60% 100%, 0% 100%);
                clip-path: polygon(0 0, 70% 0%, 60% 100%, 0% 100%);
            }

            img {
                -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            }
        </style>
    </head>
    <body>
        <h1>Test per CLIP-PATH --> No Firefox</h1>
        <hr>
        <img src="immagine.jpg" alt="Test">
    </body>
</html>

Ci sono ovviamente vari tipi di shape da usare.

Potete gurdare qua per una documentazione completa: CSS Shapes.

Ovviamente le potenzialità sono tantissime, questo è un banale esempio introduttivo.

Enjoy!

Condividi

Commentami!