Image for Codici CSS e CSS3 essenziali per lo sviluppatore web

Codici CSS e CSS3 essenziali per lo sviluppatore web

Ogni buon sviluppatore che ha a che fare con i CSS sa benissimo che è indispensabile avere una buona base da cui partire, in questo caso degli Snippets essenziali che dovrebbero aiutarci durante la fare di sviluppo in un progetto, ed è per questo che oggi vi faccio una carrellata di codici CSS e CSS3 essenziali!

INDICE

CSS Reset

Questo Snippet ci permette di dare a tutti gli elementi che useremo nel nostro sito un adeguamento di default e fare in modo che non vi siano problemi di sorta con i nuovi tag html5 su Internet Explorer.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

Rounded Corners

Questo codice serve per arrotondare i bordi di un determinato tag

Compatibilità:IE 8 (non compatibile)

#tuodiv {
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}

Box Shadow (esterna ed interna)

Se volete dare un effetto carino ai vostri contenitori con delle ombre allora questi sono i codici giusti. Ho inserito anche la proprietà RGBA come valore per il colore, in questo caso il nero assoluto con opacità di 80, ma potete anche utilizzare dei valori standard HEX per i colori per esempio #000000;

Compatibilità:IE 8 (non compatibile)

.shadow_esterna {
-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
}
.shadow_interna {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}

Media Queries

Le Media Queries sono fantastiche! Permettono di alterare  il CSS in base alla larghezza dello schermo e sono usate come la migliore delle soluzioni per rendere un sito web Responsive. Vanno utilizzate ed inserite alla fine del codice principale del sito web.

Compatibilità:IE 8 (non compatibile)

/*Desktops 1860px*/
@media only screen and (min-width : 1824px) {
/*tuo codice*/
}

/*Desktops e Portatili 1280px*/
@media only screen and (min-width : 1224px) {
/*tuo codice*/
}

/*iPad (verticale - orizzontale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*tuo codice*/
}

/*iPad (orizzontale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/*tuo codice*/
}

/*iPad (verticale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/*tuo codice*/
}

/*Smartphones (verticale - orizzontale)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*tuo codice*/
}

/*Smartphones (orizzontale)*/
@media only screen and (min-width : 321px) {
/*tuo codice*/
}

/*Smartphones (verticale)*/
@media only screen and (max-width : 320px) {
/*tuo codice*/
}

Fonts Moderni e Freschi

Ecco un elenco di fonts moderni da utilizzare per i vostri scopi!

ul { list-type: disc; }
ul li { margin-bottom: 0.625em; }
.size_font { font-size: 1em; }
.cambria {
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
}
.constantia {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
.palatino {
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
.frutiger {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
}
.corbel {
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
.segoe {
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
}
.impact {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
}
.consolas {
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

Selezione del testo

Se non vi piace il colore azzurrino di default su ogni browser potete sempre dargli un vostro colore predefinito grazie alla funzione selection.

::selection { background: #000; color: #fff; }
::-moz-selection { background: #000; color: #fff; }
::-webkit-selection { background: #000; color: #fff; }

Headers

Qui trovate un codice che vi permette di stilizzare le Headers presenti nel sito, ma potete anche personalizzarle a seconda delle vostre esigenze.

/* Headings */
h1,h2,h3,h4,h5,h6 { /*regola generale da applicare a tutte le headers per esempio un font-weight maggiore*/ }
h1 { font-size: 2.4em; line-height: 2.8em; }
h2 { font-size: 1.9em; line-height: 2.3em; }
h3 { font-size: 1.6em; line-height: 2.0em; }
h4 { font-size: 1.4em; line-height: 1.8em; }
h5 { font-size: 1.2em; line-height: 1.6em; }

Per mostrare il contenuto href di un link con i CSS utilizzare questa semplice regola con gli attributi.

a:after { content: " [" attr(href) "] "; }

Come su questo blog ho implementato un effetto transizione su tutti i link testuali per il colore. Qui potete modificare a piacimento la durata, oppure a quale tipo di attributo volete dare la transizione. Nel caso ho scelto il color, ma potete anche darla al background.
Compatibilità:IE 8 e Ie 9 (non compatibile)

a { text-decoration: none; color:#b60000; 
-webkit-transition: color 0.5s ease-in;
-moz-transition: color 0.5s ease-in;
-o-transition: color 0.5s ease-in;
transition: color 0.5s ease-in;
}
a:hover { color: #999; }
a:active { color: #e0e0e0;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

Per il momento questo è tutto, ma non finisce qui. Presto altre piccole chicche da usare nelle vostre creazioni e se avete ulteriori Snippets carini suggeriteli qui nei commenti!

4 Commenti

  1. Ciao! Bravi! Vorrei “minimamente” se tu mostrassi anche questo.
    Grazie!
    Michelangelo.

    Esempio

    .buble {
    width: 160px;
    height: 80px;
    position: relative;
    background-color: #778691;
    border-radius: 20px 5px;
    box-shadow: 0px 2px 10px #666;
    z-index: 9;
    }
    .buble:before{
    content: "";
    left: 40px;
    position: relative;
    top: 132px;
    border-top: 60px solid #778691;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #transparent;
    border-left: 20px solid transparent;
    }

    1. Come codice è corretto, grazie Michelangelo, ma ricordati sempre che quando usi il tag before devi sempre mettere questo:
      display: block;
      oppure
      display: inline-block;
      Se no su alcuni browser crea problemi.

  2. salve, avrei bisogno di inserire un immagine che abbia come altezza sui 400px, e come larghezza tutta la pagina, quindi in base alla risoluzione che restasse centrata, credo che con immagini a 1920px di larghezza copro tutte le risoluzioni, e vorrei che a prescindere dalla risoluzione venga visualizzata sempre la parte centrale, solo che non ci sono riuscito, mi esce sempre lo scroll per andare verso destra, può aiutarmi?

    1. Ciao Francesco, devi semplicemente dare questa regola CSS alla tua immagine:
      img { display: block; min-width: 100%; margin: 0 auto; }
      Questo codice potrebbe bastare, ma se vogliamo come dici tu dare una altezza minima che sia sui 400px devi inserire questo altro codice oltre a quello che ti ho scritto sopra:
      img { min-height: 400px; }

Lascia un commento

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

Usando questo sito, accetti l’uso dei cookies.

Accetto