Guida Css3 : 5 Tecniche Utili

by admin Date: 11-04-2013


HTML e CSS sono gli elementi costitutivi delle pagine web.
I moduli di specificazione CSS3 hanno aggiunto un gran numero di nuovi elementi che ci permettono di ravvivare un sito,  limitando l'utilizzo di codice ridondante e pesante nonché l'abuso di immagini decorative.
In questo post approfondiremo l'uso delle ombre, delle transizioni, dei selettori, degli pseudo-elementi CSS3.
Questa breve rassegna vi darà una buona visione complessiva di ció che é possibile fare con il solo utilizzo di CSS puro, eliminando l'utilizzo massivo di script, librerie ed immagini.

1. Scaling automatico dell’immagine di fondo fullscreen.

La soluzione che vi proponiamo funziona perfettamente con tutti i principali browser e con un piccolo trucco è possibile estendere la funzionalità anche al nostro amato IE8 (vero? =D).
Per farlo ci viene in soccorso il tag background-size: cover; che di fatto:
1. Posiziona l’immagine al centro dello schermo in posizione fixed in fullwidth.
2. Elimina la scrollbar poichè l’immagine è fissata correttamente nello schermo.
3. Permette lo scaling automatico dell’immagine al resize.
4. Preserva le proporzioni dell’immagine. (niente stretch improvvisati e poco gradevoli).

CODICE CSS:
 

html {
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 

Come potete notare, il css è stato applicato all'elemento html. Vi consigliamo poi di specificare le forzature per i vari motori di render, nel caso vogliate ottimizzare l'effetto per versioni obsolete di Firefox(moz) , Chrome/Safari (webkit) ed Opera(o).

Per rendere il codice compatibile con IE8 é necessario ricorrere a questo trick css:
 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
 

La maledizione IE putroppo ci ha insegnato che nulla è mai troppo semplice: l'applicazione del trucvo sull’elemento css “html” infatti, rende non cliccabili i link del sito.
Come risolvere il problema?

Semplice, invece di utilizzare il selettore 'html' creeremo un div “#background” :
 

#background{
width:100%;
height:100%;
position:fixed;
top:0px; left:0px;
z-index:-100;
}
 

Ricordatevi poi di aggiungere nel codice html il relativo markup (div con id="background")
 

IMPORTANTE: Il div deve essere necessariamente inserito PRIMA di tutto il resto del documento.

CODICE COMPLETO:

#background {
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
width:100%;
height:100%;
position:fixed;
top:0px; left:0px;
z-index:-100;
}

2. Angoli tagliati e con ombre CSS3 (Tucked corners)

 

001. tucked-corners {
002 background: #fbfbfb;
003 position: relative;
004 box-shadow: 0 1px 25px hsla(0,0%,0%,.2);
005}
006
007. tucked-corners:before,
008. tucked-corners:after {
009 background: #d2d2d2;
010 content: ‘’;
011 width: 100px;
012 height: 50px;
013 position: absolute;
014 top: -25px;
015 box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
016}
017. tucked-corners:before {
018 left: -50px;
019 transform: rotate(- 02045deg);
021}
022. tucked-corners:after {
023 right: -50px;
024 transform: 025rotate(45deg);
026}

Quello che abbiamo fatto é usare gli pseudo-elementi :before e :after per sfruttarli come figli della classe .tucked-corners.
A ognuno di questi pseudo-elementi è dato lo stesso colore di sfondo della pagina, che consente agli stessi di mimetizzarsi perfettamente con lo sfondo della pagina stessa.
Gli pseudo-elementi presentano diverse carattersitiche CSS, primo fra tutti il box-shadow. Al fine di posizionare gli pseudo-elementi, abbiamo impiegato il posizionamento assoluto insieme ad una altezza e larghezza specifiche per ogni angolo.
Infine, la parte del codice che porta veramente alla realizzazione dell'effetto é la rotazione (rotation) effettuata con l'elemento transform, che agisce su ogni angolo di 45 gradi e -45 gradi.
 

3.Creare una Drop cap (lettera iniziale) con CSS3

 

001p:first-child:first-letter {
002 float: left;
003 colour: DarkGoldenRod;
004 font-size: 100px;
005 line-height: 80px;
006 margin-right: 10px;
007}

Lo pseudo-elemento 'first-letter' viene utilizzato per effetti di 'initial caps' e 'drop caps', che sono tipici effetti tipografici. E' simile ad un elemento inline se la sua proprità 'float' è 'none', diversamente è simile ad un elemento flottante.

Quando il paragrafo comincia con altre punteggiature (per es. parentesi e punti di ellissi) o altri caratteri che di norma non sono considerate lettere (per es. numeri e simboli matematici), gli pseudo-elementi 'first-letter' vengono in genere ignorati.)
 

4. Bottoni animati CSS3 (rollovers)

Il gradient CSS non può essere animato direttamente, in quanto non rientrano nella categoria del www.w3.org/TR/css3-transitions/ # animabili-properties).
Possiamo aggirare il problema usando le proprietà background-size e background-position. Ecco un esempio:
 

001.button {
002 background: linear-gradient(#2876b2, #549ad0); background-size: 100% 200%;
003 transition: background-position .5s linear;
004}
005
006.button:hover, .button:focus {
007 background-position: 0 -102%;
008}

05. Personalizzare i radio button e i checkboxes con CSS3

Questa tecnica utilizza una immagine di sfondo, in combinazione con il selettore generale di fratelli (identificato con la tilde ~) e la pseudo-classe :checked.
 

001 input[type=radio],
002 input[type=checkbox] {
003 position: absolute;
004 top: 0;
005 left: 0;
006 opacity: 0;
007}
008
009.radio-buttons label {
010 display: block;
011 padding-left: 45px;
012 height: 35px;
013 background: url(radio- sprite png) no-repeat 0 0;
014}
015
016.checkboxes label {
017 background: url(checkbox- sprite.png) no-repeat 0 0;
018}
019
020 input:checked ~ label {
021 background-position: 0 -35px;
022}

Per prima cosa dobbiamo nascondere il checkbox.

input#check {
 display:none;
}

A noi interessa solo la label, perché anche se il checkbox non è visibile potremo usarla ugualmente per attivarlo e disattivarlo.
Alla label possiamo associare qualunque stile, non abbiamo limiti, nel nostro caso specifico, abbiamo aggiunto un background.
Per assicurarci che tutti gli elementi siano selezionati, non dobbiamo dimenticare di aggiungere l'etichetta 'for' sulle label del codice html.
 

 
by admin Date: 11-04-2013 visite : 2279