Share
Con l'arrivo di schermi ad altissima definizione (pensa Retina) sono sorte nuove sfide di design; abbiamo bisogno di trovare modi per accogliere tutti i dispositivi. Prendi ad esempio la visualizzazione delle icone. Potremmo appoggiarci a offrire immagini al 200% o usare SVG, ma è anche possibile creare una quantità sorprendente di grafica con il solo CSS. Costruiamo un'icona elaborata con un solo elemento HTML.
Il problema principale con i singoli elementi risiede nel fatto che siamo limitati al numero di "elementi costitutivi" che possiamo usare. Fortunatamente, ci sono alcuni trucchi:
Gli pseudo elementi (noti anche come contenuti generati) non esistono nel markup del documento stesso (il DOM) ma sono creati dal CSS. Ti offrono la possibilità di aggiungere al tuo elemento predefinito altri due che possono (più o meno) usare le stesse proprietà.
Ad esempio, prendi questo codice:
Quindi applica le seguenti regole di stile:
.square position: relativo; sfondo: blu; larghezza: 50 px; altezza: 50 px; .square :: before position: absolute; a sinistra: -50px; contenuto: "; altezza: 50px; larghezza: 50px; display: block; background: green; .quadrato :: after position: absolute; left: 50px; content:"; altezza: 50 px; larghezza: 50 px; blocco di visualizzazione; sfondo: rosso;
Ai fini di questo esercizio utilizzeremo i valori dei pixel, sebbene sia spesso consigliabile utilizzare unità di misura flessibili come gli ems.
Nota: Il doppio colon (::), al contrario di un singolo due punti, è la sintassi CSS3. Differenzia lo pseudo elementi da pseudo selettori, ad esempio : hover.
Abbiamo dato a noi due altri elementi costitutivi, ma vale la pena notare che alcune proprietà CSS3 non funzioneranno con i contenuti generati:
Un'altra cosa da sapere è che il contenuto generato verrà visualizzato in cima all'elemento predefinito, a meno che non lo sia z-index: -1. I browser li interpretano come se si trovassero entro l'elemento predefinito. Se dovessimo rappresentare gli pseudo elementi con un markup effettivo, il codice sarebbe il seguente:
.square background: blue; larghezza: 50 px; altezza: 50 px; posizione: relativa; .square .before left: -50px; posizione: assoluta; contenuto: "; height: 50px; width: 50px; display: block; background: green; .qualcosa .after content:"; altezza: 50 px; larghezza: 50 px; sfondo: rosso; posizione: assoluta; a sinistra: 50 px;
Se solo gli pseudo elementi non ti forniscono abbastanza "blocchi" per costruire la tua icona, puoi usare anche le ombre delle caselle. Questa tecnica ti consentirà di creare il maggior numero di "cloni" che desideri. Diamo un'occhiata a un esempio con un cerchio:
.circle position: relative; sfondo: blu; larghezza: 50 px; altezza: 50 px; border-radius: 50%; box-shadow: -110px 0 0 -20px viola, -60px 0 0 -10px rosso, 80px 0 0 10px verde, 180px 0 0 20px arancione;
Come puoi vedere, le ombre del riquadro ti consentono di ridurre o aumentare la dimensione della tua forma iniziale e posizionarla dove vuoi.
I dettagli della proprietà box-shadow: 80px 5px 1px 10px verde può essere suddiviso come segue:
Nota: La prima ombra definita apparirà sempre sopra le ombre successive.
Il inserire il valore consente anche varie possibilità:
.palla posizione: relativa; sfondo: blu; larghezza: 50 px; altezza: 50 px; raggio-limite: 50%; box-shadow: inset 20px 0 0 -10px giallo, inset -20px 0 0 -10px rosso;
Per quelli di voi interessati a Internet Explorer, vale la pena notare che i gradienti CSS sono compatibili solo con IE10. Per gli altri browser, ricorda i prefissi dei fornitori appropriati.
Come le ombre, i gradienti possono essere combinati e posizionati indipendentemente. Usare i gradienti per creare forme è un po 'più complicato delle proprietà precedenti, quindi concentriamoci su un esempio "semplice".
In questo esempio creeremo quattro cerchi diversi usando gradienti radiali e li distribuiremo all'interno dell'elemento genitore.
.background background: radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 10%, transparent 10%, transparent 100%), radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 30%, trasparente 32%, trasparente 100%), gradiente radiale (centro, ellisse, rgba (0, 0, 0, 1) 50%, trasparente 52%, trasparente 100%), gradiente radiale (centro, ellisse, rgba (0, 0, 0, 1) 60%, trasparente 62%, trasparente 100%); colore di sfondo: rosso; background-repeat: no-repeat; background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px; dimensione di sfondo: 50px 50px; larghezza: 100 px; altezza: 100 px; posizione: relativa;
Per capire questa demo devi immaginare una griglia sull'elemento. Ogni cella della griglia sarebbe un gradiente diverso. In questo caso le celle sono 50px per 50px (dimensione di sfondo: 50px 50px;). Li ho deliberatamente diffusi all'interno dell'elemento ma sono consapevole che possono anche essere sovrapposti. Ogni cella può essere posizionata su un asse xey separato, con origine nell'angolo in alto a sinistra dell'elemento base (background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).
La proprietà Gradient in dettaglio: background: radial-gradient (center, ellipse cover, rgba (0, 0, 0, 1)
Per aiutare con la creazione di gradienti CSS, è possibile utilizzare un generatore come l'editor dei gradienti di Collorzilla.
Ora che abbiamo visto come creare un massimo di blocchi da un singolo div, facciamo pratica!
Ecco cosa creeremo usando solo un div (bonus alla fine!):
Ecco la singola riga HTML di questo tutorial:
Per consentire alla nostra icona di essere facilmente ridimensionabile useremo unità di misura flessibili; em e%. Grazie a questo potrai ridimensionare come desideri, semplicemente modificando la dimensione del font sull'elemento. Lo sviluppo in Chrome, ti permetterò di modificare i prefissi dei fornitori in base al tuo browser.
Inizieremo dando forma e colore al corpo della nostra coccinella:
.coccinella posizione: relativa; font-size: 60px; larghezza: 1.8em; altezza: 2em; raggio-limite: 50%; background-color: # E11;
Ora applichiamo i punti sul corpo usando la proprietà gradiente radiale.
.coccinella posizione: relativa; font-size: 60px; larghezza: 1.8em; altezza: 2em; raggio-limite: 50%; background: -webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 30%, transparent 33%, transparent 100%), - webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 50%, trasparente 55%, trasparente 100%), - webkit-radial-gradient (centro, ellisse, rgba (0, 0, 0, 1) 50%, trasparente 55%, trasparente 100%) , -webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (center, ellipse, rgba (0, 0 , 0, 1) 40%, trasparente 43%, trasparente 100%), - webkit-radial-gradient (centro, ellisse, rgba (0, 0, 0, 1) 45%, trasparente 50%, trasparente 100%), -webkit-gradiente radiale (centro, ellisse, rgba (0, 0, 0, 1) 45%, trasparente 50%, trasparente 100%); background-color: # E11; background-repeat: no-repeat; posizione di fondo: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; dimensione dello sfondo: 0.5em 0.5em;
Lavoro eccellente - abbiamo finito con il corpo per il momento.
Questa parte è la più veloce. Disegneremo un semicerchio nero e lo posizioneremo sopra il corpo. Per questo useremo lo pseudo elemento ::prima.
.coccinella :: prima contenuto: "; posizione: assoluta; display: blocco; altezza: 0.5em; larghezza: 1.2em; top: -0.24em; background: black; left: 0.3em; border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
Qui creeremo occhi usando l'elemento pseudo ::dopo e la proprietà shadow della casella. Iniziamo creando il nostro cerchio di base (la pupilla), quindi "cloneremo" questo elemento per creare il bianco dell'occhio, il contorno e l'altro occhio.
.coccinella :: dopo contenuto: "; posizione: assoluta; display: blocco; altezza: 0.1em; larghezza: 0.1em; background: nero; top: -0.1em; left: 0.5em; border-radius: 50%; box -ombra: 0 0 0 0.1em bianco, 0em 0 0 0.13em nero, 0.7em 0 0 0 nero, 0.7em 0 0 0.1em bianco, 0.7em 0 0 0.13em nero;
Devi pensare "abbiamo un elemento residuo". Non preoccuparti, riutilizzeremo la stessa ombra della scatola usata per gli occhi.
.coccinella :: dopo contenuto: "; posizione: assoluta; display: blocco; altezza: 0.1em; larghezza: 0.1em; background: nero; top: -0.1em; left: 0.5em; border-radius: 50%; box -sabbia: 0 0 0 0.1em bianco, 0em 0 0 0.13em nero, 0.7em 0 0 0 nero, 0.7em 0 0 0.1em bianco, 0.7em 0 0 0.13em nero, 1.2em 0.5em 0 0.02em nero, 1.35 em 1.1em 0 0.02em nero, 1.2em 1.65em 0 0.02em nero, -0.5em 0.5em 0 0.02em nero, -0.65em 1.1em 0 0.02em nero, -0.5em 1.65em 0 0.02em nero;
La nostra icona coccinella è finalmente finita!
In realtà non siamo proprio finiti. Ti ho promesso un bonus ed eccolo qui. L'animazione è un vantaggio che il CSS ha su SVG; animiamo la nostra coccinella al passaggio del mouse. Ecco il codice CSS bonus:
@ -webkit-keyframes ladybug 0% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% background-position: 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em; 100% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: ladybug 1s;
Iniziamo definendo alcuni fotogrammi chiave che chiamiamo coccinella. Quindi attiviamo quei fotogrammi chiave in azione sullo stato al passaggio del mouse della nostra icona. I fotogrammi chiave alterano la posizione di fondo delle macchie della nostra coccinella
Infine, ecco il codice CSS completo:
.coccinella posizione: relativa; font-size: 60px; larghezza: 1.8em; altezza: 2em; raggio-limite: 50%; background: -webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 30%, transparent 33%, transparent 100%), - webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 50%, trasparente 55%, trasparente 100%), - webkit-radial-gradient (centro, ellisse, rgba (0, 0, 0, 1) 50%, trasparente 55%, trasparente 100%) , -webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (center, ellipse, rgba (0, 0 , 0, 1) 40%, trasparente 43%, trasparente 100%), - webkit-radial-gradient (centro, ellisse, rgba (0, 0, 0, 1) 45%, trasparente 50%, trasparente 100%), -webkit-gradiente radiale (centro, ellisse, rgba (0, 0, 0, 1) 45%, trasparente 50%, trasparente 100%); background-color: # E11; background-repeat: no-repeat; posizione di fondo: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; dimensione dello sfondo: 0.5em 0.5em; .ladybug: before content: "; position: absolute; display: block; height: 0.5em; width: 1.2em; top: -0.24em; background: black; left: 0.3em; border-radius: 50% 50 % 0% 0% / 100% 100% 0 0; .ladybug :: after content: "; posizione: assoluta; blocco di visualizzazione; altezza: 0.1em; larghezza: 0.1em; sfondo: nero; inizio: -0.1em; a sinistra: 0,5em; raggio-limite: 50%; box-shadow: 0 0 0 0.1em bianco, 0em 0 0 0.13em nero, 0.7em 0 0 0 nero, 0.7em 0 0 0.1em bianco, 0.7em 0 0 0.13em nero, 1.2em 0.5em 0 0.02em nero, 1.35em 1.1em 0 0.02em nero, 1.2em 1.65em 0 0.02em nero, -0.5em 0.5em 0 0.02em nero, -0.65em 1.1em 0 0.02em nero, -0.5em 1.65em 0 0.02em nero; @ -webkit-keyframes ladybug 0% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% background-position: 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em, 0.66em 0.8em; 100% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: ladybug 1s;
Attraverso questo tutorial spero di averti mostrato le potenzialità del CSS e cosa è possibile con un singolo elemento HTML. È sempre consigliabile considerare il supporto del browser per le proprietà CSS discusse in questo tutorial, assicurandosi che si degradino con garbo.
Se desideri vedere altre icone create con un singolo elemento ti invito a visitare il mio sito one-div.com. Grazie per aver letto!
Accentsconagua