Articles of css3

¿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 […]

Transición del color de fondo

Estoy tratando de hacer un efecto de transición con el color de fondo al pasar el ratón por los elementos del menú, pero no funciona. Aquí está mi código CSS: #content #nav a:hover { color: black; background-color: #AD310B; /* Firefox */ -moz-transition: all 1s ease-in; /* WebKit */ -webkit-transition: all 1s ease-in; /* Opera */ […]

¿Puedo orientar a: antes o después del pseudo-elemento con un combinador de hermanos?

¿Hay alguna razón por la cual este CSS no funciona? http://jsfiddle.net/6v5BZ/ a[href^=”http”]:after { content:””; width:10px; height:10px; display:inline-block; background-color:red; } a[href^=”http”] img ~ :after { display:none; } .. en este HTML? Test La idea es tener un pseudo-elemento en la coincidencia de tags de anclaje. Pero no quiero que se aplique a las tags de anclaje […]

Usar calc () con tablas

Estoy tratando de obtener una tabla con td s de ancho fijo y td s de ancho variable. Estoy usando la función CSS calc() , pero de alguna manera parece que no puedo usar % en las tablas. Entonces eso es lo que tengo hasta ahora: 1 Title Interpret Album Year YouTube Cómo lo veo, […]

Crear una grilla de mampostería con flexbox (u otro CSS)

Me gustaría lograr un efecto de cuadrícula en CSS con elementos que tengan el mismo ancho de tamaño pero no de altura. Me gustaría que el elemento subyacente siempre esté a 50px del de abajo, lo que sea que esté a continuación. Intenté con carrozas, pero ese error. Así que lo intenté con Flex, pero […]

¿Es posible un radio de borde cóncavo?

Aquí hay un ejemplo simple y convexo. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } Sin embargo, quiero un radio de frontera cóncavo. Intenté hacer que el radio del borde fuera negativo, pero esto no funcionó. Ejemplo de cóncavo / convexo:

Imagen de fondo en fotogtwig clave no se muestra en Firefox o Internet Explorer

Tengo varias animaciones en mi sitio que me acabo de dar cuenta de que ni siquiera aparecen en Firefox o Internet Explorer. Tengo la background-image dentro de los fotogtwigs clave. Lo hago porque tengo diferentes imágenes en diferentes porcentajes con la animación. ¿Por qué no se muestra la background-image dentro de los fotogtwigs clave en […]

CSS: Cómo decir .class: último-de-tipo

Posible duplicado: ¿Cómo selecciono el “último hijo” con un nombre de clase específico en CSS? Como dice el título, quiero dirigir las reglas de CSS al último elemento de un tipo determinado que tiene cierta clase. El siguiente código funciona perfectamente: div:last-of-type { margin-right:0; } pero quiero algo como div.class:last-of-type { margin-right:0; } Como hacer […]

¿Qué hace un en CSS?

He usado CSS antes y me encontré con el siguiente estilo CSS, no tengo ni idea de lo que hace. a[href^=”http:”] { background: url(img/keys.gif) no-repeat right top; } a[href^=”http://mysite.com”], a[href^=”http://www.mysite.com”] { background-image: none; padding-right:0; }