Borders
Tutti coloro che utilizzano i CSS hanno familiarità con la proprietà border - è un ottimo
modo per struttura dei contenuti, creare effetti intorno alle immagini e migliorare il layout di pagina.
.
CSS3 prende le frontiere ad un nuovo livello con la possibilità di
utilizzare i gradienti, angoli arrotondati, ombre e bordi di immagini.
Bordi arrotondati
Realizzare bordi arrotondati utilizzando il codice CSS corrente può essere difficile - ci sono numerosi metodi
disponibili, ma nessuno è molto semplice.
Utilizzando CSS3, creando un bordo arrotondato è incredibilmente facile.
Esso può essere applicato a ogni angolo o singoli
angoli, e la larghezza / colore possono essere facilmente modificate.
Il codice CSS è:
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}
Gradienti
Bordi sfumati può migliorare molto l'aspetto se usato correttamente. Questo codice è un po 'più complesso,
che richiede di definire ogni colore del gradiente.
Il codice CSS è:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}
Box Shadows
Aggiunta di un ombra di un elemento difficile al momento - è un buon modo per distinguere una
determinata area, ma come con qualsiasi effetto, deve essere usato con parsimonia.
Il codice CSS è:
. border_shadow (
-webkit-box-shadow: 10px 10px 5px # 888;
padding: 5px 5px 5px 15px;
width: 300px;
)
Border Images
I bordi delle immaginio sono una delle aggiunte più utili -
CSS ha la possibilità di ripetere o allungare il bordo dell immagine
Il codice CSS è simile a quello seguente (che varia tra i browser attualmente):
. border_image (
-webkit-border-image: url(border.png) 27 27 27 27 Round Round;
)
