50 Snippets CSS che ogni designer dovrebbe avere a portata di mano

Quando si parla di impostazioni di siti web, una componente molto importante da considerare sono i CSS, noti anche come fogli di stile o stylesheet. Il CSS non è altro che un insieme di istruzioni, scritte in codice, che spiega al nostro sito come comportarsi quando viene visualizzato.

Qui di seguito, 50 snippet utili per i web designer e non solo.

1. CSS RESETS

I reset CSS permettono di eliminare elementi superflui impostati dai diversi browser e, di conseguenza, evitare le discrepanze di visualizzazione. Gli snippet CSS reset sono facilissimi e tra i più diffusi da trovare online. Questo, ad esempio,  si rifa al modello proposto da Eric Meyer.

2. Classic CSS Clearfix

Con questo snippet, i contenuti che inizialmente ‘galleggiano’ (in inglese: float) a metà pagina verranno automaticamente collocati in fondo.

3. 2011 Updated Clearfix

Questo snippet svolge le stesse funzioni del precedente, con la differenza che funziona anche sulle versioni di Internet Explorer 6-8

4. Cross-Browser Transparency (trasparenze compatibili)

Questo snippet CSS3 è supportato esclusivamente dalle versioni più recenti dei browser. Vi sarà utile per impostare le trasparenze sia che usiate Internet Explorer, Firefox o Opera.
Demo codice

5. CSS Blockquote Template
 (stile CSS per le citazioni)

Con questo frammento di codice si può impostare velocemente lo stile delle citazioni (quote), se le utilizzate nei vostri blog, per farle risaltare all’interno di un post.
Demo codice

6. Individual Rounded Corners (angoli arrotondati)

Inserendo questo elemento potete smussare gli angoli di un box, ma non solo: inserendo il valore del radius potete anche determinare quanto smussare ogni estremità.
Demo codice

7. General Media Queries

Mettendo mano a questo snippet, si può stabilire la risoluzione e le dimensioni degli elementi a seconda del dispositivo col quale si visualizza la pagina. In questo modo, il sito apparirà diverso se state utilizzando il tablet al posto del notebook.
Questo codice è importantissimo, perché è alla base della tecnica responsive.

8. Modern Font Stacks (famiglie di font compatibili per il web)

Serve per indicare le famiglie di font, che permettono di conferire un look coerente a tutti i contenuti scritti. Una volta impostate le famiglie di font, la pagina verrà mostrata col font più simile all’originale.
Per aiutarti a scegliere il miglior font, consiglio di visitare questo sito http://cssfontstack.com dove per ogni famiglia di font troverai anche la compatibilità in ambiente Win e Mac.

9. Custom Text Selection

Di default, gli highlight (cioè quando si seleziona il testo) delle pagine web sono di colore blu elettrico. In questo modo, invece, potete indicare il colore esatto che volete, in modo che si intoni interamente all’intero template, usando il codice esadecimale.
Demo codice

10. Hiding H1 Text for Logo 
(nascondere il logo dietro un H1)

Mettendo il logo del vostro sito come H1, potete rendere invisibile la parte di testo che viene comunque recepito dai motori di ricerca, ma è rimpiazzato automaticamente dal logo nelle pagine. Questa tecnica è un modo indiretto per provare ad aumentare le visite.
Demo codice

11. Bordi Polaroid (immagini con effetto polaroid)

Questo snippet vi permetterà di trasformare qualsiasi immagine del vostro sito in stile Polaroid.
Demo codice

12. Anchor Link Pseudo Classes (pseudo classi)

Imposta il comportamento dei link a seconda delle azioni. Per esempio: il colore di un link non ancora cliccato sarà diverso dal colore di un altro link che, invece, abbiamo già guardato.
Demo codice

13. Fancy CSS3 Pull-Quotes (stile CSS3 per le citazioni)

In questo caso non solo si possono modificare le citazioni (quotes) ma si può stabilire anche la posizione, il font, la dimensione del carattere e tutto ciò che occorre per diversificarle dal resto del testo. Questo snippet è applicabile solo su CSS3, quindi attenzione ad usarlo nei vecchi browser.

14. Fullscreen Backgrounds with CSS3 (immagini di fondo a schermo intero)

Anche questo codice è solo per CSS3, viene usato per impostare o meno uno sfondo fisso.
Demo codice

15. Vertically Centered Content (contenuto verticale centrato)

