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
- Rounded Corners
- Box Shadow (esterna ed interna)
- Media Queries
- Fonts Moderni e Freschi
- Selezione del testo
- Headers
- Mostrare i link per interno con i CSS
- Link con Transition
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.
Rounded Corners
Questo codice serve per arrotondare i bordi di un determinato tag
Compatibilità:IE 8 (non compatibile)
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)
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)
Fonts Moderni e Freschi
Ecco un elenco di fonts moderni da utilizzare per i vostri scopi!
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.
Headers
Qui trovate un codice che vi permette di stilizzare le Headers presenti nel sito, ma potete anche personalizzarle a seconda delle vostre esigenze.
Mostrare i link per intero con CSS
Per mostrare il contenuto href di un link con i CSS utilizzare questa semplice regola con gli attributi.
Link con transition
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)
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!
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;
}
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.
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?
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; }