regole css indispensabili per il tuo design

Il CSS è il secondo linguaggio che impara quando si muovono i primi passi nell’universo del web, con questo tipo di linguaggio si creano delle vere e proprie opere d’arte, grazie anche allo sviluppo del CSS3 che ha dato la possibilità a molti web designer di mettere giù la tavoletta grafica e di utilizzare alcune regole per trasformare i propri elementi, ad esempio con alcune proprietà si possono riciclare delle icone, ad esempio le frecce avanti ed indietro, basterà usarne una e con le proprietà CSS ruotarla di 180°, meraviglioso no? Ma oggi in questo articolo non si parla di riciclaggio di icone ma di regole CSS che devi assolutamente sapere per migliorare e rendere più efficace il tuo design.

Regola css n°1: @media

Il tag media, una volta veniva utilizzato per indicare il foglio di stile o comunque un set di stili per un determinato mezzo di riproduzione, come ad esempio la stampa. Oggi le media queries sono meglio conosciute per stabilire i breakpoint del proprio layout responsive.

Regola CSS n°2: background-size

Una proprietà fantastica introdotta con la terza versione del CSS, permette infatti di scalare l’immagine di sfondo secondo le dimensioni dell’elemento genitore.

Bonus

Per rendere la proprietà background-size più efficiente si può utilizzare il valore cover, come nell’esempio qui di seguito:

Firefox nelle versioni uguali o superiori alla 4 supporta la proprietà background-size senza il prefisso -moz-

Regola CSS n°3: @font-face

Anche @font-face è stato introdotto con CSS3, ha aperto le porte ai font personalizzati sulla pagine web e la nascita di servizi come Google WebFonts e TypeKit.

Regola CSS n°4: margin:0 auto;

Questa regola CSS è vecchia quanto il web, data una larghezza è possibile centrare un elemento rispetto all’elemento padre, è una delle regola basilari del CSS.

Regola CSS n°5: overflow:hidden;

Ci sono modi e modi per pulire i disastri provocati dal flottaggio degli elementi, uno di questi e forse uno dei più efficaci è proprio la regola css overflow:hidden; la quale letteralmente nasconde le “sbavature” dell’elemento sulla quale la regola viene richiamata.

Regole CSS n°6: .clearfix;

Non ho sbagliato a scrivere, infatti clearfix o clear è un set di regole css raggruppate sotto un’unica classe. Viene utilizzato se overflow-hidden dovesse fallire. L’unico svantaggio è che devi inserire questa classe negli elementi interessati, quindi rende tutto un pochino più laborioso.

Regola CSS n°7: color:rgba();

I PNG hanno fatto la storia, grazie alla singola proprietà di supportare il canale alpha, che dona all’immagine la trasparenza. La proprietà color:rgba(); fa la stessa identica cosa, utilizza i 3 canali classici rosso, verde e blu e aggiunge il canale alpha per la trasparenza; basterà quindi sostituire il colore esadecimale con il corrispondente RGB e aggiungere il valore alpha (valori compresi tra 0 e 1).

Regola CSS n°8: input[“type=text”]

La regola input[“type=text”] è un selettore avanzato, utilissimo per evitare nuove classi all’interno del codice ed interagire quindi direttamente su un’elemento.

Regola CSS n°9: transform: rotate(180deg);

Quando all’inizio dell’articolo ho scritto che non ti avrei detto come riciclare le immagini, mentivo. Con la regola css transform è possibile ruotare, scalare, deformare, traslare l’elemento che si desidera, in questo caso nell’esempio ruoto di 180 gradi gli elementi con classe .icon.

Regola CSS n°10: outline:none;

Fastidiosa ed inutile è una proprietà css che va a nozze con lo user-agent di Internet Explorer, sto parlando del riquadro tratteggiato o puntinato che circonda i link, la proprietà outline:none vi aiuterà a levarlo.

Conclusioni

Questo 10 regole sono fondamentali da conoscere, ti permetteranno di migliorare il tuo design e renderlo più piacevole. Tu ne conosci altre che ho tralasciato? Fammelo sapere nei commenti