Como hemos planteado en temas anteriores, la incursión y manejo de CSS3 en nuestros proyectos se debe de empezar a convertir en un hábito de constante uso y su aprendizaje debe ser uno de nuestros objetivos más inmediatos. Si bien estamos conscientes que aún falta para su total estandarización, la tercera versión de este lenguaje de estilo nos ofrece una gran variedad de propiedades sencillas y poco robustas para la creación y adaptación de efectos a nuestros elementos, por lo que la balanza se inclina a favor de su uso.
Cuantiosas son las ventajas al manejarlo, con unas cuantas líneas podemos realizar sombreados o transparencias, incluso llegar a crear complejas animaciones apoyándonos con meta lenguajes como HTML5, y gracias a ello nuestros sitios se harán menos pesados y más eficientes. El ahorro de tiempo en el desarrollo, el apresurar la edición, así como la economización de espacio y tiempo de respuesta de nuestro servidor sin duda hacen de CSS3 una gran opción.
Es por ello que en este artículo traemos una serie de propiedades básicas para empezar a estudiar este lenguaje, son sencillas pero muy potentes, nos permitirán darle a nuestro sitio un estilo único y bien estructurado en cuestión de minutos, sin necesidad de programas de edición ni hacks, solo código plano y sencillo que será correctamente visible en la mayoría de los navegadores.
Navegadores y CSS3
Desafortunadamente CSS3 aún no es compatible con todos los navegadores que existen en el mercado, aún rondan versiones muy antiguas que se siguen utilizando por lo que algunos de estos navegadores ni siquiera son compatibles con frameworks de JavaScript o formatos como PNG, esta clase de navegadores por obvias razones se pueden considerar obsoletos, pero por cuestiones de uso siguen siendo tomados en cuenta, ya que muchos de los usuarios siguen utilizándolos y se niegan a cambiar.
Fuera de los navegadores obsoletos, CSS3 funciona a la perfección en Firefox, Google Chrome, Opera y Safari, mientras que en Internet Explorer funciona a partir de su versión 9 la cual se encuentra en período BETA en este momento.
La clave para empezar a utilizar CSS3 está en determinar si estamos o no de acuerdo en que obtendremos una presentación ligeramente diferente de un navegador a otro, es decir, puede que Internet Explorer 8 muestre esquinas de 90 grados en vez de mostrarlas radialmente o puede darse que un botón se mire con una forma diferente, si esto es de tu desagrado entonces puedes decidir no utilizar estas técnicas, pero siempre hay que tener en mente el hecho de que no es necesario que un sitio Web siempre luzca idéntico en todos los navegadores.
Propiedades de texto con CSS3
Unas de las propiedades más populares en el uso de CSS3 son aquellas que se aplican a la edición y estilización de textos, muchas de estas fueron incluidas desde la versión anterior de CSS pero por cuestiones de implementación se decidieron postergar para adaptarlas mejor en esta entrega.
CSS3 ha permitido ahorrarnos el hecho de editar una imagen exclusivamente para mostrar un texto, el hecho de tener que subir dicha ilustración a nuestro servidor únicamente para que nuestro texto luciera de manera presentable nos podía poner los pelos de punta, ya que no sólo era cuestión de subir 1 o 2, muchas veces se tenía que subir bastantes imágenes, las cuáles a su vez llevaban un tiempo invertido en su edición y representaban mayor tiempo descarga para los usuarios.
Entre las propiedades más comunes podemos encontrar a text-shadow, text-stroke y text-overflow, las cuales son fáciles de aplicar y aunque algunas son más exclusivas que otras, pueden ser adaptadas a partir de diseños hechos previamente con algún editor de imágenes como Photoshop, en cuestión de minutos.
Text-shadow
El efecto text-shadow consiste en agregar una sombra a nuestro texto, la cual se encontrara difuminada en distintos grados que varian según los valores proporcionados a través de cuatro parámetros, los cuales son x-offset y y-offest que indican el desplazamiento horizontal y vertical de la sombra es decir a que distancia estará la sombra del texto, blur que indica el desenfoque y finalmente el cuarto parámetro es el color de la sombra, en caso de no proporcionar un color se tomará el color de texto como el valor default.
h2 {
text-shadow: 0 5px 3px #CCC;
color: #000;
font-size: 40px;
}
También podemos agregar múltiples sombras mediante el uso de comas como separadores
h2 {
text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC;
color: #000;
font-size: 40px;
}
Text-stroke
Antes de empezar con la descripción, hay que mencionar que este método sólo funciona para Web-kit por lo que hay que tener cuidado al momento de utilizarlo y estar consientes que sólo lucirá bien en Chrome y Safari. El objetivo de este efecto es mostrar nuestro texto como si se subrayara el contorno de las letras, creando un trazo que puede adaptarse al tamaño y color deseado, es especialmente útil si se desea utilizar letras y fondo del mismo color.
h2 {
-webkit-text-stroke: 3px black;
color: crimson;
font-size: 70px;
}
Text-overflow
Esta propiedad puede ser utilizada para “cortar” la extensión de un texto que exceda la medida del contenedor en el cual se encuentra, proveyendo de una muestra para que el usuario pueda interesarse en leer el texto completo. Se le pueden asignar dos valores los cuales son clip y ellipsis, la diferencia entre estos dos valores es que el clip no cortará palabras mientras que ellipsis muestra tres puntos que se despliegan al final del texto de muestra indicando que existe más texto.
#texto {
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 200px;
}
Conclusión
>>> Puedes ver aquí algunos ejemplos simples del funcionamiento del CSS3 explicado.
Las tres propiedades analizadas en esta parte del artículo son consideradas como parte del grupo de las más sencillas, por su fácil aplicación y edición, pero CSS3 no se ha limitado únicamente a esta clase de estilos, podemos indagar un poco más y realizar efectos un poco más elaborados y avanzados mediante herramientas como el set de animación proporcionado por webkit a través de su propiedad “keyframes”, que nos ofrece los efectos “pulse” y “bounce” para enriquecer el contenido.
Como podemos observar con muy poco hemos logrado darle un gran estilo a nuestro sitio, con esta pequeña serie de atributos y el ingenio se puede llegar a realizar bastantes proyectos de gran calidad, es cuestión de no limitarnos y saber aprovechar las bondades que nos ofrecen los lenguajes de la actualidad. CSS3 no es un obstáculo, es un aliado, así que no veas como un inconveniente el hecho de que luzca distinto en los navegadores, pronto llegara su total estandarización y debemos estar más que familiarizados con el lenguaje en el siguiente artículo de la serie explicaremos más atributos relacionados a otros elementos de una página Web.