Moderador del foro: ZorG |
Foro uCoz Ayuda a los webmasters Soluciones personalizadas CSS para los novatos |
CSS para los novatos |
Entendiendo vertical-align Como muchos deben ya saber, es un tremendo lío alinear verticalmente un elemento HTML mediante CSS estándar; de hecho una de las razones de que aún personas siguen utilizando tablas para estructurar sitios: precisamente porque las celdas hacen este alineado horizontal y vertical tan fácil, mediante los atributos align=“” y valign=“”. Pero utilizando web standards es otra cosa, una dimensión aún perturbante y siendo franco, algo complicada de entender y llevar a la práctica. CSS tiene una ‘obscura’ propiedad llamada vertical-align. Lo obscuro se debe a que es confuso su entendimiento, y por ende su uso. Para ayudar a aclarar eso, este artículo lo atacará por dos ámbitos más que necesarios: alineado de elementos de formulario y de imágenes. Vertical-align tiene uso principalmente en etiquetas que son por esencia de tipo inline. Si tratas de utilizar esta propiedad en un <div> por ejemplo, o en un <p> quizás es por eso que te hayas frustrado ya que estos elementos son de tipo block. Cuando vertical-align es definido para elementos inline, se comporta como el antiguo y obsoleto atributo valign=“”. Tomando este principio, su uso en imágenes junto a texto se ven resultados concretos: Los valores de vertical-align son: • sub: alinea el elemento como si fuera subescrito (<sub>). • super: alinea el elemento como si fuera sobrescrito (<sup>). • top: la parte superior del elemento es alineado con la parte superior del elemento en la misma línea. • middle: el más interesante; el elemento es ubicado en la mitad del elemento padre. • bottom: también interesante; la parte inferior del elemento es alineado con la parte más baja de la línea. • %: alinea el elemento en valores porcentuales de la propiedad line-height (se permiten valores negativos). Otro importante uso de esta propiedad es con etiquetas de formulario, principalmente cuando queremos alinear los nombres de los campos (generalmente envueltos en <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto: Como décadas pasadas, esta propiedad también puede ser utilizada en reemplazo del atributo para celdas de tablas, bajo los mismos valores. Como las celdas por defecto tienen vertical-align: middle definidos, puedes utilizar los otros valores para lograr lo que necesites. ¿Milagrosa? Bueno, suena bien hasta ahora pero está lejos de ser la solución definitiva, ya que IE6 e IE7 soporta esta propiedad a su manera, como siempre. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
10 sencillos pasos para aprender posicionamiento CSS El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien maquetado debería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores, es decir, mejor para SEO, y un tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página. Aquí quiero presentar un post que seguro estoy de que parecerá muy bueno y creo que es básico para cualquier persona que quiera aprender a maquetar sitios web con CSS. Los pasos son realmente sencillos de seguir. Para todo el tutorial se va a utilizar siempre la misma estructura XHTML, que se muestra a continuación. POSITION STATIC El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS. POSITION RELATIVE POSITION ABSOLUTE POSITION RELATIVE + POSITION ABSOLUTE 2 COLUMNAS POSICIONADAS DE FORMA ABSOLUTA Una ventaja de usar este posicionamiento es que se puede colocar el HTML de las columnas en cualquier orden, ya que el posicionamiento se realiza de forma absoluta. Si te fijas, los demás elementos han sido tapados por las dos columnas que están posicionadas de forma absoluta. Vamos a ver cómo solucionar esto. COLUMNAS POSICIONADAS DE FORMA ABSOLUTA CON ALTO DEFINIDO Pero esta no es una solución válida para la mayoría de los diseños, porque lo normal es que no se sepa cual va a ser la longitud del texto introducido en las columnas. ¿Cómo se puede solucionar esto? Sigue leyendo… POSICIONAMIENTO FLOTANTE COLUMNAS FLOTANTES COLUMNAS FLOTANTES CON CLEAR float:left; FIN Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Voltear una imagen con CSS Voltear una imagen en vez de cargar una nueva imagen puede ser de utilidad en algunos casos. Por ejemplo, pongamos que tenemos una imagen de una flecha y a veces necesitamos que apunte a la derecha y otras a la izquierda. En vez de generar dos imágenes, podemos utilizar una -de esta manera optimizar un poco más nuestra web- y utilizar el siguiente código: Si quisiéramos voltear la imagen de forma vertical, el código sería el siguiente: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Hacks específicos para navegadores A veces es útil apuntar a determinados navegadores para darle instrucciones específicas o fijar sus incoherencias. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Rounded Corners con CSS3 Con la paulatina introducción de CSS3, la realización de esquinas redondeadas es una tarea mucho más fácil. Cabe mencionar que esta técnica todavía no es válida en Internet Explorer. Lo será pronto, cuando se libere IE9. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Clear de float en CSS sin divs adicionales Snippet que permite borrar elementos flotantes sin añadir un marcado adicional al documento. Simplemente se trata de una clase. .clearfix { display: inline-block; } Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS para crear botones con sprites Tener un botón o enlace con una imagen de fondo es bastante normal, y hoy en día, utilizamos efectos para seguir mejorando la experiencia del usuario. Uno de ellos es ofrecer un indicador al usuario para que sepa que se cierne sobre un botón. El denominado efecto "hover". Con el uso de un sprite, podemos crear este efecto modificando la posición de la imagen de fondo hasta una cierta altura para mostrar el fondo del botón en estado "hover". Una técnica simple pero eficaz y que puede ser de gran utilidad a la hora de reducir las peticiones HTTP. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Diferentes hojas de estilo para diferentes tamaños de ventana del navegador Interesante script para aplicar diferentes hojas de estilo en función del tamaño de ventana. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Cómo reducir el peso de los archivos de estilos CSS En proyectos enormes, nos encontramos con que nuestros archivos CSS no son 100 lineas, sino 1000 y su peso no es 3KB sino 100KB. Cada segundo de carga es vital, así que voy a dar unos tips de como arreglar esto. ¿Cual es la base de todo esto? Legibilidad a cambio de tamaño y/o segundos al cargar la página. Es decir, cambiaremos la facilidad de lectura e identación de los archivos .css (algo innecesario con un .css en producción) por un ahorro considerable en el peso de nuestros estilos. El selector * selecciona todos los elementos. Este es mi favorito, solo vean: Al principio defines las propiedades que la mayoría de las veces pones, y te ahorras ponerlas en el resto del código. ¿Quien no ha definido en millos de etiquetas margin:0 y padding:0?, ¿Quien o ha puesto text-decoration:none, a cada una de las pseudoclases de <a>? Se pueden resumir las etiquetas en una sola. Background-image, background-position, border-style, border-color... todas esas etiquetas se pueden resumir en una sola. Pasa a ser. Las etiquetas coinciden sin importar la clase o id. Pasa a ser: Se pueden seleccionar diversos elementos separados por comas. Se puede convertir a: CSS no lee los espacios en blanco. ¿Tengo que explicarlo? Usemos el mismo código anterior. Ahora, aplicamos dos puntos mas: Ahora nuestra tarea es elegir y poner en una balanza cuanto queremos cambiar a cambio del otro. Si aplicamos todos, nuestro código va a ser una masa sin sentido. Hay que ser sensatos. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
¿Colocar tu logo como img, como background o como h1? Ha habido mucho debate por esta sencilla pero crucial cuestión. ¿Debe tu logo estar colocado como una imagen entre lineas, o como h1 valiéndose de CSS? En el artículo que veremos a continuación, se barajan algunos argumentos de por qué es más conveniente utilizar la primera opción. ¿Será suficiente para convencerte? ¿Podrá resolver de una vez por todas este intenso debate? Primero que nada, evaluemos dos ejemplos de estos usos. Primero veamos cómo utilizar una imagen: Y ahora veremos cómo utilizar, en cambio, un h1: Tu logo es contenido, y no estilo. El contenido, en el el sentido del término brindado por los estándares web, se refiere a la información que requiere estar presente y ser accesible, independientemente del estilo aplicado, si es que se define un estilo (estamos hablando del CSS). Un logo, entonces, es contenido. Usemos como ejemplo el logo de tu empresa. Sin importar de que color sea el sitio, tu logo se verá siempre igual, ya que el logo es totalmente independiente del sitio en el que será utilizado y del estilo que lo rodeará. Imagina que alguien visita tu sitio en un navegador que no soporta CSS. La presencia del logo, a pesar de no haber estilos, es necesaria. Es por eso que tu logo es contenido, ya que es una representación visual de tu marca. Es posible que el logo haya estado allí incluso antes de que el sitio haya sido imaginado. Ahora, traslada este pensamiento al diseño del sitio en cuestión, y será innegable que el logo es contenido y no estilo. Asi que, si el logo es contenido, debe formar parte del código. Probablemente quieras colocarlo allí de esta manera: Tan simple como eso. Sin importar como estiles tu contenido, el logo persistirá. Utiliza id="logo" para darle cualquier estilo que necesite. Muchas impresoras, para conservar tinta, no imprimen los fondos, lo que significa que cualquier imagen aplicada como fondo se perderá ál imprimir la página. Como mencionamos antes, una imagen inline permitirá que el logo persista, más allá de los estilos. Esto significa que que la hoja de estilo para impresión tendrá el logo incrustado en la página como una imagen que puede imprimir. Además, una imagen inline puede ser redimensionada, lo que no podemos lograr con una imagen de fondo en un h1. Puedes alterar el tamaño de h1, pero no su fondo (al menos no sin utilizar CSS3). Esto significa que no puedes adaptar fácilmente tu logo a diferentes tamaños valiéndote sólo del CSS. Imagina tener que optimizar tu sitio para dispositivos móviles. Una porción de código muy útil para un sitio mobile es: Esto hará que todas imágenes llenen la pantalla del dispositivo móvil, pero a su vez que no se salgan de los márgenes. Si tu logo está insertado como una imagen de fondo, será ignorado por este código. En definitiva, te será mucho más fácil manipular tu logo como img que como fondo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Listado de propiedades CSS compatibles con todos los navegadores Las propiedades CSS son los frágiles pilares sobre los que se sustentan todos los diseños web. Estos pilares son delgados y generalmente andamos poniendo parches para que el diseño soporte la llegada del inquilino de turno, ya sea el Sr. Firefox o la Srta. Google Chrome, o incluso el veterano Internet Explorer. Debido a la exigencia de cada uno de los inquilinos, nos vemos obligados a aprender todos los trucos disponibles para hacer que su estancia en nuestra construcción sea lo más cómoda y agradable posible. A estas alturas, sabemos que estas 10 propiedades CSS son completamente compatibles con todos ellos: 1. color Por contra, todas estas hacen sacar lo mejor de nosotros para conseguir que soporten el peso de cada visita: 1. background Esperemos que poco a poco vayamos viendo menguar esta lista para hacernos la vida más fácil. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS3: Cómo crear gradientes sin usar imágenes Los gradientes CSS3 están disponibles para ser utilizados con los navegadores con Webkit (Safari, Chrome) y Mozilla (Firefox). No son exactamente nuevos, pero es hora de empezar a utilizarlos. Entonces... Necesitas un gradiente, lo creas con CSS3. Pero, ¿Por qué no utilizar imágenes? Simple, estas son las razones: • Brinda mayor flexibilidad Así es como se aplica, dependiendo el estándar: W3C Mozilla (Firefox) Es como W3C, aunque utilizando -moz- Webkit (Safari, Chrome) Algunos ejemplos de utilización: Gradiente lineal Haz clic aquí para ver una demostración del gradiente lineal >> Gradiente radial Haz clic aquí para ver una demostración del gradiente radial >> Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS: Background-size Esta es una propiedad CSS3 que aún no está finalizada, puedes seguir su progreso por la W3C. La propiedad background-size te permite ajustar el fondo, estirarlo hasta donde deseemos, por lo que se puede llamar también background stretch. Podemos usarla, aunque únicamente determinadas versiones de navegadores son soportadas hasta ahora. Sería: • -moz-background-size (Firefox 3.6) Admite valores de ancho y alto tanto en píxeles como en porcentajes. Los valores, obviamente, pueden ser cambiados a los que deseemos. Ejemplo Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
8 técnicas CSS aleatorias que deberías conocer El CSS es la piedra angular de todo diseño web. Su sintaxis, aparentemente sencilla, afecta directamente al aspecto visual de nuestro front-end. En este artículo quiero comentaros ocho técnicas CSS que os resultarán muy útiles en futuros proyectos. Trabajando con medidas relativas Utilizando columnas múltiples Evitando el salto de línea Rotando imágenes Rotando texto Estilizando enlaces según su destino Centrando un elemento Sombra interna Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Efecto gaussiano con CSS3 Desafortunadamente CSS3 no dispone de ninguna característica para poder crear efectos gaussianos, pero podemos emularlo de forma sencilla si definimos un color transparente a la propiedad text-shadow. Por ejemplo, con esta estructura: Añadiendo este código CSS: Como dije anteriormente, la importancia reside en el color, que está definido en transparente. Puedes controlar la suavidad del efecto desde el valor de la propiedad text-shadow (en el ejemplo está a 7px). Internet Explorer 5.5-8 no soporta RGBA, por lo que usaremos el filtro de degradado: Este efecto funciona en los navegadores Internet Explorer versión 8 y 9, Firefox, Safari y Chrome. Podemos ver a continuación un ejemplo de su funcionamiento o descargar el ejemplo: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||