Sombra - (page 2) - Tutorial, CSS, HTML

Par GloriaV 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 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 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 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 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 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 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 le 13 Août 2016 à 18:58
Par GloriaV le 13 Août 2016 à 19:01
Par GloriaV le 20 Août 2016 à 10:33

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow: inset 0px 0px 20px #000, 0px 0px 20px #000; /* Sombra interior y exterior */

box-shadow: 0px 0px 30px #F09;

box-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09;

box-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09, 0px 0px 30px #F09;
Par GloriaV le 3 Décembre 2016 à 16:23

Sombra externa
box-shadow: 0px 0px 20px #000000;

Sombra externa, interna en RGB con opacidad
box-shadow: inset 0px -3px 3px rgba(0,0,0,0.6), inset 0px 3px 3px rgba(252,255,255,0.7), 0px 7px 12px -2px rgba(0,0,0,0.8);

Sombra externa, interna en RGB con opacidad
box-shadow: inset 0px -3px 3px rgba(0,0,0,0.6), inset 0px 3px 3px rgba(252,255,255,0.7), 0px 27px 12px -2px rgba(0,0,0,0.8);

Par GloriaV le 20 Janvier 2017 à 17:15

HTML

<div class="sombra">
  <img src="http://animo2.ucoz.ru/_ph/54/1/930408333.jpg" title="" width="60px" height="75px"/>
</div>

CSS

.sombra img {
   display: block;
   position: relative;
   margin: -6px 6px 6px -6px;
  border-radius: 5px;
}.sombra {
   float:left;
   background-color: #A7A7A7;
  border-radius: 5px;
}.sombra {
   float:left;
   background-color: #A7A7A7;
 
   margin: 10px 0 0 5px;
}
.sombra:hover {
   border: 1px solid #777;
border-radius: 5px;
opacity: 1;
-webkit-transform: translatey(2px);
-moz-transform: translateY(-2px);
-o-transform: translateX(2px);
-ms-transform: translateX(2px);
transform: translateY(2px);
}

1 2