Word-wrap es una propiedad creada por Microsoft para la nueva versión de CSS. Esta propiedad soluciona el “problema de cadena de texto” cortándolo en partes para que las palabras largas no desborden de su caja o contenedor.

La propiedad con el valor a utilizar en la hoja de estilos seria word-wrap: break-word, y para este caso declararlo en la clase “Texto” para que el párrafo de dicha clase muestre el efecto.

En la primera gráfica se puede ver como desborda la cadena, y en el segundo como la clase texto la corta y la distribuye en el div.

Código CSS

.caja{
width:200px;
border:1px solid #999999;
color:#333333;
background-color:#FFFFCC;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
margin-bottom:20px;
}
.texto{
word-wrap: break-word;
}

Código xHtml

<p>Lorem ipsum dolor sit amet, consectetur
adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump
ultrices posuere cubilia Curae <p>


<p class="texto">Texto con word - wrap Lorem ipsum dolor sit amet, consectetur
adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump
ultrices posuere cubilia Curae <p>

Resultado

Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web.

Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow tienen varios parámetros, en primera instancia hay que definir el color, luego el eje X e Y de la sombra y el efecto de difuminado. Es una propiedad oficial que funciona eficientemente en Firefox.

Código CSS:

.sombra{
color:#000000;
font:22px Arial, Helvetica, sans-serif;
text-shadow:#CCCCCC 2px 1px 2px; /*Color de la sombra - Eje X - Eje Y - Difuminado*/
}

Código xHtml:

<p class="sombra">Texto con Sombra<p>

Resultado:

La problemática de simular bordes redondeados con recorte de imágenes y javascript se soluciona con la llegada de CSS3. La propiedad “Border-radius” permite redondear cajas con solo especificar un par de valores.

Esta propiedad no esta estandarizada y para su óptimo funcionamiento necesita de propiedades soporte para los motores Webkit y Mozilla.

En cada propiedad “Border-radius” se debe especificar un valor idéntico, como en el siguiente ejemplo donde las 4 esquinas generan su propia curva de 10 pixeles.

Código CSS:

.caja{
-moz-border-radius: 10px; /*Propiedad de soporte*/
-webkit-border-radius: 10px; /*Propiedad de soporte*/
border-radius: 10px; /*Propiedad válida*/
width:300px;
padding:20px;
border:1px solid #CCCCCC;
background-color:#990000;
color:#FFFFFF;
font-size:1.2em;
font-family:Arial, Helvetica, sans-serif;
}

Código XTML:

Curabitur mollis nunc a massa tincidunt tempus.
Morbi vitae facilisis justo. Vivamus eget facilisis
leo. 

Resultado:

CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa.

La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de usar solo hay que poner la propiedad y su valor, esta propiedad funciona correctamente en Firefox 3+ y no da señales de vida en IE.

Para este ejemplo use dos divs, el primero sin transparencia y el segundo con una transparencia del 50%.

Código CSS:

.div{
position:absolute;/*Para que no choquen los divs*/
width:200px;
height:200px;
top:60px;
left:150px;
background-color:#FFCC00;
}
.div2 {
width:200px;
height:200px;
opacity:0.5; /*Opacidad de 50%*/
background-color:#990000;
}

Código XTML:

 Div sin Transparencia
Div Transparente

Resultado

Descargar el Ejemplo

En el ejemplo tenemos un pequeño menú con 6 opciones, vamos a mover la del centro unos pixeles arriba sin que deje de ocupar su espacio en la lista. Con Position:relative se puede mover un elemento sin que este deje vacío su lugar de origen.

Los Elementos 1, 3, 4, 5 y 6 se mantienen intactos sin ser afectados por el Elemento 2. Para modificar su ubicación tenemos que usar las propiedades Top y Left con valores aceptados por CSS, en este caso use pixeles con un valor negativo para que este se mueva hacia arriba.

Código CSS:

ul{
color:#FFFFFF;
margin-top:50px;
}
li{
display:inline;
background-color:#003366;
border:1px solid #003333;
margin-left:10px;
}
.mover{
position:relative;
top:-20px;
}

Código XTML:

Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6

Descargar Ejemplo