Códigos CSS (Cascading Style Sheets) para webmaster 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 …
Los principales prefijos css: -webkit-, -moz-, -o-, -ms- se anteponen al nombre de la propiedad del estilo para que el navegador web reconozca esa determinada característica. Se aplican normalmente a estilos css3 en experimentación que aún no forman parte de …
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 …
Por defecto la etiqueta hr tiene 1px de borde por sus 4 lados. Si queremos que la línea sea fina, basta con quitar el borde, fijar en pixeles la altura y el color que queramos por medio de background-color. En …
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: …
La propiedad de css “z-index” se utiliza para determinar el nivel o capa en la que se muestra un elemento. El valor de z-index debe ser un número entero, y su valor máximo vienen determinado por la variable que el …
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 …
Si los botones de tu web una vez vista en ipad / iphone son diferentes a como los ves en el resto de navegadores (firefox, chrome, IE…) es por que por defecto esos botones en iOS tienen unos estilos propios …
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 …