Impagina tutti i contenuti centrandoli in senso verticale.

16. Force Vertical Scrollbars
 (barra di scorrimento sempre visibile)

Consente di rendere sempre visibile la barra di scorrimento verticale.

17. CSS3 Gradients Template (sfumanture CSS3)

Si può scegliere il gradiente e decidere tutte le tonalità che occorreranno per la sfumatura. A tal proposito voglio segnalarti quesot servizio online che sono sicuro, ti aiuterà tantissimo nella creazione delle sfumature http://www.colorzilla.com/gradient-editor/. Attenzione però perché anche questa opzione è supportata solo da CSS3, quindi non compatibile sui vecchi browser.
Demo codice

18. @font-face Template
 (famiglie di font personalizzate)

Vi garantisce di poter usare font personalizzati, che saranno caricati sul vostro template. Dopodiché, possiamo impostare una famiglia di font che si avvicinerà al carattere impiegato.

Oggi è possibile scegliere tra centinaia di fonts grazie anche a servizi online offerti gratuitamente da Google e Adobe, oppure generare la tua famiglia di fonts personalizzata tramite questo tool di FontsSquirrell.


19. Stitched CSS3 Elements (impaginazione)

Utile per creare un bordo cucitto attorno al testo.
Demo codice

20. CSS3 Zebra Stripes (colore righe alternate)

Sempre per CSS3, alterna righe di due colori diversi.
Demo codice

21. Fancy Ampersand

Garantisce la sicurezza che i caratteri  usati siano esclusivamente appartenenti a famiglie di font eleganti e classiche, per conferire uno stile raffinato al sito.
Demo codice

22. Drop-Cap Paragraphs
 (capo lettera)

È uno snippet che riproduce il capolettera, ovvero il carattere maiuscolo della prima parola che caratterizza gli articoli scritti su carta stampata.
Demo codice

23. Inner CSS3 Box Shadow
 (ombra interna CSS3)

Disegna un’ombra all’interno di un elemento.
Demo codice

24. Outer CSS3 Box Shadow
 (ombra esterna CSS3)

Fa la stessa cosa dello snippet precedente, con la differenza che l’ombra è all’esterno di un elemento.
Demo codice

25. Triangular List Bullets 
(elenco puntato a triangoli)

Grazie a questo accorgimento, possiamo ottenere un elenco puntato a triangolini.
Demo codice

26. Centered Layout Fixed Width (centrare box)

Serve per ottenere un layout centrato, per fare ciò bisogna impostare un valore fisso utile alla centratura.
Demo codice

27. CSS3 Column Text
 (colonne paragrafi CSS3)

Definisce il numero di colonne ed altre impostazioni, come l’allineamento del testo e lo spazio tra una colonna e l’altra.
Demo codice

28. CSS Fixed Footer

Consente l’inserimento di un Footer, ovvero quell’area in fondo alla pagina dove spesso ci sono informazioni utili tipo il copyright ed i recapiti, fisso in basso.
Demo codice

29. Transparent PNG Fix for IE6
(PNG trasparenti su IE6)

Talvolta, nei nostri siti, usiamo delle immagini png dai contorni trasparenti, per fare in modo che non si crei uno stacco troppo visibile col template. Internet Explorer non riconosce la trasparenza, creando una antiestetica cornice bianca. Grazie a questa fix, si potranno mantenere le trasparenze anche su Explorer.

30. Cross-Browser Minimum Height 
(altezza minima compatibile con tutti i browser)

Alcuni browser non aggiornati hanno problemi con l’altezza minima. Grazie a questo snippet, non avrete più problemi, soprattutto se usate Internet Explorer.
Demo codice

31. CSS3 Glowing Inputs 
(personalizzazione elementi di input)

Personalizza le caselle e gli spazi input, come ad esempio la barra del motore di ricerca interno al sito.
Demo codice

32. Style Links Based on Filetype

Questo snippet permette di personalizzare il link a seconda del file. Infatti il collegamento potrà assumere un colore differente, un’icona o un’immagine di fondo in base all’estensione del file collegato o in base ai vari protocolli (HTTP, FTP, IRC o mailto).
Demo codice

33. Force Code Wraps

I tag <pre> vengono utilizzati per visualizzare grandi blocchi di codice, questo è testo preformattato, solo che spesso appaiono come delle linee lunghe e producono fastidiose barre di scorrimento orizzontali.
Questo blocco di CSS forzerà tutti i tag <pre> ad andare a capo invece di sforare al di fuori del contenitore.
Demo codice

