Articles of css3

¿Qué selectores de CSS3 realmente admite jQuery, por ejemplo: nth-last-child ()?

De acuerdo con http://api.jquery.com/category/selectors/ podemos usar una gran cantidad de selectores de CSS en jQuery, pero por ejemplo :nth-last-child() no se menciona allí. Sin embargo, cuando pruebo lo siguiente (con jQuery 1.7.1 desde Google), realmente funciona en Firefox, Chrome e IE 9, pero no en IE 9 en el modo de emulación IE 8: $(‘li:nth-last-child(2)’).css(‘color’, […]

Rincón inclinado en caja de CSS

He estado jugando con CSS por poco tiempo y estoy tratando de tener una caja normal, pero con la esquina superior izquierda cortada en un ángulo de 45 grados. No es una pequeña cantidad tampoco; Estoy viendo un corte de esquina bastante grande en ese ángulo. Este efecto: ¿Cómo debo hacerlo?

Cómo revertir una animación en el mouse después de colocar el mouse sobre ella

Por lo tanto, es posible tener una animación inversa en el mouse, como: .class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } pero, al usar la animación @keyframes, no pude hacer que funcionara, por ejemplo: .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: […]

Retardo: desplázate en CSS3?

¿Hay alguna manera de retrasar el evento: Hover sin usar javascript? Sé que hay una manera de retrasar las animaciones, pero no he visto nada sobre el retraso del evento: Hover. Editado … Lo siento, debería haber incluido esto para empezar … Estoy construyendo un menú como hijo de suckerfish. Me gustaría simular lo que […]

Animaciones CSS con retraso para cada elemento secundario

Intento crear un efecto de cascada aplicando una animación a cada elemento secundario. Me preguntaba si hay una mejor manera de hacerlo que esto: .myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards; } .myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards; } .myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards; } .myClass img:nth-child(4){ -webkit-animation: myAnimation 0.9s […]

Bordes definidos con desdibujado de filtro CSS3

Estoy borrando algunas imágenes con este código img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } Sin embargo, los bordes de la imagen se borran. ¿Es posible desenfocar la imagen, manteniendo los bordes definidos? ¿Como una mancha borrosa o algo así?

Transformación CSS3: rotar; en IE9

Tengo un elemento que debe ser vertical en un diseño que he hecho. Tengo el CSS para que esto funcione en todos los navegadores excepto IE9. Usé el filtro para IE7 e IE8: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Sin embargo, esto parece hacer que mi elemento sea transparente en IE9 y la propiedad de “tranform” de CSS3 no parece […]

Consulta de medios CSS para apuntar solo al iPad y al iPad

Hola, estoy trabajando con múltiples dispositivos de tableta, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad, etc. iPad – 1024 x 768 Almohadilla LG – 1280 x 768 Galaxy Tab – 1280 x 800 Quiero apuntarme al iPad solo con la consulta de medios de CSS3. Dado que el ancho del dispositivo de LG y […]

¿Qué significa @media screen y (max-width: 1024px) en CSS?

Encontré este fragmento de código en un archivo CSS que heredé, pero no puedo entenderlo: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Específicamente, ¿qué está sucediendo en la primera línea?

¿Cómo puedo crear una “cola de información sobre herramientas” usando CSS puro?

Me encontré con un buen truco de CSS. Mira el violín … .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } Cool Trick: How do I get this effect with only CSS? Esto crea un […]