CSS3 Cookbook 7 Super Easy CSS Ricette per copiare e incollare

Ormai probabilmente hai visto abbastanza tutorial CSS3 per durare una vita. Probabilmente stai iniziando a familiarizzare con ciò che i CSS3 hanno da offrire e sei pronto a superare la teoria di base e vedere alcuni esempi pratici di progettazione che puoi copiare e incollare direttamente nel tuo codice senza sfiorare tonnellate di commenti.

Bene, sei fortunato perché è esattamente quello che abbiamo per te oggi! Di seguito troverai sette divertenti e accattivanti trucchi CSS che puoi afferrare e inserire direttamente nei tuoi progetti e personalizzare a piacere. Tieni presente che dal momento che questa roba è ancora all'avanguardia, i browser meno recenti non ne supportano la maggior parte. Ho cercato di garantire un degrado gradevole laddove possibile, in modo che tu possa offrire un'esperienza di lavoro a tutti gli utenti e un'esperienza migliore a chi utilizza il webkit.

letterpress

L'inserimento del testo è abbastanza semplice nei CSS. Per realizzarlo avrai bisogno di tre colori: un colore di sfondo, una tonalità più chiara del colore di sfondo e una tonalità più scura del colore di sfondo.

Per iniziare, riempi il tuo testo con la tonalità più scura del tuo colore di sfondo. Quindi applica semplicemente un'ombra di testo CSS3 che è più chiara e ha l'effetto di creare un aspetto in rilievo.

L'HTML

<p>pressato</p>

Il CSS

body {background: # 222222; colore: # 131313; dimensione del font: 200px; } #container p {text-align: center; text-transform: maiuscolo; text-shadow: # 2c2c2c 3px 3px 5px; }

Maiuscoletto

L'effetto di maiuscoletto è quando tutte le lettere di un titolo sono maiuscole, ma le lettere iniziali di ogni parola sono più grandi delle altre. È un effetto piacevole e semplice che non si vede spesso sul Web (non proprio CSS3 ma comunque interessante!).

Un modo semplice per farlo è semplicemente inserire?piccolo? tag nel tuo codice HTML e poi per modellare quei tag con una dimensione del carattere leggermente più piccola rispetto al resto del titolo. Alcuni commentatori mi hanno detto che esiste un modo più semplice per farlo! Basta usare? Font-variant: small-cap ;? e sei a posto!

Ho anche usato il? Maiuscolo? text-transform solo per divertimento. Questo prenderà automaticamente il testo in minuscolo e lo trasformerà, rendendo facile tornare indietro e modificare il tuo HTML mantenendo lo stesso aspetto, anche se non ricordi di digitare maiuscole.

L'HTML

<p>Maiuscoletto</p>

Il CSS

body {background: # 2c2b2b; colore: # 131313; dimensione del font: 200px; } #container p {text-align: center; text-transform: maiuscolo; text-shadow: # 363535 3px 3px 5px; font-variant: small-cap; }

Coupon CSS

Questo è utile per i rivenditori online che desiderano offrire promozioni, vendite, coupon online, ecc. Il trattamento di confine tipico che vedi nella maggior parte dei siti Web è solo una linea continua, ma puoi in alternativa linee tratteggiate o punteggiate di Apple su un bordo.

Combina questo con alcuni angoli arrotondati CSS3 e un box-shadow e ti sei procurato una bella grafica coupon CSS!

L'HTML

<h2>$ 10 Off</h2>

Il CSS

body {background: # 21303b; colore: # 000; } h2 {font-size: 80px; altezza della linea: 70 px; font-family: Helvetica, sans-serif; font-weight: bold; allineamento del testo: centro; text-transform: maiuscolo; } #container {background-color: white; altezza: 200 px; larghezza: 400 px; margine: 100px auto; border: 3px dashed # 21303b; / * shadow * / -webkit-box-shadow: 10px 10px 10px # 000; -moz-box-shadow: 10px 10px 10px # 000; box-shadow: 10px 10px 10px # 000; / * angoli arrotondati * / -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

cucita

Mentre siamo in tema di trattamenti di confine tratteggiati, ecco un trucco alternativo che puoi usare per dare a una scatola un'illusione sottile cucita.

Questa volta invece di un confine usiamo un contorno. Una struttura può essere facilmente inserita utilizzando un valore negativo sul comando offset struttura.

L'HTML

<h2>cucita</h2>

Il CSS

body {background: # 21303b; colore: #fff; } h2 {font-size: 70px; altezza della linea: 190 px; font-family: Helvetica, sans-serif; font-weight: bold; allineamento del testo: centro; } #container {/ * stitching * / outline: 1px dashed # 98abb9; outline-offset: -5px; background-color: # 556068; altezza: 200 px; larghezza: 400 px; margine: 100px auto; / * shadow * / -webkit-box-shadow: 2px 2px 2px # 000; -moz-box-shadow: 2px 2px 2px # 000; box-shadow: 2px 2px 2px # 000; }

gloss

Questo effetto web 2.0 popolare e forse abusato richiedeva almeno l'estrazione di un'immagine. Ora, usando CSS3 e un piccolo gradiente di sfondo, sappiamo come è possibile ricreare lo splendore usando solo il codice.

I gradienti CSS complessi possono essere difficili da costruire, quindi consiglio di utilizzare il Generatore di gradienti CSS avanzato o qualcosa di simile per automatizzare il processo.

L'HTML

<h2>gloss</h2>

Il CSS

body {background: # 21303b; colore: #fff; } h2 {font-size: 120px; altezza della linea: 190 px; font-family: Helvetica, sans-serif; font-weight: bold; allineamento del testo: centro; text-shadow: rgba (0, 0, 0, .3) 5px 5px 5px; } #container {/ * gradient * / background: # 666666; / * vecchi browser * / background: -moz-linear-gradient (in alto, # 666666 4%, # 545454 50%, # 3A3A3A 51%, # 131313 100%); / * firefox * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (4%, # 666666), color-stop (50%, # 545454), color-stop (51%, # 3A3A3A), color-stop (100%, # 131313)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 666666", endColorstr = "# 131313", GradientType = 0); / * es. * / / * stili casella * / altezza: 200px; larghezza: 400 px; margine: 100px auto; / * shadow * / -webkit-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); -moz-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); / * corners * / -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }

Testo barrato & @ carattere-faccia

In questo esempio ottieni due trucchi in uno! Vedrai la sintassi per l'aggiunta di tratti di testo nel webkit oltre a quella per l'aggiunta di caratteri personalizzati in tutti i browser moderni usando @ font-face.

Il font che ho usato nell'esempio qui sotto è chiamato Jungle Fever e può essere scaricato come un font @ font-face da Font Squirrel.

L'HTML

<h2>giurassico</h2>

Il CSS

/ * Caratteri * / @ font-face {font-family: 'JungleFeverRegular'; src: url ('JungleFever-webfont.eot'); src: local ('?'), url ('JungleFever-webfont.woff') formato ('woff'), url ('JungleFever-webfont.ttf') formato ('truetype'), url ('JungleFever-webfont. formato svg # webfontBlD2f3Gz ') (' svg '); font-weight: normal; stile font: normale; } body {background: # 222; colore: # 111; } h2 {font-size: 150px; altezza della linea: 200 px; font-family: 'JungleFeverRegular', Helvetica, sans-serif; font-weight: bold; allineamento del testo: centro; text-shadow: rgba (0, 0, 0, .2) 3px 3px 3px; / * tratto di testo * / -webkit-tratto di testo: 2px # fff473; }

Testo a tratti doppio

Ho scoperto questo tip completamente per caso mentre creavo un testo tratteggiato per l'esempio precedente. Si scopre che se si utilizza RGBa sul testo tratteggiato e si riduce un po 'l'opacità, è possibile ottenere un doppio colpo eccezionale! Non sono del tutto sicuro del motivo per cui funziona (qualcosa ha a che fare con il sanguinamento dell'ictus?) Ma lo fa!

L'HTML

<h2>aragosta</h2>

Il CSS

/ * Caratteri * / @ font-face {font-family: 'Lobster13Regular'; src: url ('Lobster_1.3-webfont.eot'); src: local ('?'), url ('Lobster_1.3-webfont.woff') formato ('woff'), url ('Lobster_1.3-webfont.ttf') format ('truetype'), url (' Formato Lobster_1.3-webfont.svg # webfontcOtP3oQb ') (' svg '); font-weight: normal; stile font: normale; } body {background: # 731e1e; colore: #fff; } h2 {font-size: 220px; altezza della linea: 220 px; font-family: 'Lobster13Regular', Helvetica, sans-serif; font-weight: bold; allineamento del testo: centro; text-shadow: rgba (0, 0, 0, .2) 3px 3px 3px; / * tratto di testo * / -webkit-tratto di testo: 4px rgba (0, 0, 0, .6); }

Conclusione

Come ho detto nelle dichiarazioni di apertura, sentiti libero di copiare e utilizzare gli esempi sopra, tuttavia, che desideri. Lascia un commento qui sotto se hai qualche idea per migliorare qualcuno di questi trucchi, sia che li faccia apparire più cool o più cross-browser-friendly. Sono tutt'altro che perfetti e voglio vederti migliorarli!