Figure coi CSS

Oggi vediamo le potenzialità dei CSS. Vediamo una collezione di figure in puro CSS. Nessuna immagine è stata usata nella realizzazione di queste figure. Con l'aiuto di pseudo classi, bordi e sfondo possiamo creare complesse figure css sulla base di un solo elemento HTML. Utilizeremo un semplice paragrafo cio e il tag <p class=" la nostra classe"><p>

Con la stessa tecnica sono state realizzate scatola e il disco vinilico nella lezione dedicata ad HTML5 audio.

In quella lezione il disco vinilico è stato realizzato solo coi CSS

 

0.Simbolo del Tao


.d21 {
width: 100px;
height: 50px;
background: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
position: relative;
}
.d21:before, .d21:after{
content: "";
width: 12px;
height: 12px;
position: absolute;
top: 50%;
border-radius: 50%;
}
.d21:before {
left: 0;
background: white;
border: 19px solid black;
}
.d21:after {
left: 50%;
background: black;
border: 19px solid white;
}

1. Cerchio


.d1 {
width: 100px;
height: 100px;
background: #83A7C9;
border-radius: 50%;
}

2.Ovale

.d2 {
width: 200px;
height: 100px;
background: #9CD6C0;
border-radius: 100px/50px;
}

3. Il triangolo rivolto verso l'alto

.d3 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;
}

4. Triangolo con la punta verso il basso

.d4 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #79849B;
}

5. Triangolo con la punta verso sinistra

.d5 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #959FB0;
border-bottom: 50px solid transparent;
}

6. Triangolo con la punta verso destra.

.d6 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #D0D4DC;
border-bottom: 50px solid transparent;
}

7.Triangolo con la punta verso sinistra in alto

.d7 {
width: 0;
height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;
}

8.Triangolo con la punta verso alto a destra

.d8 {
width: 0;
height: 0;
border-top: 100px solid #82C6BE;
border-left: 100px solid transparent;
}

9. Triangolo con la punta verso basso a sinistra

.d9 {
width: 0;
height: 0;
border-bottom: 100px solid #BBE1DE;
border-right: 100px solid transparent;
}

10. Triangolo con la punta verso basso a destra

.d10 {
width: 0;
height: 0;
border-bottom: 100px solid #CDE5E1;
border-left: 100px solid transparent;
}

Figura con i gradiente è qualcosa di meraviglioso!

<style>
.foglia-top-left {
    background-image: linear-gradient(135deg, #ff0000, #000000);
}
.foglia-top-right {
    /*gradienete da #00ff00 a #000000*/
    background-image: linear-gradient(225deg, #00ff00, #000000);
}
.foglia-bottom-right {
    /*gradienete da #ffff00 a #000000*/
    background-image: linear-gradient(315deg, #ffff00, #000000);
}
.foglia-bottom-left {
    /*gradiente da #ff00ff a #000000*/
    background-image: linear-gradient(45deg, #ff00ff, #000000);
}
.foglia-top-left, .foglia-bottom-right {
    border-radius: 0 50%;/*partendo da un retangolo arotondiamo rispetivi angoli di esso*/ 
}
.foglia-top-right, .foglia-bottom-left {
    border-radius: 50% 0;
}
.foglia {
    width: 150px;
    height: 150px;
    margin: 0;
    float: left;
    background-color: #dfdfdf;
}
.fiore {
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}
</style>
<div class="fiore">
            <div class="foglia leaf-top-left"></div>
            <div class="foglia leaf-top-right"></div>
            <div class="foglia leaf-bottom-left"></div>
            <div class="foglia leaf-bottom-right"></div>
        </div>
<div class="clr"></div>/* ho aggiunto un div con la classe clr per creare una linea di separazione dato che la classe .fiore ha la proprieta float:left*/

Letto 490 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso