Foros del Web » Creando para Internet » CSS »

Degradar un repeating-linear-gradient

Estas en el tema de Degradar un repeating-linear-gradient en el foro de CSS en Foros del Web. Saludos, tengo un buen rato intentando hacer lo siguiente: Quiero hacer que varias ineas paralelas horizontales, se vayan desvaneciendo poco a poco. el codigo que ...
  #1 (permalink)  
Antiguo 22/12/2015, 00:30
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Exclamación Degradar un repeating-linear-gradient

Saludos, tengo un buen rato intentando hacer lo siguiente:

Quiero hacer que varias ineas paralelas horizontales, se vayan desvaneciendo poco a poco.

el codigo que tengo para las lineas es:

background: repeating-linear-gradient(180deg, rgb(50, 50, 50) 0, rgba(255, 255, 255, 0) 2px);

Lo que hace es poner lineas oscuras y otras transparentes, pero me gustaria que las lineas negras, poco a poco se fueran degradando a transparente, dearriba hacia abajo.

he visto como hacer degradados de opaco a transparente, pero no me he encontrado con lo que requero.

Les dejo un fragmento de como se ve en este momento:

(no tengo donde almacenar imagenes, les dejo la imagen en base64)

[IMG]data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAccAAACgCAMAAAB OpFfWAAAA0lBMVEUwZ3IxQ0cxQ0gxREgxREkxRUkxZ3MxZ3Qxa HQxaXQyREgyREkyRUkyRkoyRksyR0syaHMyaHQyaHUyaXQyaXU yanUyanYyanczRUozRkozR0szR0wzSEwzaXUzanUzanYzancza 3Yza3czbHczbHgzbXgzbXkzbno0SEw0SE00a3c0a3g0bHg0bXk 0bnk0bno0bns0b3s0b3w0cHw0cH01b3s1b3w1cHw1cH01cX01c X41cn41cn82cX02cX42cn42cn82c4A3cn83c383c4A3dIEcvfh aAAACEUlEQVR4AbTBB46CYBAGULaXZTsWwaLYiyJ2LIrF+19J/29IZhJCjFHf07Sf41/5mf8FDfUFXzNiNjT3hv9qwRBjNo83xKacUFs0j3Z4mxexRDvo0 DJWuCtX5WHEEY4d7KJLJ+ipPbpQ+0txNRC9qD6fbnCLOzrDOfr qXl5z7f3u9A/U6T0+XHdSfqQp/hTUL2/Kn7dp8a80/z5/LWKdmmgd2qdjIgAAAARC/Vtrh185MnA++uijjz766KOPPvroo48++uijjz766KOPPvroo48 ++uijjz766KOPPvroo48++uijjz766KOPPvroo48++uijjz766 KOPPvroo48++uijjz766KOPPvroo48++uijjz766KOPPvroo48 ++uijjz766KOPPvroo48++uijjz766KOPPvroo48++uijjz766 KOPPvroo48++uijjz72jz766KOPPvroo48++uijjz766KOPPvr oo48++uijjz766KOPPvroo48++uijjz766KOPPvroo48++uijj z766KOPPvroo48++uijjz766KOPPvroo48++uijjz766KOPPvr oo48++uijjz766KOPPvroo48++uijjz766KOPPvroo48++uijj z766KOPPvroo48++uijjz766KOPPvroo48++uijjz766KOPPvr oo48++uijjz766KOPPvroo48++jiI3RXBwYBdxQAAAABJRU5Er kJggg==[/IMG]

Nuevamente comento que el resultado que deseo obtener, es que las lineas negras desaparescan al fondo del contenedor con un degradado.
  #2 (permalink)  
Antiguo 22/12/2015, 00:34
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Degradar un repeating-linear-gradient

Este es el resultadoque me gustaria (es el diseño hecho en photoshop de como debe de verse, las lineas no estan hecho en codigo css como la primera imagen):

[IMG]data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAACkCAMAAAC 6hEntAAAC1lBMVEUXOD8XOEAXOUAXOUEYOUEYOkEYOkIYO0IYP EIYPEMZPEMZPUMZPUQZPUUZPkUZPkYZP0YZP0caPkYaPkcaP0c aQEcaQEgaQEkaQUgaQUkaQUoaQkgaQkkbQUkbQUobQkkbQkobQ ksbQ0kbQ0obQ0sbQ0wbREsbREwbRE0cQkocQkscQ0scQ0wcQ00 cREscREwcRE0cRE4cRUwcRU0cRU4cRU8cRk4cRk8cR08cR1AdR E0dRE4dRU0dRU4dRU8dRk4dRk8dRlAdR04dR08dR1AdR1EdSFA dSFEdSFIdSVEdSVIdSVMdSVQdSlIdSlMdSlQdS1QdS1UeR1AeR 1EeSFAeSFEeSFIeSFMeSVEeSVIeSVMeSVQeSlIeSlMeSlQeSlU eS1MeS1QeS1UeS1YeTFQeTFUeTFYeTFceTVUeTVYeTVceTVgeT lYeTlceTlgfSVMfSVQfSlIfSlMfSlQfSlUfS1QfS1UfS1YfTFQ fTFUfTFYfTFcfTVYfTVcfTVgfTlcfTlgfTlkfT1cfT1gfT1kfT 1ofUFkfUFofUFsgTFQgTFUgTFYgTFcgTVYgTVcgTVggTlcgTlg gTlkgTlogT1cgT1ggT1kgT1ogT1sgUFggUFkgUFogUFsgUVogU VsgUVwgUlwgUl0gU1wgU10hT1khT1ohUFkhUFohUFshUFwhUVk hUVohUVshUVwhUV0hUlshUlwhUl0hUl4hU1whU10hU14hU18hV F0hVF4hVV4iUFsiUVsiUVwiUlsiUlwiUl0iUl4iU1wiU10iU14 iU18iVF0iVF4iVF8iVGAiVV4iVV8iVWAiVWEiVl8iVmAiVmEiV 2AiV2EiWGEjU14jVF4jVF8jVGAjVV8jVWAjVWEjVmAjVmEjVmI jV2IjWGEjWGIkVWAkVWEkVmEkVmIkV2IkV2MkWGMkWGQkWWQkW WUkWmUlWGMlWGQlWWQlWWUlWmUlWmb///8+eW72AAAPIklEQVR42u2d+X9VxRXA6b7YaldbbVOCDdKGwHto TFpMCDEvPAgSFFnMg6QkFVrtJmpSCTySKEgsBUkowRI2K5rUpY oNNQFKWqEsQVIogoBUFtEu0u0/6Dln7tw7c3Pn3heg5crnfO/MmZkb+GnOdzJ3eXkDBvjwPhPvN/ABjQ+qfMjNh/34SMp8lPjYxwO44opPBPHJi8SVHlyl8RmdzyIDanz4sYnalFii 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[/IMG]

Etiquetas: degradado, lineas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:01.