Come creare una forma a cuore con i CSS
CSS3 eleva la fattibilità di ciò che possiamo costruire sui siti web usando solo HTML e CSS. Puoi trovare esempi sorprendenti che abbiamo precedentemente descritto. Ma non esageriamo troppo, un design complicato avrà bisogno di codici che potrebbero darti mal di testa.
Invece, creeremo qualcosa di semplice per aiutarti capire prima le forme e il posizionamento con i CSS, prima di avventurarsi in progetti più avanzati. Dal momento che il giorno di San Valentino è dietro l'angolo, creiamo una forma a cuore usando HTML e CSS.
Le basi
Fondamentalmente, possiamo creare una nuova forma unendo una o più forme base, come rettangoli e cerchi. Se esaminiamo una forma di cuore possiamo scoprire che è composta da due cerchi e un rettangolo combinati. Gli elementi HTML sono essenzialmente un quadrato o un rettangolo. Grazie al raggio del bordo CSS3 possiamo trasformare facilmente un rettangolo in un cerchio.
Inizia aggiungendo a Quindi, facciamo un quadrato specificando la larghezza e l'altezza allo stesso modo. Scegli un colore di sfondo che ti piace. Quindi, faremo i cerchi. Piuttosto che aggiungere nuovi elementi, faremo uso degli pseudo-elementi, Insieme al quadrato avremo un risultato come questo: Successivamente, creiamo il secondo cerchio con lo pseudo-elemento I risultati sono i seguenti: Possiamo combinare questi due stessi stili raggruppando i selettori di pseudo-elementi come segue: Ta-da! Abbiamo una forma a cuore, anche se non è ancora nella giusta direzione. Per raddrizzarlo, utilizzeremo la trasformazione CSS3. La trasformazione può essere data ai principali elementi della forma; qui, ciò significa il quadrato. Una volta trasformato, lo pseudo-elemento cambierà automaticamente la sua posizione seguendo l'elemento principale. Qui ruoteremo il cuore così è visto “in piedi”. E questo è come appare ora il nostro cuore. Il codice completo della forma del cuore sopra è il seguente, in HTML: E sul nostro CSS, sarà così: Si noti che ora impostiamo il canale alfa di Ora che abbiamo una perfetta forma del cuore, possiamo sostituire lo sfondo con un altro colore (ad esempio rosa o rosso) con facilità. L'unico svantaggio qui è che noi non è possibile aggiungere un bordo alla forma grazie agli elementi impilati. L'aggiunta di una linea di confine renderà il cuore strano. Con CSS3 creare una forma simile a una forma di cuore è ora facilmente realizzabile. La proprietà border-radius ci consente di crea elementi o anche uno pseudo-elemento in un cerchio. Con la trasformazione CSS3, possiamo ruotare o spostare le coordinate dell'oggetto facilmente. Sei limitato solo dalla tua creatività e immaginazione!
.a forma di cuore posizione: relativa; larghezza: 200 px; altezza: 200 px; colore di sfondo: rgba (250,184,66, 0,8);
:prima e :dopo. Per prima cosa impostiamo il :prima pseudo-elementi come il nostro primo cerchio. Lo facciamo un quadrato con le stesse dimensioni sulla larghezza e l'altezza proprio come abbiamo fatto con il div. Lo trasformiamo quindi in un cerchio dandogli un raggio di bordo del 50% e posizionandolo sul lato sinistro del quadrato. .a forma di cuore: prima posizione: assoluta; fondo: 0px; left: -100px; larghezza: 200 px; altezza: 200 px; contenuto: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0.8);
:dopo con gli stessi stili del primo cerchio che abbiamo creato. Poi, lo posizioniamo anche in cima al quadrato. .a forma di cuore: dopo posizione: assoluta; inizio: -100px; a destra: 0px; larghezza: 200 px; altezza: 200 px; contenuto: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0.8);
.a forma di cuore: prima, .heart-shape: after position: absolute; larghezza: 200 px; altezza: 200 px; contenuto: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0.8); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
.heart-shape -webkit-transform: ruotare (45 gradi); -moz-transform: ruotare (45 gradi); -ms-transform: ruota (45 gradi); -o-trasforma: ruota (45 gradi); transform: ruotare (45 gradi);
Il risultato:
.a forma di cuore posizione: relativa; larghezza: 200 px; altezza: 200 px; -webkit-transform: ruota (45 gradi); -moz-transform: ruotare (45 gradi); -ms-transform: ruota (45 gradi); -o-trasforma: ruota (45 gradi); transform: ruotare (45 gradi); colore di sfondo: rgba (250,184,66, 1); .heart-shape: before, .heart-shape: after position: absolute; larghezza: 200 px; altezza: 200 px; contenuto: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 1); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
rgba (250,184,66, 1) sullo sfondo di 1 rimuovere la trasparenza. Ora questo è ciò che il nostro cuore sembra.
Conclusione
