Como crear recuadro de texto con CSS3

Por Blackned el Mar.05, 2010, en css, diseño web

Luego del terremoto sufrido en Chile y las vacaciones volvemos a retomar el ritmo con nuevos aportes.

Fuerza Chile!!

CSS3 viene con nuevas características y funciones que nos facilitaran de la vida de una manera notable. Aquí mostrare como crear un recuadro de texto con propiedades de CSS3. Esta propiedad solo funciona en Opera, Firefox, Chrome y Safari (para variar Explorer marcando diferencia).

La gracia de este recuadro de texto es que queda relegado como a un segundo plano, una especie de efecto de relieve inverso. a mas de alguno le puede servir para su sitio.

Paso 1. Creando la estructura CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

*{
padding:0; margin:0;
}

body{
background:#222;
}

#container{
margin:0 auto;
background:#333333;
}

h2 {
color:#000;
text-shadow:-1px 1px 1px #4A4947;
font:36px bold Arial, Helvetica, sans-serif;
margin:0 0 0 0;
padding:0 0 10px 0;
}

p{
text-shadow:-1px 1px 1px #4A4947;
font:bold 18px Arial, Helvetica, sans-serif;
color:#000;
padding:0 0 10px 0;
line-height:162.5%;
}

Paso 2. Creando la estructura HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="container">
<h2>Heading</h2>
<p>
Et ut ac sociis natoque montes! Porta lundium sed,
tempor ac porta, parturient turpis. Ac, ut eros egestas,
adipiscing penatibus sit lacus mattis parturient, placerat.
</p>
<p>
Et ut ac sociis natoque montes! Porta lundium sed,
tempor ac porta, parturient turpis. Ac, ut eros egestas,
adipiscing penatibus sit lacus mattis parturient, placerat.
</p>
</div>

Aquí les dejo el demo de como se ve el efecto del recuadro de texto.