Archives : Août 2016 - Tutorial, CSS, HTML

Par GloriaV dans Sombra le 13 Août 2016 à 19:01
Par GloriaV dans Sombra le 13 Août 2016 à 18:58

Par GloriaV dans Sombra le 13 Août 2016 à 18:55

<div id="sombra">
  <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Ut diam metus, venenatis ullamcorper, consequat sit amet,
 volutpat at, nulla. Nulla sollicitudin metus.</div>
</div>

CSS 1º

#sombra {
  background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;
  padding-right: 15px;
  padding-bottom: 15px;
  width: 400px;
}
 
#sombra div {
  background: #FFF;
  width: 400px;
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
  filter: shadow(color=#999999, direction=135, strength=2);
}

CSS 2º

#sombra {
  background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;
  padding-right: 15px;
  padding-bottom: 15px;
  width: 400px;
}
 
#sombra div {
  background: #FFF;
  width: 400px;
box-shadow: 0 0 5px #888;
   
}

CSS 3º

#sombra {
  background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;
  padding-right: 15px;
  padding-bottom: 15px;
  width: 400px;
}
 
#sombra div {
  background: #FFF;
  width: 400px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
margin: 100px 50px;
   
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:53

<div id="recuadro1"> 
<h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

CSS

<style type="text/css"> 
#recuadro1{
  box-shadow: 30px 10px 20px #aaa; 
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}
body {
  background:white;
  margin:50px;
}
</style>

Par GloriaV dans Sombra le 13 Août 2016 à 18:51

Fuente

Ejemplo 1

Sombra simple

<div class="caja sombra">
      <h2>Ejemplo 1</h2>
      <p>Sombra simple</p>
    </div>

CSS

.caja{
    background-color: #F4F4F4;
    height: 150px;
    width: 200px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border-radius: 5px; 
  border: 1px dotted #9C9C9C;
    margin: 100px 50px;
    float: left;
    padding: 1em;
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:50

<div id="recuadro2"> 
<h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

CSS

<style type="text/css"> 
#recuadro2{
  box-shadow: -10px -10px 20px #aaa; 
  border-radius: 20px;  
  background-color:#cff;
  width:200px;
  padding:10px;
  margin-top:50px;
}
body {
  background:white;
  margin:50px;
}
</style>

Par GloriaV dans Sombra le 13 Août 2016 à 18:42

<div class="caja caja-sombra">
      <h2>Ejemplo 2</h2>
      <p>Sombra esquinas inferiores</p>
    </div>

CSS

