Ejemplos CSS

< Contiene 47 ejemplos >

Qué vas a encontrar en esta sección:

Ejemplos CSS – Códigos de ejemplo ya escritos en CSS para páginas web

Lista de ejemplos: Ejemplos CSS

Diseño de menus y submenus con CSS
Uso de CSS para crear menus con submenus y menus desplegables. CSS avanzado.
Diseño de formularios con CSS y HTML
Los formularios son parte importantes, pero poco elegantes, de muchos sitios. Aprendamos a diseñar formularios atractivos usando CSS y HTML.
Menú rollover con CSS y una sola imagen
Se enseña crear un menú que cambia de color cuando posamos el ratón sobre él y cuando lo presionamos, con sólo una imagen.
CSS: buenas prácticas
Sumario de trucos y buenas prácticas para diseñar con CSS.
Maquetar una web a 3 columnas con CSS
Explicación sobre como diseñar una página web de 3 columnas usando CSS y HTML.
Como usar distintos colores en un select menu con CSS
Podemos personalizar nuestros select menu asignándoles clases a las opciones del menú, como prueba añadiremos distintos colores de fondo en el desplegable.
Capas visibles e invisibles con CSS
El uso de capas en CSS junto a JavaScript te permiten organizar la información de una manera diferente y dinámica.
Utilizar un loading o imagen de carga con CSS
Como usar una imagen animada de carga para amenizar la espera de tus usuarios.
Menu desplegable con CSS y HTML
Un recurso muy utilizado en web son los menús horizontales y verticales, veamos como hacer menus desplegables con CSS y HTML.
Crear esquinas redondeadas con CSS y sin imagenes
Hay muchas maneras de crear esquinas redondeadas con CSS, aquí explicamos dos a base de CSS y sin imágenes.
CSS Sprites para efecto rollover en botones e imagenes
Explicación de la técnica CSS Sprites para lograr un efecto rollover (mover el ratón sobre un icono y este cambie dándo a entender que es un botón presionable).
El uso de menús en nuestro sitio web y su influencia en la navegación
En este artículo nos enfocamos en el estudio del CSS para lograr, paso a paso, la realización de un menú adecuado al diseño de nuestras páginas web.
Guia CSS de la propiedad Float y Clear para estructurar una web
Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos aprender para poder lograr casi todas las estructuras posibles son Float y Clear.
Código listo para hacer un menú desplegable con XHTML y CSS
Menú emergente desarrollado exclusivamente con XHTML (o HTML) y CSS.
Google Font Directory: tipografías libres para la web
Vamos a ver como embeber una tipografía en tu página desde Google para que el usuario vea la web tal y como la diseñes, aunque no sea una fuente de uso común.
Crear una galería de imágenes solo con CSS y HTML
Presentación de un código hecho de una galería de imágenes desarrollada completamente en CSS y HTML, explicada de forma que puedan realizarse las modificaciones que se deseen.
La especificidad en Hojas de Estilo CSS
Un pequeño pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de la especificidad en CSS, su influencia y
Fondos con gradientes – degradados con CSS3
En este artículo explicamos las dos formas que hay de hacer fondos con gradientes en CSS3, con códigos de ejemplo para entender mejor el procedimiento.
Animar texto con CSS3 y WebKit para Chrome y Safari
Explicación del uso de las etiquetas pulse y bounce, integradas dentro del motor WebKit (Chrome y Safari) para animar textos con CSS· puro.
La propiedad overflow de CSS en la maquetación de páginas web
De gran utilidad y poco utilizada, la propiedad CSS2 "overflow" puede resultar de gran utilidad en la maquetación de páginas web.
Soluciones a los problemas de visualización en Internet Explorer
Damos un repaso a las técnicas más usadas para lidiar con la tarea de conseguir que nuestra web se vea bien en todos los navegadores, poniendo especial atención a Internet Explorer, puesto que es el
Cambiar el estilo CSS de una web dinámicamente. Parte I – JavaScript
Vemos una primera parte de este mini-manual que vamos a tener sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta primera parte vemos como hacerlo con JavaScript.
Cambiar el estilo CSS de una web dinámicamente. Parte II – PHP
Vemos la segunda parte de este mini-manual que vamos a tener sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta segunda parte vemos como hacerlo con PHP.
Menú y galería de imágenes tipo slide con CSS y HTML
Como conseguir la simulación de un "efecto slide" en menús y galerías de imágenes, solo con CSS y HTML.
Como hacer fondos “elásticos” para títulos y menús
Como hacer para que un fondo de imágenes se adapte a la longitud del texto, siguiendo dos métodos diferentes. Ejemplo en títulos y en menús.
Simular frames (marcos) con HTML y CSS
Efecto muy sencillo donde se simula la utilización de marcos, y que solo se realiza con HTML y CSS.
Cambiar el estilo CSS de una web dinámicamente. Parte III – Las horas del día
En esta tercera parte vamos a empezar a ver como cambiar el estilo CSS de una web dinámicamente en función de las horas del día.
CSS avanzado: la propiedad “content”
Una de las propiedades menos conocidas de CSS 2.1, pero que tiene un potencial enorme. En un futuro no muy lejano, cuando la mayoría de los navegadores respeten los estándares, su uso seguramente se incrementará.
CSS avanzado: las propiedades counter-reset y counter-increment
Estas propiedades son de las de mayor complejidad en CSS, pero que pueden resultar muy útiles para algunos tipos de trabajos, sobre todo en maquetación de textos.
Ejemplo de utilización de propiedades CSS avanzadas
Allgunos ejemplos de utilización de las propiedades CSS avanzadas "content", "counter-reset" y "counter-increment".
CSS avanzado: la propiedad display (primera parte)
A pesar de ser una propiedad conocida, generalmente se encuentra subutilizada por parte de los diseñadores, muchas veces debido al desconocimiento de todo su potencial.
CSS avanzado: la propiedad display (segunda parte)
La propiedad "display" puede utilizarse para mostrar los elementos como si se trataran de tablas o como partes de tablas.
CSS avanzado: la propiedad “white-space”
Una propiedad poco utilizada, que permite al diseñador manejar los espacios en blanco y los saltos de línea de los textos incluidos en el código HTML.
Algunos trucos CSS simples para la maquetación de páginas web
Ejemplos CSS sencillos para maquetación de páginas web.
Propiedades básicas para el manejo de CSS3: Textos (parte 1)
Primera parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de textos.
Propiedades básicas para el manejo de CSS3: Capas (parte 2)
Segunda parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de capas (div).
Propiedades básicas para el manejo de CSS3: Fondos (parte 3)
Tercera parte de una serie que expondrá las propiedades más utilizadas de CSS3, en esta parte nos enfocamos a la estilización de fondos.
Menú multicolor con XHTML y CSS
Ejemplo de menú en el que cad ítem tiene un color diferente, empleando solo XHMTL y CSS.
Columnas múltiples con CSS3: column-count, column-gap, column-width y column-rule
Vemos como hacer con CSS3 columnas múltiples, un método muy sencillo de crear una estructura en columnas para tu web.
Expansión de una imagen de fondo con CSS
En este artículo explicamos dos métodos CSS distintos para expandir la imagen de fondo y tome el tamaño de la ventana del navegador.
¿Cómo cambiar el estilo de nuestro sitio dinámicamente? Parte IV – Final
Vemos la última parte de este mini-manual sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta última entrega terminamos el ejemplo de las horas del día.
Sombras y dimensiones con CSS3 – box-shadow
En este artículo practicamos con propiedades CSS3 para agregar sombras a las imágenes y efectos de profundidad al sitio.
CSS: Correcto uso de capas flotantes (float) con overflow
En este artículo explicamos como corregir el uso de flotantes dentro de un contenedor con la propiedad overflow
CSS Media queries
En este artículo explicamos como adaptar nuestros sitios al tamaño de la ventana del navegador y de los dispositivos mediante los "media queries" de CSS.
Crear botones con propiedades CSS3
En este artículo prácticamos la estilización de botones con CSS3, utilizando gradientes, sombras y bordes
Pseudo elementos CSS “:before” y “:after”
En este artículo damos a conocer los aspectos generales sobre el uso de los pseudo elementos ":before" y ":after", así como su implementación en CSS.
Formas de crear un texto vertical con CSS y HTML
Abordamos los distintos métodos que existen para colocar un texto de manera vertical en nuestra página.

Ejemplos CSS

Lista de ejemplos: Ejemplos CSS

Manuales y Artículos Web