CSS

Forma fácil de crear con CSS (más concretamente con la propiedad -webkit-text-stroke) un texto con un determinado grosor de trazo y color. Ántes para conseguir este efecto teníamos que tirar siempre de programas de retoque fotográfico y insertarlo como una […]

Leer más...

Método sencillo para convertir cualquier foto/imagen en blanco y negro (escala de grises) usando la propiedad «filter» de css sin tener que usar photoshop u otro programa similar: img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } Con este filtro se fuerza al […]

Leer más...

Código css para crear un background con líneas diagonales sin utilizar imágenes usando la función repeating-linear-gradient. Puedes editar el código css a tu gusto y conseguir ese efecto cebra que desees para crear las líneas de más o menos grosor […]

Leer más...

Es posible dar estilos css a elementos HTML que tienen unos determinados atributos o valores de atributos. La sintaxis css de uso basicamente es: [atributo operador «valor»] A continuación unos ejemplos de uso con los diferentes operadores para comprender mejor […]

Leer más...

Todo un clásico de css. Quien no ha maquetado algún triángulo y ha querido aplicarle el efecto «redondeado» a los bordes. A continuación una forma de hacerlo jugando con rotate, skewX, scale y translate: .triangulo-redondeado, .triangulo-redondeado:before, .triangulo-redondeado:after { position: relative; […]

Leer más...

Un ejemplo de como voltear horizontalmente una foto o otro elemento con css3 usando scaleX. .rota-horizontal{ -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } Para IE aplicamos el filtro FlipH. Un ejemplo: See the Pen CSS: rotar […]

Leer más...

A continuación un ejemplo de animación para conseguir en CSS3 un efecto de bola o circulo girando de forma circular indefinidamente: .contenedor-circulo{ width:250px; height: 250px; margin:0 auto; text-align:center; background: #E5E5E5; border-radius:50%; } .circulo { display:inline-block; width: 50px; height: 50px; margin-top: […]

Leer más...