CSS3: Cantonades arrodonides "Round corners" i text inclinat ("Rotate")

http://www.w3.org/Style/CSS/

CSS3: "Round corners" i text inclinat 

Una de les avantatges de CSS3, que estalvia molt temps de feina, son les cantonades arrodonides ("Round Corner") i textos inclinats.
Ho veiem amb un exemple per tal que sigui més fàcil.

Cantonades arrodonides "Round corner"

Veiem el següent codi exemple, que serveix per al format d'aquest propi codi font:

.code{
margin-top: 20px;
padding-left: 5px;
font-family: monospace;
background-color: #000;
width: 100%;
border-top: 10px solid #ccc;

border-radius: 20px 15px 10px 5px;

box-shadow: 5px 3px 10px #000;
min-height: 80px;
color: #C0F146;
text-align: left;
font-size: 12px;
}


Amb la comanda border-radius defineixes quin radi d'arrodoniment ha de tenir aquesta cantonada arrodonida.

Text inclinat ("Rotate")

Veiem un altre cas amb text inclinat:

.demo-text {
padding:2%;
min-height:20px;
min-width:50px;
margin:2%;
/* border */
border:5px;
border-radius:20px;
border-style: dashed;
border-color:red;
box-shadow: 5px 5px 2px #888888;
/* position */
float:right;
display: table-cell;
text-align:center;
vertical-align: middle;

/*Rotate div */
 -ms-transform:rotate(30deg); /* IE 9 */
 -webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */
 transform:rotate(30deg); /* Standard syntax */
}

Amb aquest codi, per exemple, podem aconseguir un text inclinat amb cantonada arrodonida:

exemple

Enllaços relacionats:

• W3School - Border Radius
• W3 - CSS Backgrounds