Articles of css3

¿Buena forma de crear una curva entre dos divs de gradiente en CSS?

Tengo dos divs con un fondo degradado distinto y necesito crear una curva en forma de S entre ellos. Este es el ejemplo del violín para divs de gradiente: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/ #section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); } Hay un par de cosas que cruzaron […]

¿Por qué no se muestra mi contenido?

Realmente no estoy seguro de por qué mi contenido HTML no se muestra dentro de los divs. Todo parece correcto, simplemente no se muestra el contenido. Aquí hay un fragmento de código: main { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; font-size: 0; /* Removes White space */ } header { width: […]

Pantalla: línea flexible y nueva para subtítulos, ¿cuál es la forma correcta?

En un proyecto al que me uní recientemente tengo una estructura de código como esta: // HTML / React Some text 10 steps March 22nd // CSS .root { display: flex; width: 100%; height: 72px; align-items: center; border-radius: var(–radius-medium)px; border: 1px solid var(–color-gray2); padding: 12px 4px; } .content { display: flex; align-items: center; flex: 1 […]

Diseño de rejilla css sensible con elementos de ancho máximo

Estoy buscando una manera de generar automáticamente una cuadrícula, que siempre llene el espacio disponible, al tiempo que reduce los elementos hasta que se pueda agregar otro. La mayoría de las implementaciones de grilla de respuesta usan algo que vincula esto: grid-template-colums: repeat(auto-fill, minmax(120px, 1fr)); Esto funciona bien, excepto que usa el valor mínimo como […]

Necesita divs para ser empujado hacia abajo usando solo CSS

Tengo este código que utiliza jQuery, pero quiero saber si es posible lograr el mismo resultado utilizando solo CSS. Este es mi código en Codepen: https://codepen.io/dj-smoke-starboy/pen/REOgvj . Estoy trabajando en ello pero hasta ahora, no pude hacerlo funcionar solo usando css. Html: pushed DOWN 10 – Itin 9 – Itin 8 – Itin 7 – […]

¿Cómo se pueden cambiar los colores de una imagen usando CSS3?

Esto funciona: a { color: hsla(0,100%,50%,0.2) } Y esto no: img { color: hsla(0,100%,50%,0.2) } ¿Hay algo como img { opacity: 1 } que permite definir los valores de hsl en una imagen?

Alinear un subtítulo a una imagen

JSFiddle Tengo una imagen dentro de una figura. La imagen tiene el siguiente estilo: height: 300px; max-width: 300px; display: block; margin: 0 auto; La imagen debe estar centrada. El título debajo de la imagen debe estar alineado a la izquierda en la esquina inferior izquierda de la imagen y no debe ser más ancho que […]

establecer la transición css a píxel por segundo

Entonces, ¿es posible configurar la transición CSS para usar la velocidad en lugar de la duración? En este momento, si quiero tener una clase que mueva el elemento de izquierda a derecha de otro elemento, la velocidad varía enormemente. Si tengo un elemento corto y quiero mover un subelemento de izquierda a derecha y la […]

Redimensionar un cubo

Tengo un conjunto de códigos del cubo creado usando CSS. Sin embargo, ¿cómo redimensiono esto en un cubo más grande (por ejemplo, 200px)? Lo he intentado pero cada vez que lo bash, sale de posición … .mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px; } .square { width: 100px; height: […]

Fondo de contenedor CSS Bootstrap

Estoy usando bootstrap y me preguntaba cuál sería una forma limpia de darle un fondo a mi contenedor. Estoy usando el container clase bootstrap, no container-fluid . Bootstrap doc establece claramente que no debo anidar contenedores, ¿cuál es la alternativa para lograr este objective? Si configuro un fondo para mi container los márgenes izquierdo y […]