El poder de CSS combinado con algo de creatividad puede dar resultados sorprendentes. La idea es muy básica, usar los pseudoelementos :before y :after para crear iconos… pero el poder de CSS da para mucho más.
Seguir leyendo
Iconos con CSS
Categoría » CSS7
Aplicar estilos CSS a campos [radio] y [checkbox]
Un problema típico de los formularios es dar estilos personalizados a los elementos input de tipo radio y checkbox. Aunque se les pueden aplicar algunas propiedades de CSS como width, height o box-shadow, lo cierto es que poco más se puede hacer con estos elementos.
Flip Cards o Tarjetas Giratorias con CSS3
Un efecto cada vez más usado el de las “Flip Cards”, muy vistoso y con muchas posibilidades, para muestra este codepen de Virgil Pana, donde exprime esas posibilidades al máximo.
Nosotros vamos a ver algo más simple y no usaremos Javascript para hacer los efectos de giro, solo usaremos transiciones de CSS3.
Efecto “Before / After” Responsive
HTML5 incorpora nuevos tipos de input. Uno de ellos, range, es el protagonista de esta demo. Con él podemos seleccionar y modificar valores dentro de un rango. En este artículo vamos a usar HTML HTML5, CSS, CSS3 y algo de Javascript.
Diseño responsive con [@media] queries de CSS3
El Diseño Web Adaptativo o RWD (Responsive Web Design) es un estándar recomendado por el W3C desde junio del 2012 cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Uno de los pilares de esta filosofía es la regla @media de CSS3.
Seguir leyendo
Comentar código
Comentar el código sirve para inutilizarlo sin dejar de tenerlo. Lo que le decimos al navegador es que no ejecute el código que hemos comentado.
Esto nos puede venir bien para hacer pruebas comentando algunas partes del código, o para poner enunciados o descripciones explicativas.
Seguir leyendo
Estructura básica de CSS
CSS son las siglas en inglés de Cascade Style Sheet. La traducción al castellano sería Hoja de Estilo en Cascada y es lo que utilizaremos para aplicar estilos en nuestras páginas web.
Seguir leyendo