Tutorial fondos - Tutorial, CSS, HTML

Par GloriaV le 2 Février 2017 à 13:07

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> </p><p> </p><p style="text-align: center;"><span style="color: #000000;"><strong>Conservar el có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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:05

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> </p><p style="text-align: center;"> <strong>Fondo con dirección de imagen</strong></p>
<p> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:04

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> </p><p> </p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente con  HEX<br /> 1. Posición: to right<br /> 2. Gradinetes den HEX: #ffddcc, #0000ff<br />3. Bordes: border: 5px hidden;</strong></span></p>
<p><br /><span style="color: #000000;"> background: linear-gradient(to right, #ffddcc, #0000ff);</span></p>
<p> </p><br /> </div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:04

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> </p><p> </p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente  con HTML<br /> 1. Posició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:  </strong></span><span style="background-color: initial;"><span color="#000000" style="color: #000000;"><b>border: 5px ridge #D1D3D0; </b></span></span></p>
<p><br /> <span style="color: #000000;">background:linear-gradient( to left top, blue, red);</span></p>
<p> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:02

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> </p><p> </p><p style="text-align: center;"><span style="color: #000000;"><strong>Fondo gradiente  con HTML<br /> 1. Inclinación: 45deg<br /> 2. color en nombre en ingles: </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: 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;"> </span></p>
<p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:01

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> </p><p> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 13:00

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> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 12:59

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> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 12:58

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ódigo sin tener fondo en RGB con opacidad</span></strong></p>
<p> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 12:57

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> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 2 Février 2017 à 12:56

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> </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> </p><p> </p><p> </p></div></div></div>

votre commentaire
Par GloriaV le 3 Décembre 2016 à 16:14

votre commentaire
Par GloriaV le 3 Décembre 2016 à 16:13

votre commentaire

Par GloriaV le 3 Décembre 2016 à 16:11

<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

Par GloriaV le 3 Décembre 2016 à 16:09

<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

Par GloriaV le 3 Décembre 2016 à 16:08

<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

Par GloriaV le 3 Décembre 2016 à 16:07

<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

Par GloriaV le 3 Décembre 2016 à 16:05

<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

Par GloriaV le 3 Décembre 2016 à 16:03

<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

Par GloriaV le 3 Décembre 2016 à 16:00

<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

1 2