34. Force Hand Cursor over Clickable Items 
(forzare il puntatore del mouse)

Talvolta capita che, in una pagina web, il puntatore non venga visualizzato correttamente. Con questo accorgimento visualizzerete l’icone della manina ed eviterete questo disguido.

35. Webpage Top Box Shadow

Sebbene non sia un elemento di prima necessità, questo snippet disegna un’ombra sul fondo della pagina che si schiarisce e sfuma verso l’alto.

36. CSS3 Speech Bubble

Questo ritaglio di codice provvede all’inserimento di balloon, ovvero le nuvolette dei fumetti – e di inserire del testo all’interno di esse – , nei vostri post. Sono ottimali per riportare discorsi o dar enfasi a una citazione. Supportato esclusivamente da CSS3.
Demo codice

37. Default H1-H5 Headers
 (reset titoli H1-H5)

Si tratta di un reset abbastanza importante che personalizza i titoli (H1) e i vari stili di testo, impostando il colore esatto e le dimensioni dei fonti.

38. Pure CSS Background Noise
(effetto disturbo in CSS)

Posiziona sopra al vostro sfondo un disturbo, ovvero un altro sfondo (generalmente a pallini) che crea l’effetto della televisione non sintonizzata. Potete creare il vostro disturbo personalizzato qui.
Demo codice

39. Continued List Ordering


Consente di creare una lista numerata continuata anche se si hanno due elementi <ul> separati.

40. CSS Tooltip Hovers (CSS effetto tooltip)

Con questo snippet, se si passa il mouse sopra una parola o un elemento, appare un testo personalizzato, come se fosse un post-it o un suggerimento.
Demo codice

41. Dark Grey Rounded Buttons


Inserendo questo codice ed un codice colore esadecimale, i vostri bottoni potranno essere personalizzati in modo da renderli armoniosi col resto del template.
Demo codice

42. Display URLS in a Printed Webpage 
(mostrare il link nella pagina stampabile)

Quando si stampa una pagina del sito, questo snippet fa sì che sulla pagina stampata appaia l’url intero del link accanto allo stesso. È molto utile per i siti di informazione.

43. Disable Mobile Webkit Highlights


Rende più fluida la navigazione sul sito quando si accede da tablet, smartphone o altri dispositivi, per esempio eliminando alcuni elementi grafici di default nella navigazione mobile.

44. CSS3 Polka-Dot Pattern (effetto a pois sul fondo)

Supportato esclusivamente da CSS3, crea un effetto polka dot, ovvero a pois, sullo sfondo della pagina.
Demo codice

45. CSS3 Checkered Pattern (effetto sfondo scacchi e sfumato)

Anch’esso per CSS3, è simile all’elemento precedente con la differenza che, oltre a creare uno sfondo a scacchi, si possono anche decidere i colori e il gradiente da utilizzare.
Demo codice

46. Github Fork Ribbon (Folk me on Github)

Questo ritaglio di codice fa apparire, sul vostro sito, il logo “Fork me on Github” e, utlizzando i transformer, fa sì che l’immagine stia in un angolo senza congestionare la navigazione.  Ideale soprattutto se vi sono elementi open source popolari su Github.
Leggi di più

47. Condensed CSS Font Properties


Questo snippet non è altro che una soluzione molto più corta e rapida per riassumere le proprietà dei font. Solitamente non è molto usato, ma può esservi utile per risparmiare spazio sul vostro stylesheet.
Demo codice

48. Paper Page Curl Effect 
(effetto pagina arrotolata)

Serve per avere, nel vostro template, l’effetto una pagina di carta arrotolata. Qui potete vedere come sarà il risultato finale.
Demo codice

49. Glowing Anchor Links 
(link brillanti)

Posizionando questo codice all’interno del foglio di stile, i link del vostro sito non solo avranno un colore diverso, ma scintilleranno ogni volta che ci passerete il mouse sopra. Non è elegantissimo ma cattura sicuramente l’attenzione ed è indicato per i siti web di creativi.
Demo codice

50. Featured CSS3 Display Banner

Con questo snippets è possibile creare dei ribbon che pendono sul fianco delle immagini, utilissimo ad esempio accanto ai prodotti in un ecommerce, miniature delle immagini, anteprime video o articoli di blog, ecc.
Demo codice

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *