Aprende CSS3 con ejemplos prácticos. A continuación una serie de post con códigos CSS3 (Cascading Style Sheets) para webmasters con los que espero que amplíes y mejores tus conocimientos en desarrollo web.
A continuación un ejemplo en css3 para conseguir un efecto temblor / vibración de un elemento, en este caso podéis ver un demo situándote encima del logo de bufa.es. Es un ejemplo básico, que podéis customizar a vuestro gusto… en …
Escalar un imagen utilizando solo CSS3 es realmente sencillo empleando el método scale() de transform. Es este ejemplo vamos a escalar la imagen un 50% más de su tamaño original al situarnos encima de ella (hover). Con este método podemos …
Como conseguir un ejecto cortina, en el que el color de fondo se va transformado en un degradado de colores en varias columnas… A continuación explico el funcionamiento para hacerlo en css3 sin utilizar imágenes, solo utilizando la función linear-gradient …
Estilo para rotar texto u otro elemento en css, usando la propiedad “transform” rotate con los prefijos de los de navegadores web más populares (Safari, Firefox, Opera, IE): .rotar { /* Chrome y Safari */ -webkit-transform: …
A continuación un listado de las @media queries más comunes de CSS3 para hacer responsive web desing: adaptar vuestras páginas web a los diferentes dispositivos móviles (Smartphones, iPads, iPhones) en sus diferentes posiciones portrait (vertical) and landscape (horizontal): /* Smartphones …
Podemos dar una determinada opacidad de color a un background utilizando el formato RGBa de CSS3, que es compatible con los navegadores modernos (chrome, firefox 3+, safari 3+, Opera 10+, IE9). En el siguiente ejemplo vamos a dar una opacidad …
En español sería algo así como: “diseño web adaptable” o “diseño web flexible“. Esta actualmente muy de moda en la web, y consiste en adaptar fácilmente el diseño de una web a los diferentes dispositivos que usamos para visitarla, como …
Algunos ejemplos utilizando solo código css para crear formas con aspecto de triángulo: Triangulo CSS (pico superior) .triangulo_sup { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; …
Alguna vez te has preguntado ¿cómo hacer una sombra interior utilizando solo CSS3? es bastante sencillo en realidad! Utilizaremos la propiedad “box-shadow“. Vamos a aprovechar para crear un menu redondeado con una sombra interior en la parte superior. 1º el …
Usando CSS3 Media Queries podemos detectar el navegador, y portanto cargar una determinada hoja de estilos para cada dispositivo. Para detectar el ancho utilizamos la propiedad device-width para controlar la altura junto con los prefijos min/max para controlar la altura …