CSS3: box con bordi arrotondati

 CSS3  No Responses »
Dec 212011
 

Una delle novità forse più attese del css3 è la possibilità di arrotondare tramite il foglio di stile gli angoli dei nostri div o degli altri tag html.

Uno dei nuovi attributi del css è dunque il border-radius, che poi può essere suddiviso nei 4 angoli: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Inoltre è possibile non solo specificare il raggio del bordo, ma si possono creare ellissi dano il doppio valore per l’asse orizzontale e verticale.

L’esempio che segue presenta bordi ellittici negli angoli a sinistra e circolari a destra:


border-top-left-radius:20px 10px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px 10px;
 border-bottom-right-radius:20px;

Il risultato lo si può vedere in questa pagina

 Share

CSS3: opacità (seconda opzione)

 CSS3  No Responses »
Dec 202011
 

CSS3 offre una seconda opzione per gestire la trasparenza in alternativa a quella presa in considerazione nel post precedente. Si tratta di usare la notazione RGBa, dove oltre alla percentuale del colore RGB possiamo specificare la trasparenza con il canale alfa.
Riprendendo l’esempio precedente:

body{ font-family:Verdana; font-size:75%; background-image:url(images/sky.jpg);}
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
}

lo integriamo modificando le istruzioni sul background del box in questo modo

background-color: rgba(255, 255, 255, 0.5);

dove l’ultima voce è appunto il canale alfa dell’opacità. A questo punto la domanda è sulla differenza rispetto al post precedente: nel caso dell’attributo opacity questo viene applicato allo sfondo del box e agli elementi contenuti, mentre nel caso della notazione RGBa sarà solo lo sfondo del box ad essere trasparente e non gli elementi contenuti nel box.

Ecco l’esempio

 Share

CSS3: opacità

 CSS3  No Responses »
Dec 192011
 

CSS3 offre la possibilità di gestire la trasparenza sui box. In questo esempio metteremo un’immagine di sfondo sul body:

body{
font-family:Verdana;
font-size:75%;
background-image:url(images/sky.jpg);
}

All’interno della pagina metteremo un box contenente del testo e poi con il css diamo alcune istruzioni di formattazione tradizionali:

	width:400px;
	height:400px;
	padding:20px;
	color:#000;
	background-color: white;

e finalmente l’opacità, con un valore che va da 0 (trasparente) a 1 opaco:

opacity:0.5;

infine dobbiamo garantire la compatibilità con ie8:


-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

e ie7:

filter: alpha(opacity=50);

Ecco l’esempio

 Share
 Newer Entries