Anastasia Licandro: extra

03 ๏ css3 ๏ border-radius | box-shadow | gradient

๏ extra | tutorial
html | css | et cetera

effetti sui div: border-radius | box-shadow | gradient background

O inabili al maneggio dell'html: è tempo di abbandonare ombrette et bordini smussati figliati tramite immagini.
Pigiate sui singoli box per occhiare il .css corrispondente (poterete artigliarli per intiero scaricando lo .zip del tutorial).

๏ I browsers che supportano tali effetti sono: Safari, Firefox, Chrome e, in parte, Opera (che ricusa i gradienti).
θ Nell'evenienza stiate navigando traverso il malnato browser Internet Explorer: onti pestiferi colganovi.

specifiche & download del tutorial [per pigri cialtroni]

θ 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.

.box-01 {
    width: 110px;
    height: 70px;
    line-height: 70px;
    color: #C3CBB5;
    font-size: 13px;
    text-align: center;
    background-color: #FFFFFF;
    -moz-box-shadow: 5px 5px 5px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 5px 5px 5px #DCDCDC; /* Safari - Chrome */
    box-shadow: 5px 5px 5px #DCDCDC; /* standard */
    -moz-border-radius: 20px; /* Mozilla */
    border-radius: 20px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    display: block;
}

.box-02 {
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #C3CBB5;
    font-size: 13px;
    text-align: center;
    background-color: #FFFFFF;
    -moz-box-shadow: 0 5px 5px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 0 5px 5px #DCDCDC; /* Safari - Chrome */
    box-shadow: 0 5px 5px #DCDCDC; /* standard */
    -moz-border-radius: 70px; /* Mozilla */
    border-radius: 70px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.box-03 {
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #C3CBB5;
    font-size: 13px;
    text-align: center;
    background-color: #FFFFFF;
    -moz-box-shadow: 0 0 10px 5px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 0 0 10px 5px #DCDCDC; /* Safari - Chrome */
    box-shadow: 0 0 10px 5px #DCDCDC; /* standard */
    -moz-border-radius: 70px; /* Mozilla */
    border-radius: 70px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.box-04 {
    width: 110px;
    height: 70px;
    line-height: 70px;
    color: #C3CBB5;
    font-size: 13px;
    text-align: center;
    background-color: #FFFFFF;
    -moz-box-shadow: inset 0 0 10px 5px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: inset 0 0 10px 5px #DCDCDC; /* Safari - Chrome */
    box-shadow: inset 0 0 10px 5px #DCDCDC; /* standard */
    -moz-border-radius: 20px; /* Mozilla */
    border-radius: 20px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.box-05 {
    width: 110px;
    height: 66px;
    line-height: 66px;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #7F8672;
    font-size: 13px;
    text-align: center;
    background-color: #D9E0CC;
    background: -moz-linear-gradient(center top, #EBF0E2, #D9E0CC 25%, #BBC2AE 50%, #D9E0CC 75%, #EBF0E2); /* Mozilla */
    background: -webkit-gradient(linear, center top, center bottom, from(#EBF0E2), color-stop(25%, #D9E0CC), color-stop(50%, #BBC2AE), color-stop(75%, #D9E0CC), to(#EBF0E2)); /* Safari - Chrome */
    -moz-box-shadow: 3px 3px 5px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 3px 3px 5px #DCDCDC; /* Safari - Chrome */
    box-shadow: 3px 3px 5px #DCDCDC; /* standard */
    -moz-border-radius: 20px; /* Mozilla */
    border-radius: 20px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    border: solid 2px #BBC2AE;
    display: block;
}

.box-06 {
    width: 66px;
    height: 66px;
    line-height: 66px;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #8B7962;
    font-size: 13px;
    text-align: center;
    background-color: #D2C5B4;
    background: -moz-linear-gradient(bottom, #C7B59E, #E4DED6); /* Mozilla */
    background: -webkit-gradient(linear, center bottom, center top, from(#C7B59E), to(#E4DED6)); /* Safari - Chrome */
    -moz-box-shadow: 0 5px 3px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 0 5px 3px #DCDCDC; /* Safari - Chrome */
    box-shadow: 0 5px 3px #DCDCDC; /* standard */
    -moz-border-radius: 66px; /* Mozilla */
    border-radius: 66px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    border: solid 2px #C7B59E;
    display: block;
}

.box-07 {
    width: 66px;
    height: 66px;
    line-height: 66px;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #8B7962;
    font-size: 13px;
    text-align: center;
    background-color: #D2C5B4;
    background: -moz-radial-gradient(center 45deg, circle closest-corner, #E4DED6 0%, #C7B59E 100%); /* Mozilla */
    background: -webkit-gradient(radial, center center, 0, center center, 40, from(#E4DED6), to(#C7B59E)); /* Safari - Chrome */
    -moz-box-shadow: 0 0 5px 3px #DCDCDC; /* Mozilla */
    -webkit-box-shadow: 0 0 5px 3px #DCDCDC; /* Safari - Chrome */
    box-shadow: 0 0 5px 3px #DCDCDC; /* standard */
    -moz-border-radius: 66px; /* Mozilla */
    border-radius: 66px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    border: solid 2px #C7B59E;
    display: block;
}

.box-08 {
    width: 110px;
    height: 66px;
    line-height: 66px;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #7F8672;
    font-size: 13px;
    text-align: center;
    background-color: #D9E0CC;
    background: -moz-linear-gradient(center top, #EBF0E2, #D9E0CC 25%, #BBC2AE 50%, #D9E0CC 75%, #EBF0E2); /* Mozilla */
    background: -webkit-gradient(linear, center top, center bottom, from(#EBF0E2), color-stop(25%, #D9E0CC), color-stop(50%, #BBC2AE), color-stop(75%, #D9E0CC), to(#EBF0E2)); /* Safari - Chrome */
    -moz-box-shadow: inset 0 0 10px 5px #BBC2AE; /* Mozilla */
    -webkit-box-shadow: inset 0 0 10px 5px #BBC2AE; /* Safari - Chrome */
    box-shadow: inset 0 0 10px 5px #BBC2AE; /* standard */
    -moz-border-radius: 20px; /* Mozilla */
    border-radius: 20px; /* standard */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    border: solid 2px #BBC2AE;
    display: block;
}

₪ tutorial

₪ disamine

₪ eventi

forbicesassocarta.it

illustrazioni, illustrazione, fumetti, fumetto, webdesign, realizzazione siti, Anastasia Licandro