•  

     

     

     

    Conservar el código sin tener fondo


    background: url(http:// gif);

     border: 5px dashed #ccc; 

    background-image: url('http:// gif'); background-position: right center; 

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 2px dashed #ccc; box-shadow: 0px 0px 10px #000000; background-image: url('http:// gif'); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: center;"><span style="color: #000000;"><strong>Conservar el c&oacute;digo sin tener fondo</strong></span></p>
    <p><br /><span style="color: #000000;"> background: url(http:// gif);<br> border: 5px dashed #ccc;<br>background-image: url('http:// gif'); background-position: right center;  </span></p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

     

     Fondo con dirección de imagen

     

    background-image: url('http://img0.liveinternet.ru/images/attach/b/3/11/682/11682312_bridgemidstrip.jpg');

    Bordes: border: 4px inset #979697; 

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 4px inset #979697; box-shadow: 0px 0px 10px #000000; background-image: url('http://img0.liveinternet.ru/images/attach/b/3/11/682/11682312_bridgemidstrip.jpg'); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p style="text-align: center;">&nbsp;<strong>Fondo con direcci&oacute;n de imagen</strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-image: url('http://img0.liveinternet.ru/images/attach/b/3/11/682/11682312_bridgemidstrip.jpg');<br>Bordes: border: 4px inset #979697; </span></p>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     


    votre commentaire
  •  

     

     

     

    Fondo gradiente con  HEX
    1. Posición: to right
    2. Gradinetes den HEX: #ffddcc, #0000ff
    3. Bordes: border: 5px hidden;


    background: linear-gradient(to right, #ffddcc, #0000ff);

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 5px hidden; box-shadow: 0px 0px 10px #000000; background: linear-gradient(to right, #ffddcc, #0000ff); height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente con &nbsp;HEX<br /> 1. Posici&oacute;n: to right<br /> 2. Gradinetes den HEX: #ffddcc, #0000ff<br />3. Bordes:&nbsp;border: 5px hidden;</strong></span></p>
    <p><br /><span style="color: #000000;"> background: linear-gradient(to right, #ffddcc, #0000ff);</span></p>
    <p>&nbsp;</p><br /> </div></div></div>


    votre commentaire
  •  

     

     

     

    Fondo gradiente  con HTML
    1. Posición: to left top
    2. color en nombre en ingles: blue, red

    3. Bordes:  border: 5px ridge #D1D3D0; 


    background:linear-gradient( to left top, blue, red);

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 5px ridge #D1D3D0; box-shadow: 0px 0px 10px #000000; background: linear-gradient( to left top, blue, red); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente &nbsp;con HTML<br /> 1. Posici&oacute;n: to left top<br />2. color en nombre en ingles: blue, red</strong></span></p>
    <p style="text-align: center;"><span style="color: #000000;"><strong>3. Bordes: &nbsp;</strong></span><span style="background-color: initial;"><span color="#000000" style="color: #000000;"><b>border: 5px ridge #D1D3D0;&nbsp;</b></span></span></p>
    <p><br /> <span style="color: #000000;">background:linear-gradient( to left top, blue, red);</span></p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

     

     

    Fondo gradiente  con HTML
    1. Inclinación: 45deg
    2. color en nombre en ingles: 
    blue, red

    3. Bordes: border: 5px groove #F5CCCC;


    background:linear-gradient( 45deg, blue, red );

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 5px groove #F5CCCC; box-shadow: 0px 0px 10px #000000; background: linear-gradient( 45deg, blue, red ); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente &nbsp;con HTML<br /> 1. Inclinaci&oacute;n: 45deg<br /> 2. color en nombre en ingles:&nbsp;</strong><span style="background-color: initial;">blue, red</span><strong><br /></strong></span></p>
    <p style="text-align: center;"><span style="color: #000000;"><span style="background-color: initial;">3. Bordes:&nbsp;border: 5px groove #F5CCCC;</span></span></p>
    <p><br /> <span style="color: #000000;">background:linear-gradient( 45deg, blue, red );</span></p>
    <p><span style="color: #000000;">&nbsp;</span></p>
    <p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     


    votre commentaire
  •  

     

     

     

    Fondo gradiente color con nombre de color en ingles


    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

    border: 6px solid #fff;

     

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 6px solid #fff; box-shadow: 0px 0px 10px #000000; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p>&nbsp;</p><p>&nbsp;</p><p style="text-align: center;"><span style="color: #000000;"><strong> Fondo gradiente color con nombre de color en ingles</strong></span></p>
    <p><br /><span style="color: #000000;">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);<br>border: 6px solid #fff;</span></p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

    Fondo de color en HSLA con opacidad

     

    background-color: hsla(285, 100%, 50%, 0.3);

    bordes: border: 6px outset #F6CEEC;

    background-color: hsla(285, 100%, 50%, 0.3); background-position: right center;

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 6px outset #F6CEEC; box-shadow: 0px 0px 10px #000000; background-color: hsla(285, 100%, 50%, 0.3);height: 100%; width: auto;">
    <div style="padding: 11px;"><p style="text-align: center;"><strong><span style="color: #000000;">Fondo de color en HSLA con opacidad</span></strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-color: hsla(285, 100%, 50%, 0.5);<br>border: 6px outset #F6CEEC;<br>background-color: hsla(285, 100%, 50%, 0.3); background-position: right center;</span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

    Fondo de color en HSLA con opacidad

     

    background-color: hsla(285, 100%, 50%, 0.7);

    bordes: border: 6px outset #F6CEEC;

    background-color: hsla(285, 100%, 50%, 0.7); background-position: right center; 

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 6px outset #F6CEEC; box-shadow: 0px 0px 10px #000000; background-color: hsla(285, 100%, 50%, 0.7); height: 100%; width: auto;">
    <div style="padding: 11px;"><p style="text-align: center;"><strong><span style="color: #000000;">Fondo de color en HSLA con opacidad</span></strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-color: hsla(285, 100%, 50%, 0.5);<br>border: 6px outset #F6CEEC;<br>background-color: hsla(285, 100%, 50%, 0.7); background-position: right center; </span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

    Conservar el código sin tener fondo en RGB con opacidad

     

    background-color:rgba();

    border: 6px dotted #666;

    background-color: rgba(); background-position: right center;

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 6px dotted #666; box-shadow: 0px 0px 10px #000000; background-color: rgba(); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p style="text-align: center;"><strong><span style="color: #000000;">Conservar el c&oacute;digo sin tener fondo en RGB con opacidad</span></strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-color:rgba();<br>border: 6px dotted #666;<br>background-color: rgba(); background-position: right center;</span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

    Fondo en RGB con opacidad

     

    background-color: rgba(173,231,246, 0.7);

    border: 5px dotted #8AB6C1;

    background-color: rgba(173,231,246, 0.7); background-position: right center; 

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 5px; border: 5px dotted #8AB6C1; box-shadow: 0px 0px 10px #000000; background-color: rgba(173,231,246, 0.7); background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p style="text-align: center;"><strong><span style="color: #000000;">Fondo en RGB con opacidad</span></strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-color: rgba(173,231,246, 0.7);<br>border: 5px dotted #8AB6C1;<br>background-color: rgba(173,231,246, 0.7); background-position: right center; </span></p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

    Fondo de color en HEX (#)

     

    background-color: #E5CBF0;

    border: 6px double #fff; 

    background-color: #e5cbf0; background-position: right center;

     

    <div style="padding: 10px;">
    <div style="padding: 5px; border-radius: 6px; border: 4px double #D1D3D0; box-shadow: 0px 0px 10px #000000; background-color: #c0bad4; background-position: right center; height: 100%; width: auto;">
    <div style="padding: 11px;"><p style="text-align: center;"><strong><span style="color: #000000;">Fondo de color en HEX (#)</span></strong></p>
    <p>&nbsp;</p><p><span style="color: #000000;">background-color: #c0bad4;<br>border: 6px double #fff; <br>background-color: #e5cbf0; background-position: right center;</span></p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div></div></div>

     

     

     

     


    votre commentaire
  •  

     

     


    votre commentaire
  •  

     

     


    votre commentaire
  •  

     

    7.

    <div class='Caja EjemploRadialRepetitivo2'></div>
    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploRadialRepetitivo2 {
    background:-webkit-repeating-radial-gradient(70% 70%, yellow 0%, yellow 15%, red 15%, red 30%);
    background:-moz-repeating-radial-gradient(70% 70%, yellow 0%, yellow 15%, red 15%, red 30%);
    background:-o-repeating-radial-gradient(70% 70%, yellow 0%, yellow 15%, red 15%, red 30%);
    background:repeating-radial-gradient(70% 70%, yellow 0%, yellow 15%, red 15%, red 30%);
    }
    </style>
     







     

     


    votre commentaire
  •  

     

    6.

    <div class='Caja EjemploRadialRepetitivoSimple'></div>
    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploRadialRepetitivoSimple {
    background:-webkit-repeating-radial-gradient(rgb(0, 0, 255) 0%, rgb(0, 0, 100) 20%);
    background:-moz-repeating-radial-gradient(rgb(0, 0, 255) 0%, rgb(0, 0, 100) 20%);
    background:-o-repeating-radial-gradient(rgb(0, 0, 255) 0%, rgb(0, 0, 100) 20%);
    background:repeating-radial-gradient(rgb(0, 0, 255) 0%, rgb(0, 0, 100) 20%);
    }
    </style>
     








     


    votre commentaire
  •  

     

    5.

    <div class='Caja EjemploRadial2'></div>
    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploRadial2 {
    background:-webkit-radial-gradient(30px 60px, farthest-side, #FFFFFF 15%, green 90%, rgb(0, 100, 0));
    background:-moz-radial-gradient(30px 60px, farthest-side, #FFFFFF 15%, green 90%, rgb(0, 100, 0));
    background:-o-radial-gradient(30px 60px, farthest-side, #FFFFFF 15%, green 90%, rgb(0, 100, 0));
    background:radial-gradient(30px 60px, farthest-side, #FFFFFF 15%, green 90%, rgb(0, 100, 0));
    }
    </style>
     








     


    votre commentaire
  •  

     

    4.

    <div class='Caja EjemploRadialSimple'></div>
    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploRadialSimple {
    background:-webkit-radial-gradient(rgb(0, 0, 200), rgba(255, 255, 255, 0.08));
    background:-moz-radial-gradient(rgb(0, 0, 200), rgba(255, 255, 255, 0.08));
    background:-o-radial-gradient(rgb(0, 0, 200), rgba(255, 255, 255, 0.08));
    background:radial-gradient(rgb(0, 0, 200), rgba(255, 255, 255, 0.08));
    }
    </style>


     








     


    votre commentaire
  •  

     

    3.

    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploLinearRepetitivo {
    background:-webkit-repeating-linear-gradient(rgb(0, 255, 0) 0%, rgb(0, 100, 0) 10%);
    background:-moz-repeating-linear-gradient(rgb(0, 255, 0) 0%, rgb(0, 100, 0) 10%);
    background:-o-repeating-linear-gradient(rgb(0, 255, 0) 0%, rgb(0, 100, 0) 10%);
    background:repeating-linear-gradient(rgb(0, 255, 0) 0%, rgb(0, 100, 0) 10%);
    }
    </style>

    <div class='Caja EjemploLinearRepetitivo'></div>
     








     


    votre commentaire
  •  

     

    2.

    <div class='Caja EjemploLinear3C'></div>
    <style type="text/css">
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploLinear3C {
    background:-webkit-linear-gradient(45deg, rgb(255, 255, 0) 20%, rgb(200, 0, 0) 60%, rgb(0, 150, 0));
    background:-moz-linear-gradient(45deg, rgb(255, 255, 0) 20%, rgb(200, 0, 0) 60%, rgb(0, 150, 0));
    background:-o-linear-gradient(45deg, rgb(255, 255, 0) 20%, rgb(200, 0, 0) 60%, rgb(0, 150, 0));
    background:linear-gradient(45deg, rgb(255, 255, 0) 20%, rgb(200, 0, 0) 60%, rgb(0, 150, 0));
    }
    </style>
     









     


    votre commentaire
  •  

     

    1.

     
    <div class="Caja EjemploLinearSimple">&nbsp;</div>
    <style type="text/css"><!--
    .Caja {
    float:left;
    width:200px;
    height:200px;
    margin-right:20px;
    border-radius:4px;
    border:1px solid #999;
    }
    .EjemploLinearSimple {
    background:-webkit-linear-gradient(rgb(255, 0, 0), rgb(100, 0, 0));
    background:-moz-linear-gradient(rgb(255, 0, 0), rgb(100, 0, 0));
    background:-o-linear-gradient(rgb(255, 0, 0), rgb(100, 0, 0));
    background:linear-gradient(rgb(255, 0, 0), rgb(100, 0, 0));
    }
    --></style>








     


    votre commentaire