Share
Oggi, mi piacerebbe mostrarti un trucco pulito. Creeremo un'icona di documento con puro CSS3. Ancora meglio, questo effetto richiede solo un singolo elemento HTML.
Iniziamo!
Inizieremo aggiungendo il nostro singolo elemento HTML: un tag di ancoraggio. Questo ha senso, dal momento che molte icone servono anche da link.
Icona del documento
Impostiamo le dimensioni un po 'arbitrarie per la nostra icona. Faremo 40x56px - semplicemente per questa demo. In un'applicazione del mondo reale, è probabile che tu voglia ridurre questo! Inoltre, tieni presente che dobbiamo aggiungere blocco di visualizzazione, poiché tutti i tag di ancoraggio sono in linea, per impostazione predefinita.
.docIcon background: #eee; sfondo: gradiente lineare (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; blocco di visualizzazione; larghezza: 40px; altezza: 56px; position: relative; margine: 42px auto;
Nota che, sopra, stiamo impostando un contesto di posizionamento per lavorare a breve con gli pseudo elementi. Scoprirai che ho usato solo la sintassi CSS3 ufficiale per il gradiente. Probabilmente vorrai utilizzare anche i vari prefissi del browser. Per velocizzare le cose, puoi usare Prefixr.com o la sua API nel tuo editor di codice preferito. Copia semplicemente lo snippet di codice sopra, incollalo nella textarea di Prefixr e fai clic su Invio. Quindi sputerà tutte le varie proprietà prefissate, in questo modo:
.docIcon background: #eee; background: -webkit-linear-gradient (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -moz-linear-gradient (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -o-linear-gradient (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -ms-linear-gradient (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); sfondo: gradiente lineare (in alto, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; blocco di visualizzazione; larghezza: 40px; altezza: 56 px; posizione: relativa; margine: 42px auto;
Successivamente, aggiungiamo un po 'di lucentezza usando le ombre delle finestre CSS. Ho anche usato il indentatura del testo proprietà per nascondere il testo.
.docIcon ? -webkit-box-shadow: inset rgba (255,255,255,0.8) 0 1px 1px; -moz-box-shadow: inset rgba (255,255,255,0.8) 0 1px 1px; box-shadow: inset rgba (255,255,255,0.8) 0 1px 1px; text-trattino: -9999em;
Successivamente, dobbiamo creare un effetto angolo arrotondato. Aggiungi il seguente:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
Passando quattro valori, possiamo specificare i raggi superiore, destro, inferiore e sinistro, di conseguenza. Questo è simile al modo in cui applicheresti i margini o il riempimento.
Per creare l'illusione di un angolo arricciato, utilizzeremo il contenuto generato o gli elementi pseudo.
Innanzitutto, aggiungi contenuto :prima la nostra icona. In questo caso, non è richiesto alcun testo specifico. Invece, dobbiamo creare una casella da 15px e applicare un gradiente di sfondo.
.docIcon: before content: ""; blocco di visualizzazione; posizione: assoluta; inizio: 0; a destra: 0; larghezza: 15px; altezza: 15px; sfondo: #ccc; background: -webkit-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); background: -moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); background: -o-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); background: -ms-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); background: linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, inserto bianco 0 0 1px; -moz-box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, inserto bianco 0 0 1px; box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, inserto bianco 0 0 1px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;
Affinché il nostro contenuto generato possa ricevere anche il bordo arrotondato in alto a destra, dobbiamo, ancora una volta, applicare gli stessi raggi per allinearlo.
? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; border-radius: 3px 15px 3px 3px;
Successivamente, useremo il :dopo elemento psuedo per aggiungere alcune linee tratteggiate per rappresentare il testo ingrandito. Applicare una larghezza del 60% e a margin-left e margin-right del 20% (che equivale al 100%). Successivamente, specifichiamo un'altezza e la posizioniamo a 0 0.
.docIcon: after content: ""; blocco di visualizzazione; position: absolute; a sinistra: 0; top: 0; width: 60%; margine: 22 px 20% 0; altezza: 15px;
Creare un set di linee è un po 'complicato. Se siamo intelligenti, però, possiamo usare i gradienti CSS per ottenere questo effetto. Innanzitutto, dividi l'altezza totale per cinque e imposta ciascun blocco con un riempimento solido. Fare riferimento all'immagine sotto per una esemplificazione più chiara di questo modo di pensare. Nifty, ay? È una buona tecnica avere nel tuo cinturone.
.docIcon: after ? sfondo: #ccc; background: -webkit-linear-gradient (in alto, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -moz-linear-gradient (in alto, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -o-linear-gradient (in alto, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -ms-linear-gradient (in alto, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); sfondo: gradiente lineare (superiore, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Dimostrazione dal vivo Ti è piaciuto il post? Hai altri trucchi simili? In tal caso, collegali a loro nei commenti qui sotto.
Accentsconagua