Articles of css3

Usar el atributo de datos HTML para configurar la URL de la imagen de fondo de CSS

Planeo construir una galería de fotos personalizada para un amigo y sé exactamente cómo voy a producir el HTML, sin embargo, estoy teniendo un pequeño problema con el CSS. (Preferiría que el diseño de la página no dependa de jQuery si es posible) Mi pregunta se refiere a: Data-Attribute en HTML Background-image en CSS Estoy […]

Problema de Webkit CSS Animation: ¿persiste el estado final de la animación?

Dada la siguiente animación CSS3 …. .drop_box { -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes drop { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(100px); } } Hello world El texto de Hello World se anima como se esperaba, disminuyendo 100px. Sin embargo, al final de la animación, vuelve a su posición original. […]

Emular CSS3 border-radius y box-shadow en IE7 / 8

Estoy trabajando en HTML para una pequeña aplicación web; el diseño requiere un área de contenido con esquinas redondeadas y una sombra paralela. He podido producir esto con CSS3, y funciona sin problemas en Firefox y Chrome: Sin embargo, Internet Explorer 7 y 8 (que no son compatibles con CSS3) es una historia diferente: ¿Existe […]

Cómo evitar el renderizado de texto de Webkit durante la transición de CSS

Estoy usando transiciones CSS para la transición entre estados transformados CSS (básicamente, la transición de la escala de un elemento). Observé que cuando el elemento está en transición, el rest del texto de la página (en Webkit) tiende a alterar ligeramente su renderizado hasta que finaliza la transición. Fiddle: http://jsfiddle.net/russelluresti/UeNFK/ También noté que esto no […]

¿Cómo tener múltiples transiciones de CSS en un elemento?

Es una pregunta bastante sencilla, pero no puedo encontrar una documentación muy buena sobre las propiedades de transición de CSS. Aquí está el fragmento de CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color […]

CSS: animación de desplazamiento CSS puro

He estado buscando una forma de desplazarme hacia abajo cuando hago clic en un botón que se encuentra en la parte superior de una página usando solo CSS3. Así que encontré este tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/ Demostración: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/ Pero es un poco demasiado avanzado para mis necesidades ya que solo quiero que el navegador se desplace con […]

Cómo tematizar en lesscss

Como estoy en un ciclo de preproducción para desarrollar una aplicación, a menudo cambio de visual para convergir a lo que validará el cliente. Algunos visuales de la misma página (llámenos temas) serían interesantes de guardar para poder presentarlos rápidamente al cliente. La forma en que encontré es crear una clase de apariencia que agregué […]

Alinear texto en línea inclinada

¿Es posible hacer texto alineado a la izquierda en una línea inclinada ? su alineación debe seguir la imagen inclinada inclinada con soporte requerido para IE9 +? Mi código de ejemplo: img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet […]

Regla de CSS basada en el contenido

Me gustaría aplicar un estilo diferente a todos los anclajes que contienen una palabra específica. ¿Se puede hacer en CSS puro? Está bien si es solo CSS3.

¿Cómo se agregan las pseudo clases a los elementos usando jQuery?

En CSS, al pasar el mouse sobre un elemento, puede especificar vistas para él usando la pseudo clase: hover: .element_class_name:hover { /* stuff here */ } ¿Cómo se puede usar jquery para agregar o “encender” esta pseudoclase? Normalmente, en jQuery, si quieres agregar una clase, debes hacer lo siguiente: $(this).addClass(“class_name”); He intentado “hover” pero esto […]