.caja{
    width: 200px;
    height: 150px;
    background-color: #f4f4f4;
    border-radius: 5px; 

  border: 1px dotted #9C9C9C;
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra:before{
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.caja-sombra:after{
    bottom: 15px;
    width: 50%;
    height: 20%;
    right: 10px;
    left: auto;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:42

Ejemplo 3

Sombra inferior centrada

<div class="caja caja-sombra">
      <h2>Ejemplo 3</h2>
      <p>Sombra inferior centrada</p>
    </div>

CSS

    .caja
{
    width: 200px;
    height: 150px;
    background-color: #f4f4f4;
   border-radius: 5px; 

  border: 1px dotted #9C9C9C;
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra:before{
    bottom: 15px;
    left: 10px;
    width: 46%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}
.caja-sombra:after{
    right: 10px;
    bottom: 15px;
    width: 46%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:40

Ejemplo 4

Sombra inferior perspectiva

<div class="caja caja-sombra">
      <h2>Ejemplo 4</h2>
      <p>Sombra inferior perspectiva</p></div>

CSS

    .caja
{
    width: 200px;
    height: 150px;
    background-color: #f4f4f4;
   border-radius: 5px; 

  border: 1px dotted #9C9C9C;
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra:before{
    bottom: 15px;
    left: 10px;
    width: 46%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}
.caja-sombra:after{
    right: 10px;
    bottom: 15px;
    width: 46%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:39

<div class="caja caja-sombra sombra1 sombra2">
       <h2>Ejemplo 5</h2>
      <p>Sombras laterales interiores</p>
    </div>

CSS

.caja{
    
    width: 200px;
    height: 150px;
    background-color: #f4f4f4;
   border-radius: 5px; 
  border: 1px dotted #9C9C9C;
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px 50px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.sombra1:beforez{
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    border-radius: 5px / 100px;
}
.sombra2:before{
    right: 0
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:38

Ejemplo 6

Sombras esquinas levantadas

<div class="caja caja-sombra"><h2>Ejemplo 6</h2>
      <p>Sombras esquinas levantadas</p>
        <div class="sombra-abajo-derecha"></div>
        <div class="sombra-abajo-izquierda"></div>
    </div>

CSS

.caja{
    
    width: 200px;
    height: 150px;
    background-color: #f4f4f4;
  border-radius: 5px; 
  border: 1px dotted #9C9C9C;
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.caja-sombra:before{
    width: 24px;
    height: 46%;
    top: 0;
    right: -10px;
    display: inline-block;
    box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
    -moz-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
    -o-transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
    transform: rotate(2deg) translate(-20px, 25px) skew(-6deg);
}
.caja-sombra:after{
    display: inline-block;
    height: 46%;
    left: -10px;
    top: 0;
    width: 24px;
    box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(2deg) translate(20px,25px) skew(6deg);
    -moz-transform: rotate(2deg) translate(20px,25px) skew(6deg);
    -o-transform: rotate(2deg) translate(20px,25px) skew(6deg);
    transform: rotate(2deg) translate(20px,25px) skew(6deg);
}
.sombra-abajo-derecha{
    content: '';
    width: 24px;
    height: 46%;
    bottom: 0;
    right: -10px;
    position: absolute;
    z-index: -1;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
    -moz-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
    -o-transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
    transform: rotate(-2deg) translate(-20px,-25px) skew(6deg);
}
.sombra-abajo-izquierda{
    content: '';
    width: 24px;
    height: 46%;
    bottom: 0;
    left: -10px;
    position: absolute;
    z-index: -1;
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
    -moz-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
    -o-transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
    transform: rotate(-2deg) translate(20px,-25px) skew(-6deg);
}

Par GloriaV dans Sombra le 13 Août 2016 à 18:31

<div class="caja caja-sombra">
<h2>Ejemplo 6</h2>
<p>Sombra interior exterior</p>
</div>

CSS

.caja{
 width: 200px;
 height: 150px;
 background-color: #f4f4f4;
 border-radius: 5px / 100px;
 border: 1px dotted #9C9C9C;
 box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
}
.caja-sombra{
    position: relative;
    float: left;
    padding: 1em;
    margin: 100px 50px;
    
}
.caja-sombra:before, .caja-sombra:after{
    content: "";
    position: absolute;
    z-index: -2;
}
.sombra1:beforez{
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
   
}
.sombra2:before{
    right: 0
}

Par GloriaV dans Imagen flotante le 13 Août 2016 à 18:28

<div>
		<img style="position:absolute; left:10px; top:70px" src="http://www.smayly.ru/gallery/glossy/GoldSmile/14.gif" alt="Vitotronic 200">
		<div class="mys" style="left: 30px; top:100px" id="dateTime">current date and time</div>
		<div class="mys" style="left:130px; top:330px" id="Temp-Aussen">outer temperature</div>
		<div class="mys" style="left:330px; top:400px" id="Temp-WW">warm water</div>
		<div class="mys" style="left:330px; top:480px" id="Temp-Hzg-VL">vorlauf</div>
		<div class="mys" style="left:590px; top:480px" id="Temp-Hzg-RL">rücklauf</div>
		<img class="mys" style="left:650px; top:250px" id="Status-Pumpe-Hzg" src="http://vamotkrytka.ru/_ph/1/2/637581011.gif">
		<img class="mys" style="left:650px; top:400px" id="Status-Pumpe-WW" src="http://vamotkrytka.ru/_ph/1/2/365908680.gif">
		<img class="mys" style="left:650px; top:330px" id="Status-Verdichter" src="http://vamotkrytka.ru/_ph/1/2/18628019.gif">
	</div>
	 <script type="text/javascript">
		function ParseData() {
			// convert the read data into an array
			var elem = document.getElementById("crtDateTime");
			if ( elem )
				document.getElementById("dateTime").innerHTML = elem.innerHTML;
			if ( !document.getElementById("params") || !document.getElementById("values") )
				alert ("No parameters or values found!");
			var repl = document.getElementById("params").innerHTML;
			var arr1 = repl.split(",");
			if ( arr1[0]!="Time" ) { // header row with parameters
				alert ("Invalid parameters!");
				return;
			}
			var arr2 = document.getElementById("values").innerHTML.split(",");
			for (var indx in arr1) {
				if (indx==0) continue;
				if ( arr1[indx].slice(0,6)=="Status" ) {
					if ( arr2[indx]==0 )
						document.getElementById(arr1[indx]).style.visibility = "hidden";
				} else if ( arr1[indx].slice(0,5)!="Strom" )
					document.getElementById(arr1[indx]).innerHTML = arr2[indx];
			}
		}
	</script>

CSS

<style>
.mys {
  position:absolute;
  color: 000000;
 font-size: 24px;
 font-family: Parchment;
}
  .myp {visibility:hidden}
</style>

votre commentaire

Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:16
Mi primera Foto antes de nacer: ~• ~•　 ~•　　~•　~•　~• 　~☺ ~• ~•　 ~• ~• ~•... El que va riéndose soy yo!<marquee behavior="alternate" direction="up" width="80%">

<marquee direction="right" behavior="alternate"> Texto</marquee></marquee>
Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:14

Texto<marquee direction="up"><marquee behavior="alternate">Texto</marquee></marquee>
Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:13

Texto<marquee scrolldelay="200" scrollamount="200"><font color="black"><b>Texto</b></font></marquee>

Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:12

GloriaV<marquee style="FILTER: alpha(opacity=75, style=3)" scrollamount="1"

scrolldelay="75" width="100" px="px"><font style="CURSOR: hand" 
face="Monotype Corsiva" size="4"><font color=
"#000000">GloriaV</font></font></marquee>

Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:11

Cada momento de mi vida es un milagro. Marc Allen y GloriaV

<marquee style="HEIGHT: 50px" direction="down">Cada momento de 
mi vida es un milagro. Marc Allen y GloriaV</marquee>

Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:10

Con amor. GloriaV

<marquee style="FILTER: alpha(opacity=75, style=3)" scrollamount="1" 
scrolldelay="75" width="180" px="px"><font style="CURSOR: hand" 
face="Monotype Corsiva" size="5"><font color="#000000">Con amor.
GloriaV</font></font></marquee>

Par GloriaV dans Texto movimiento le 13 Août 2016 à 18:09

Si todos los derechos son reservados
¿que pasa con los izquierdos?

<center>
    <marquee scrollamount="2" scrolldelay="100" onmouseover="this.stop();" 
onmouseout="this.start();" height="95" bgcolor="#CCFFFF" width="180" style=
    "border:1px solid #000000; text-align: center; font-family:Arial;
 color:#000000; font-size:10pt;" direction="down">
Texto</marquee>
</center>

1 2 3 4 5 6 7 8