CSS 3

CSS, que significa Cascading Style Sheet, u hoja de estilo en cascada. Es el lenguaje estándar utilizado para dar los estilos o apariencia a las páginas web. Los estilos son heredados por los elementos hijos o anidados en un efecto cascada de hay el nombre del lenguaje. Se compone de una extensa lista de propiedades que asignadas a los elementos html (por el nombre de etiqueta, o habiendoles asignado previamente un atributo id o una clase) de un documento, le aportaran la apariencia que visualizaremos por pantalla. Lo más habitual es colocar estos estilos en un documento separado con extensión .css y enlazarlo con un link en el <head> del documento. Aunque hay otras formas de inyectar el css, menos recomendadas como puede ser inline y con javascript.

Para lo que aquí nos ocupa que es el Diseño Web, el CSS es seguramente el ingrediente más importante para aportar la parte estetica del documento. Pues si quieres profundizar en tus conocimientos, haz scroll y visita todas las páginas que tengo preparadas....

Lista Propiedades CSS

Listado completo de propiedades CSS. El lenguaje CSS esta en continua evolución y seguramente en el tiempo que leas este listado, ya se hayan incorporado nuevos modulos al lenguaje, aún así la lista es muy completa.

lista_prop_css

Propiedad display flex

Explicación completa de la propiedad display flex de CSS3, magnifica propiedad que nos brinda las herramientas necesarias para maquetar web adaptables a cualquier dispositivo.

prop_display_flex

Propiedad display grid

Explicación completa de la propiedad display grid de CSS3, propiedad que llego para facilitarnos sobremanera la maquetación web y conseguir la alineación vertical de los elementos html.

prop_display_grid

Propiedad transition

Podemos hacer transicionar las propiedades css de un elemento de unos valores a otros distintos con la propiedad transition de CSS. Con esta propiedad podremos crear bonitos efectos y dinamizar las páginas.

prop_transition

Propiedad animation

Todavía más potente que la propiedad transition, con la propiedad animation de CSS, puedes conseguir, que los elementos html, pasen de un estado a otro y a otro, como tu quieras, pudiendo construir prácticamente una sucesión de estados del elemento.

prop_animation

Propiedad transform

Con la propiedad transform, combinada con transition y transform podemos conseguir, dinámizar nuestras páginas solo con CSS.

prop_transform

Propiedad filter

Valores y usos de la propiedad filter de CSS, galería con ejemplos de todos los valores que podemos asignarle a esta propiedad.

prop_filter

Botones sociales

Analisis de la importancia de las redes sociales para los sitios web y ejemplos prácticos de donde y como podemos ubicarlos en nuestras páginas.

botones

Contenidos animados

Diferentes formas de presentar contenidos, con animaciones, contenido expandible.

contenido_animado

Animaciones CSS

Más ejemplos prácticos del uso de las propiedades transition, animation y transform, para crear efectos y darle dinámismo a nuestras páginas.

animaciones_css

Animaciones sobre texto

Con CSS, podemos crear bonitos efectos sobre el texto o cualquier otro elemento html.

texto_hover

Animaciones sobre menus

Sobre los menus de nuestros sitios web, solo con CSS, podemos crear interesantes y variados efectos que les proporcionan dinámismo.

iconos_hover

Ventanas emergentes

Explicación detallada de como podemos construir para nuestros sitios, las ventanas emergentes (modales), y los bocadillos (tooltip), para mostrar información a los usuarios.

modal_tooltip

Modo claro/oscuro

Explicación detallada de diferentes maneras de implementar el modo claro/oscuro para tu sitio web.

modo_oscuro

Cookies