Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Como hacer un degradado profesional

Estas en el tema de Como hacer un degradado profesional en el foro de CSS en Foros del Web. Saludos a todos, Estoy trabajando en un web y he querido hacerla usando degradados. En principio quiero hacer algo como esto: Al momento he hecho ...
  #1 (permalink)  
Antiguo 31/03/2014, 16:58
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Como hacer un degradado profesional

Saludos a todos,

Estoy trabajando en un web y he querido hacerla usando degradados. En principio quiero hacer algo como esto:


Al momento he hecho lo siguiente en mi CSS
Código CSS:
Ver original
  1. .blue{background: rgba(13,47,88,0.7);
  2. background: -moz-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
  3. background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(13,47,88,0.7)), color-stop(12%, rgba(13,47,88,0.62)), color-stop(74%, rgba(47,89,146,0.18)), color-stop(100%, rgba(47,89,146,0)));
  4. background: -webkit-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
  5. background: -o-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
  6. background: -ms-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
  7. background: linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
  8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2f58', endColorstr='#2f5992', GradientType=1 );}
  9.             .green{background: rgba(28,148,104,1);
  10. background: -moz-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
  11. background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(28,148,104,1)), color-stop(12%, rgba(28,148,104,0.91)), color-stop(74%, rgba(47,89,146,0.44)), color-stop(100%, rgba(47,89,146,0.24)));
  12. background: -webkit-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
  13. background: -o-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
  14. background: -ms-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
  15. background: linear-gradient(135deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
  16. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c9468', endColorstr='#2f5992', GradientType=1 );}
  17.             .yellow{background: rgba(47,89,146,0.24);
  18. background: -moz-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
  19. background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(47,89,146,0.24)), color-stop(26%, rgba(47,89,146,0.44)), color-stop(88%, rgba(252,176,61,0.91)), color-stop(100%, rgba(252,176,61,1)));
  20. background: -webkit-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
  21. background: -o-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
  22. background: -ms-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
  23. background: linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
  24. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f5992', endColorstr='#fcb03d', GradientType=1 );}
  25.             .red{height: 800px;
  26.                 background: rgba(47,89,146,0.24);
  27. background: -moz-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
  28. background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(47,89,146,0.24)), color-stop(26%, rgba(47,89,146,0.44)), color-stop(88%, rgba(216,0,65,0.91)), color-stop(100%, rgba(216,0,65,1)));
  29. background: -webkit-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
  30. background: -o-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
  31. background: -ms-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
  32. background: linear-gradient(135deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
  33. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f5992', endColorstr='#d80041', GradientType=1 );
  34.             }

y en mi HTML he colocado lo siguiente

Código HTML:
Ver original
  1. <div class="blue" style="display: block; width: 100%; height: 100%">
  2.             <div class="green" style="display: block; width: 100%; height: 100%">
  3.                 <div class="yellow" style="display: block; width: 100%; height: 100%">
  4.                     <div class="red" style="display: block; width: 100%; height: 800px">
  5.                         Hola mundo
  6.                     </div>
  7.                 </div>
  8.             </div>
  9.         </div>

El inconveniente que veo de usar este método, son los infinitos (obviamente estoy exagerando) divs que debo colocar para ir agregando los colores. Existe un método más rápido y con menos lineas?
__________________
--
Aqui fegm_4
  #2 (permalink)  
Antiguo 31/03/2014, 18:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Como hacer un degradado profesional

Puedes especificar múltiples fondos en CSS para un solo elemento. La sintaxis sería algo así:

Código CSS:
Ver original
  1. background: fondo1, fondo2, fondo3;
  #3 (permalink)  
Antiguo 31/03/2014, 20:02
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 11 años, 9 meses
Puntos: 8
Respuesta: Como hacer un degradado profesional

Muchas gracias pzin! Funcionó, solo debo arreglar la posición y la intensidad de los colores
__________________
--
Aqui fegm_4

Etiquetas: degradados
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 04:04.