Desde hace algunos años se encuentran disponibles ciertas tecnologías que permiten la separación del contenido y el diseño de los sitios web. Sin embargo estas tecnologías no han sito aprovechadas tan ampliamente como se supondría al conocer sus ventajas inherentes, esto se debe principalmente a la falta de difusión de su existencia y sus ventajas, tanto entre los creadores de páginas web como entre las empresas, personas e instituciones que las utilizan. CSS dará la libertad a los expertos del diseño --artistas, diseñadores gráficos y tipógrafos-- de determinar los aspectos estéticos de un sitio, independientemente de su contenido. Dan Shafer
Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países. No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.
Nota: Este documento contiene algunos ejemplos que ilustran soluciones accesibles en CSS pero también ejemplos desaconsejados que ilustran lo que los desarrolladores de contenidos no deben hacer. Los ejemplos desaconsejados están resaltados y los lectores los deben leer con precaución -- se incluyen únicamente a título de ilustración.
Como hacer que funcione en IE6 IE6 no es capaz de interpretar bien las propiedades de los PNGs transparentes. Necesitamos el siguiente hack para que muestre correctamente la transparencia: h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’); }
IE no interpreta este comando por lo que necesitamos una nueva manera de hacer este trabajo en este explorador. Tomemos un ejemplo rápido, necesitamos aplicar esto a un 'div' con 'id="wrapper"':
22 2006 Controlando tus fuentes con CSS
Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior. No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto. En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página. Creamos un contenedor al que daremos la propiedad display: table
pagina con ejemplos de diseño web
Vamos a crear un menú híbrido que corra horizontalmente a través de la ventana. Tiene dos niveles de navegación (en nuestro ejemplo, los tópicos principales y sus páginas relacionadas). Nuestro menú permitirá acceso dropdown a todas las páginas en ambos sentidos de navegación, exhibiendo las presentes opciones en el área del tópico seleccionado constantemente, manteniendo al usuario enterado del lugar del site en que se encuentra, haciéndole limpia y ligera su elección.
Pero el caso es que podemos ir más allá de estar permanentemente informados y encontrarnos con Twitter Timer, un bot de Twitter que nos recordará las citas y eventos en el plazo de tiempo que le indiquemos a través de un mensaje directo. El mensaje directo que le enviaremos tiene esta estructura: “d timer (número de minutos) (recordatorio)”, con lo que si indicamos que en cinco minutos nos avise de que tenemos que llamar a un amigo, a los cinco minutos se nos enviará dicho recordatorio. Un ejemplo nos lo pone desde el propio perfil del bot: ‘d timer 45 call mom’.
Uno de las obsesiones de Sentido Web es que la mayoría de la información se encuentra en inglés. A raíz de esta lista, hemos realizado, junto a José Luis Antúnez, esta selección de los que consideramos los mejores artículos sobre CSS y estándares web en español.
CSS desde CERO. El tutorial está pensado para que pueda ser desarrollado por una persona que conoce solo HTML. El objetivo de este sitio es poder aprender CSS en forma sencilla viendo un concepto teórico, luego algunos ejercicios resueltos y por último y lo más importante efectuar una serie de ejercicios. Puede desarrollar los ejercicios en el sitio, probarlos y ver los resultados. Se recomienda primero ver el detalle del tema, pasar posteriormente a los problemas ya resueltos del tema tratado (podemos hacer modificaciones sobre dicho problema) y finalmente resolver los ejercicios propuestos.
Si quieren hacer sus propios pinitos con las hojas de estilo en cascada (CSS), mis archivos en Blogpocket contienen un buen número de recursos para comenzar. Y no dejamos de incorporar enlaces con los mejores trucos y tutoriales. Como por ejemplo, para principiantes, una extraordiaria explicación de cómo se colocan elementos utilizando CSS. Para aquellos que ya tengan una idea de lo que es CSS, pueden examinar los siguientes enlaces (Vía etc.): * Cómo realizar gráficos de datos * Cómo apilar elementos * Cómo crear líneas de introducción en los textos
Las especificaciones para CSS3 traen consigo interesantes características, entre ellas, la posibilidad de modificar el color del texto cuando es seleccionado (por defecto azul) por medio del pseudo-elemento “selection“. Su forma de aplicación es sencilla, por ejemplo, para aplicarlo al texto de toda la página se tiene:
Problemas con css al imprimir
Efectos con imágenes y texto
Para esquinas redondeadas tutorial css
Barras de navegación horizontal o vertical
sobre posicionamiento de elementos
Comments