Articles of css

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

Eliminar el relleno para un elemento vacío.

Estoy generando una página para un sitio de portal próximo, y tengo un elemento HTML con contenido opcional. Me gustaría que el elemento no se renderice si está vacío, pero al agregarle algo de relleno, se renderiza. ¿Cómo agrego relleno al contenido, pero solo si el contenido está presente? .someElement{padding-top: 5px;} HTML en cuestión: With […]

jquery show ocultar cada div onclick

Tengo un número dynamic de divs que se generan a través de asp.net. Necesito mostrar cada contenido div haciendo clic en su encabezado. He intentado esto $(function () { var myHead = $(“.toggle-container”).find(“.toggle-header”); var myBody = $(myHead).parent().find(“.toggle-content”); $(myHead).click(function () { if ($(myBody).css(‘display’) === ‘none’) { $(this).children(‘i’).removeClass(‘icon-chevron-sign-down’).addClass(‘icon-chevron-sign-up’); $(this).parent().find(“.toggle-content”).slideDown(“slow”); } else if ($(myBody).css(‘display’) === ‘block’) { $(this).children(‘i’).removeClass(‘icon-chevron-sign-up’).addClass(‘icon-chevron-sign-down’); […]

Bootstrap no funciona localmente

Tengo un problema al intentar utilizar Bootstrap localmente. He intentado exactamente el mismo código en JsFiddle y otros editores en línea, funciona a la perfección. Sin embargo, cuando migro el código a mi instancia de IDE de Brackets, nada funciona. Apreciaría si alguien arrojara algo de luz sobre la situación. Abajo he adjuntado un pequeño […]

Agregando espacio entre columnas en Bootstrap 4

Cómo quiero que se vea Estoy tratando de agregar espacios horizontales y verticales entre las columnas en BS4 pero mantiene los puntos de interrupción (negros o rojos) o los puntos de interrupción de bootstrap. ¿Hay alguna manera fácil de agregar espacio? He probado la nueva configuración de márgenes de BS4, pero en realidad no me […]

¿Cómo puedo unirme a con display: inline-block?

Estoy desarrollando una aplicación compleja y necesito usar div para representar cierta información; No hay table Mi problema específico es cuando la información de la caja se organiza, el contenido se separa. Este es mi código: #content { white-space: nowrap; } #item1 { width: 500px; } #item2, #item3 { width: 400px; } .item_ul { list-style-type: […]

Pure CSS – Varios Leer más Leer menos

Resuelto Ver código de trabajo en el siguiente fragmento de código. Libre de uso para aquellos que pueden usarlo. Descripción: hay un contenedor que contiene 10 secciones “Ver más / menos”. Los 11 se pueden plegar y cerrar. Los botones tienen efecto hover. Los textos están en inglés. No Javascript o jQuery. Solución CSS / […]

Los botones de radio no se alinean horizontalmente

Mis botones de radio HTML se alinean verticalmente y no horizontalmente. Además, el texto para cada uno de ellos no está justo al lado del botón, como me gustaría que fuera. Payment Method Bill Me Credit Card Paypal Ese es el código para mis botones HTML. Tengo una hoja de estilo externa, pero no he […]

¿Cómo puedo hacer que un esté espaciado uniformemente en el área de contenido en la que existe?

Tengo una lista que estoy usando como una lista de tabs: Funds (60) Companies (4) Groups (1) Categories (0) Identifiers (60) donde el CSS se define de la siguiente manera: #SearchForm ul { list-style: none; padding:0; margin: 15px 0 5px 0; } #SearchForm li { display: inline; background-color: #F6E9D8; margin: 12px 6px 0 0; padding: […]

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