<html>
<head>
<title>**** CSS 3 ****</title>
<style>
@font-face {
font-family: ‘ChunkFiveRegular’;
src: url(‘five/Chunkfive-webfont.eot’);
src: url(‘five/Chunkfive-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘five/Chunkfive-webfont.woff’) format(‘woff’),
url(‘five/Chunkfive-webfont.ttf’) format(‘truetype’),
url(‘five/Chunkfive-webfont.svg#ChunkFiveRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body{
font-family: ChunkFiveRegular;
font-weight: normal;
letter-spacing:5px;
color: #193742;
width: 80%;
height: 600px;
margin: 15px auto;
background: #e1d8b9;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(60,107,146)),
color-stop(0.65, rgb(226, 217, 185)));
background: -moz-linear-gradient(center top,rgb(60,107,146)25%, rgb(226,217,185)65%);
}
#izq {
height: 600px;
width: 20%;
padding: 2.5%;
border: solid 1px #000;
float: left;
}
#der {
position: relative;
height: 600px;
width: 65%;
border: solid 1px #000;
float: right;
padding: 2.5%;
}
#contenido {
position: absolute;
top: 150px;
left: 120px;
width: 55%;
height: 200px;
border: solid 1px #000;
padding: 1.5%;
margin: 1.5% auto;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
background: red;
/*
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(233,229,212,0.65)),
color-stop(1, rgba(191, 178, 147,0.75)));
background: -moz-linear-gradient(center top,rgba(233,229,212,0.65)0%, rgba(191, 178, 147,0.75)100%);
*/
}
#radial {
position: absolute;
top: 2.5%;
left: 2.5%;
width: 15%;
height: 80px;
border: solid 1px #000;
padding: 1.5%;
margin: 1.5% auto;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
background: -webkit-gradient(radial,50 50, 20,30 30,50,from(rgba(255,255,255,0.85)), to(rgba(255,255,255,0)));
/* small circle & then bigger circle – primero – pocision left, segundo – pocision top, tercero – tamano radius*/
background: -moz-radial-gradient(20px 30px 0deg, cover, rgba(255,255,255,1)0%, rgba(255,255,255,0)20%);
/*https://developer.mozilla.org/en/CSS/radial-gradient*/
}
#contenido p {
margin: 70px auto;
font-family: ChunkFiveRegular;
font-size: 1.2em;
text-align: center;
/*text-shadow: 5px 5px 2px #000;*/
/*x y & difuminar color*
text-shadow: -5px 0 0 #cb7d20;
*/
text-shadow: 0 0 2px #fff, 0 0 5px #ddd, 0 0 10px #ccc;
}
</style>
</head>
<body>
<div id=”izq”>

Estoy harto de usar Verdana (No Quiero Ofender)

</div>
<div id=”der”>

Primero – colores con CSS 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>

Seguimos con degradados en CSS 3

y acabamos (hoy) con fuentes con CSS3

<div id=”contenido”>
Controlamos solo la opocidad del fondo & no de los demas elementos
</div>
<div id=”radial”>
<p>Radial</p>
</div>
</div>
</body>
</html>