Articles of css3

Detectando el soporte ‘transform: translate3d’

¿Alguien sabe cómo detectaría la transform: translate3d(x,y,z) soporte de transform: translate3d(x,y,z) está disponible? Mi problema es que quiero usar translate3d todos los navegadores donde sea compatible, ya que tiende a usar la aceleración de hardware y, por lo tanto, es más suave para la animación, y luego recurre a donde no.

¿Cómo se logran las esquinas de borde CSS biseladas en lugar de las esquinas redondeadas?

Con la propiedad CSS border-radius , puedo tener una esquina redondeada curvilínea y redondeada al final. .boxLeft{ border-right: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 10px 0; } .boxRight{ border-left: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 0 10px; } Pero quiero un rincón de borde como la imagen […]

Zebra rayas una tabla con filas ocultas con CSS3?

Tengo una mesa             Intento establecer las rayas de la tabla para usar los selectores enésimo, pero parece que no pueden descifrarlo. table #mytable tr[@display=block]:nth-child(odd) { background-color: #000; } table #mytable tr[@display=block]:nth-child(odd) { background-color: #FFF; } Estoy bastante seguro de que estoy cerca … no puedo creerlo. alguien pasa a […]

Desbordamiento de texto: elipsis no funciona en IE

En esta página hay algunos enlaces en la barra lateral izquierda que se recortan con: .widget-area .textwidget li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } En Firefox / Chrome se muestra correctamente: Lamentablemente, Internet Explorer 8/9/10 …: El problema no es el soporte de IE 10 para desbordamiento de texto: puntos suspensivos … ¡por […]

Forma doble curvada

Actualmente estoy intentando generar una forma de ‘fondo fantasmal ondulado’. Esta forma contiene dos curvas dobles: Aunque la parte inferior de esta imagen creo que la retrata en mejores imágenes. Mi código Mi bash actual de generar esta forma estaba usando pseudoelementos y overflow: hidden , aunque esto no permite un fondo degradado (requeriría un […]

enésimo hijo por cada dos filas de la tabla

Necesito hacer que cada dos filas de mi mesa sean grises y preferiría usar nth-child si fuera posible. Me he metido con el probador nth-child de Chris Coyier, pero todavía no lo puedo conseguir. Necesito la siguiente fórmula: 1,2 – grey 3,4 – white 5,6 – grey 7,8 – white 9,10 – grey y así. […]

CSS selecciona el primer elemento con una cierta clase

¿Cuál es la syntax para seleccionar el primer elemento con una cierta clase? Especifique si ese método de selección es parte de CSS3 o CSS2.1.

¿Hay algo así como un selector de CSS “hermano todo incluido”?

Mi HTML: Doggies Froggies Cupcakes Piggies Un selector de hermanos todo incluido (como me gustaría que fuera), cuando se usa para seleccionar a los hermanos de green_guys, seleccionaría los perritos cupcakes y piggies. Otros Selectores: El selector + (también conocido como selector de hermanos adyacente ) solo seleccionaría los cupcakes: .green_guys + p { /* […]

La diferencia entre justify-self, justify-items y justify-content en CSS Grid

Estoy realmente confundido. Al buscar recursos y documentación en línea, la mayoría de la documentación de estas propiedades parece hacer referencia a Flex-box, no a la cuadrícula. Y no sé cómo aplicable la documentación para las propiedades equivalentes en Flex-box es a la cuadrícula. Por lo tanto, he intentado hacer referencia a https://css-tricks.com/snippets/css/complete-guide-grid/ , que […]

CSS3 – ¿Cómo estilo el texto seleccionado en textareas y entradas en Chrome?

EDITAR: Como @geca señaló en los comentarios, este es un error conocido de WebKit . ¡Esperemos que se solucione pronto! El pseudo-elemento ::selection permite a uno darle estilo al texto seleccionado. Esto funciona como se esperaba pero no para las áreas de texto y las entradas en Google Chrome 15. (No estoy seguro de si […]