css3 ✁ border-radius | box-shadow | gradient
☼ O inabili al maneggio dell'html: è tempo di abbandonare ombrette et bordini smussati figliati tramite immagini..
✁ I browsers che supportano tali effetti sono:
✓ Chrome
✓ Safari
✓ Firefox
✓ Opera [il quale, al coevo, ricusa i gradienti]
☼ Nell'evenienza stiate navigando traverso il malnato browser Internet Explorer: onti pestiferi colganovi.
✁ È possibile scaricare lo .zip ➤ contenente gli esempi illustrati nel tutorial.
✁ box - 01:
.box-01 {
/* ombra a destra - Firefox */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
/* ombra a destra - Chrome Safari */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
/* ombra a destra - Standard */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
/* valore del bordo smussato - Firefox */
-moz-border-radius: 20px;
/* valore del bordo smussato - tutti gli altri browser */
border-radius: 20px;
}
✁ box - 02:
.css-box-02 {
/* ombra in basso */
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
/* border-radius con lo stesso valore del width-height = cerchio */
-moz-border-radius: 70px;
border-radius: 70px;
width: 70px;
height: 70px;
}
✁ box - 03:
.box-03 {
/* ombra perimetrale */
-moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
✁ box - 04:
.box-04 {
/* ombra interna (dello stesso colore del div ospite) */
-moz-box-shadow: inset 0 0 20px 5px rgba(218, 222, 194, 0.8);
-webkit-box-shadow: inset 0 0 20px 5px rgba(218, 222, 194, 0.8);
box-shadow: inset 0 0 20px 5px rgba(218, 222, 194, 0.8);
}
✁ box - 05:
.box-05 {
01 /* gradiente scuro mediano */
02 background: -moz-linear-gradient(
03 center top, #EBF0E2, #D9E0CC 25%, #BBC2AE 50%, #D9E0CC 75%, #EBF0E2
04 );
05 background: -webkit-gradient(
06 linear, center top, center bottom,
07 from(#EBF0E2),
08 color-stop(25%, #D9E0CC),
color-stop(50%, #BBC2AE),
color-stop(75%, #D9E0CC),
to(#EBF0E2)
);
}
✁ box - 06:
.box-06 {
/* gradiente scuro dal basso */
background: -moz-linear-gradient(
bottom, #C7B59E, #E4DED6
);
background: -webkit-gradient(
linear, center bottom, center top,
from(#C7B59E), to(#E4DED6)
);
}
✁ box - 07:
.box-07 {
/* gradiente radiale */
background: -moz-radial-gradient(
center 45deg, circle closest-corner,
#E4DED6 0%, #C7B59E 100%
);
background: -webkit-gradient(
radial, center center, 0, center center, 40,
from(#E4DED6), to(#C7B59E)
);
}
✁ box - 08:
.box-08 {
/* gradiente scuro mediano + ombra interna */
background: -moz-linear-gradient(
center top, #EBF0E2, #D9E0CC 25%, #BBC2AE 50%, #D9E0CC 75%, #EBF0E2
);
background: -webkit-gradient(
linear, center top, center bottom,
from(#EBF0E2),
color-stop(25%, #D9E0CC), color-stop(50%, #BBC2AE), color-stop(75%, #D9E0CC),
to(#EBF0E2)
);
-moz-box-shadow: inset 0 0 10px 5px #BBC2AE;
-webkit-box-shadow: inset 0 0 10px 5px #BBC2AE;
box-shadow: inset 0 0 10px 5px #BBC2AE;
}
✁ Sono stati usati valori rgb[a] in sostituzione agli esadecimali per ottenere la trasparenza alpha.
I gradienti del background possono essere direzionati in ogni dove (seguono alcuni esempi non contemplati nel tutorial).
✁ da sinistra a destra:
background: -moz-linear-gradient(
left, #BBC2AE, #EBF0E2
);
background: -webkit-gradient(
linear, left center, right center,
from(#BBC2AE), to(#EBF0E2)
);
✁ da destra a sinistra:
background: -moz-linear-gradient(
right, #BBC2AE, #EBF0E2
);
background: -webkit-gradient(
linear, right center, left center,
from(#BBC2AE), to(#EBF0E2)
);
✁ dall'angolo in alto a sinistra a quello in basso a destra:
background: -moz-linear-gradient(
left top 315deg, #BBC2AE, #EBF0E2
);
background: -webkit-gradient(
linear, left top, right bottom,
from(#BBC2AE), to(#EBF0E2)
);
✁ dall'angolo in alto a destra a quello in basso a sinistra:
background: -moz-linear-gradient(
right top 225deg, #BBC2AE, #EBF0E2
);
background: -webkit-gradient(
linear, right top, left bottom,
from(#BBC2AE), to(#EBF0E2)
);
et cetera.
✁ scaricate lo .zip ➤ contenente gli esempi illustrati nel tutorial.