Aggiungere effetti Shadow Bordi Box

Gli argomenti di questa pagina

  • Dare una sfumatura ad un contenitore

Dare una sfumatura ad un contenitore

Per concludere vediamo come dare un ombra ad un contenitore HTML.
Cominciamo con alcuni esempi creiamo dei bordi più o meno sfumati facendo uso uno degli effetti ottenuti con filter.

Il CSS

.box_shadow{
    background: #F5E8DB;
    margin: 20px auto;
    width: 750px;
    padding: 10px; /*FireFox*/
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Chrome*/
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Opera & IE9*/
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*IE minori di 8*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5); /* right */
}
.first {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    border: 1px solid #dedede;
    padding: 10px;
    -moz-box-shadow: 10px  10px 5px #dedede;
    -webkit-box-shadow: 10px  10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10);
    box-shadow: 10px 10px 5px #dedede;
}    
.second {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    border: 1px solid #dedede;
    padding: 10px;
    -moz-box-shadow: -10px  -10px 5px #dedede;
    -webkit-box-shadow: -10px  -10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10);
    box-shadow: -10px -10px 5px #dedede;
}    
.third {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    border: 1px solid #dedede;
    padding: 10px;
    -moz-box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    -webkit-box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=45, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=225, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10);
}

Il codice HTML

<div class="box_shadow">
.box_shadow{ <br />
      background: #F5E8DB; <br />
      margin: 20px auto; <br />
      width: 750px; <br />
      padding: 10px; /*FireFox*/ <br />
      -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Chrome*/ <br />
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Opera &amp; IE9*/ <br />
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*IE minori di 8*/ <br />
      filter: progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5)  <br />
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5)  <br />
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5)  <br />
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5); /* right */ <br />
}
</div>

<div class="first">
.first { <br />
      background-color: #ededed; <br />
      width: 650px; <br />
      margin: 50px; <br />
      border: 1px solid #dedede; <br />
      -moz-box-shadow: 10px  10px 5px #dedede; <br />
      -webkit-box-shadow: 10px  10px 5px #dedede; <br />
      filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10); <br />
      box-shadow: 10px 10px 5px #dedede; <br />
}
</div>
<div class="second">
.second { <br />
      background-color: #ededed; <br />
      width: 650px; <br />
      margin: 50px; <br />
      border: 1px solid #dedede; <br />
      -moz-box-shadow: -10px  -10px 5px #dedede; <br />
      -webkit-box-shadow: -10px  -10px 5px #dedede; <br />
      filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10); <br />
      box-shadow: -10px -10px 5px #dedede; <br />
}
</div>
<div class="third">
.third { <br />
      background-color: #ededed; <br />
      width: 650px; <br />
      margin: 50px; <br />
      border: 1px solid #dedede; <br />
      -moz-box-shadow: 10px  10px 5px #dedede,  <br />
          -10px -10px 5px #dedede, <br />
          10px -10px 5px #dedede, <br />
          -10px  10px 5px #dedede; <br />
      -webkit-box-shadow: 10px  10px 5px #dedede,  <br />
          -10px -10px 5px #dedede, <br />
          10px -10px 5px #dedede, <br />
          -10px  10px 5px #dedede; <br />
      box-shadow: 10px  10px 5px #dedede,  <br />
          -10px -10px 5px #dedede, <br />
          10px -10px 5px #dedede, <br />
          -10px  10px 5px #dedede; <br />
      filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=45, Strength=10), <br />
          progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10), <br />
          progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=225, Strength=10), <br />
          progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10); <br />
}
</div>

I risultati ottenuti

.box_shadow{
    background: #F5E8DB;
    margin: 20px auto;
    width: 750px;
    padding: 10px; /*FireFox*/
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Chrome*/
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*Opera & IE9*/
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /*IE minori di 8*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) 
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5); /* right */
}
.first {
    background-color: #ededed;
    width: 650px;
    margin: 50px;
    border: 1px solid #dedede;
    -moz-box-shadow: 10px  10px 5px #dedede;
    -webkit-box-shadow: 10px  10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10);
    box-shadow: 10px 10px 5px #dedede;
}
.second {
    background-color: #ededed;
    width: 650px;
    margin: 50px;
    border: 1px solid #dedede;
    -moz-box-shadow: -10px  -10px 5px #dedede;
    -webkit-box-shadow: -10px  -10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10);
    box-shadow: -10px -10px 5px #dedede;
}
.third {
    background-color: #ededed;
    width: 650px;
    margin: 50px;
    border: 1px solid #dedede;
    -moz-box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    -webkit-box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    box-shadow: 10px  10px 5px #dedede, 
        -10px -10px 5px #dedede,
        10px -10px 5px #dedede,
        -10px  10px 5px #dedede;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=45, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=225, Strength=10),
        progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=315, Strength=10);
}

La proprietà shadow. Bordi sfumati con CSS sono meglio gestibili dalla proprietà shadow. Ecco qui di seguito alcuni esempi.

Il CSS

.border3D {
    border: 1px solid #2C3E26;
    background: #F5E8DB;
    width: 350px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
    padding-left: 8px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.aloneEsterno {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    border: 1px solid #dedede;
    padding: 10px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
    box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
}
.bordoSfumato {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    padding: 10px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

Il codice HTML

<div class="border3D">
.border3D { <br />
      border: 1px solid #2C3E26; <br />
      background: #F5E8DB; <br />
      width: 350px; <br />
      border-radius: 4px; <br />
      box-shadow: 1px 1px 1px; <br />
      margin: 3px 1px; <br />
      padding-bottom: 8px; <br />
      padding-top: 4px; <br />
      padding-left: 8px; <br />
      -moz-border-radius: 4px; <br />
      -o-border-radius: 4px; <br />
      -webkit-border-radius: 4px; <br />
}
</div>

<div class="aloneEsterno">
.aloneEsterno {<br />
    background-color: #ededed; <br />
    width: 750px; <br />
    margin: 50px; <br />
    border: 1px solid #dedede; <br />
    padding: 10px; <br />
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
    -moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
    box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
}</div>
<div class="bordoSfumato">.bordoSfumato { <br />
      background-color: #ededed; <br />
      width: 750px; <br />
      margin: 50px; <br />
      -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); <br />
      -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); <br />
      box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); <br />
} </div>

La dimostrazione pratica

.border3D {
    border: 1px solid #2C3E26;
    background: #F5E8DB;
    width: 350px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
    padding-left: 8px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.aloneEsterno {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    border: 1px solid #dedede;
    padding: 10px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
    box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);
}
.bordoSfumato {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

Due tipi di sfumature a confronto:
uno esterno (Outset)
l'altro interno (Inset)

Il CSS

.bordoSfumatoOutset {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    padding: 10px;
    -webkit-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
}
.bordoSfumatoInset {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    padding: 10px;
    -webkit-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
}

Il codice HTML

<div class="bordoSfumatoOutset">
.bordoSfumatoOutset { <br />
      background-color: #ededed; <br />
      width: 750px; <br />
      margin: 50px; <br />
      -webkit-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75); <br />
      -moz-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75); <br />
      box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75); <br />
}
</div>
<div class="bordoSfumatoInset">
.bordoSfumatoInset { <br />
      background-color: #ededed; <br />
      width: 750px; <br />
      margin: 50px; <br />
      padding: 10px; <br />
      -webkit-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
      -moz-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
      box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1); <br />
}
</div>

Gli stili applicati

.bordoSfumatoOutset {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    -webkit-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 15px 10px rgba(50, 50, 50, 0.75);
}
.bordoSfumatoInset {
    background-color: #ededed;
    width: 750px;
    margin: 50px;
    padding: 10px;
    -webkit-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
}

In questo ultimo esempio viene mostrato un bordo multicolore (nell'esempio sono state usate delle sfumature del grigio).
Una nota personale:
ho voluto mettere nel BOX (DIV) del testo sfumato e 3D. Non ha presentato alcuna difficoltà.

Il CSS

.multiColor {
    border: 10px solid #000;
    width: 750px;
    margin: 50px;
    padding: 5px 5px 5px 15px;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}
.multiColor span {
    color: #fff;
    text-shadow: 0 1px 0 #999, 
        0 2px 0 #888, 
        0 3px 0 #777, 
        0 4px 0 #666, 
        0 5px 0 #555, 
        0 6px 0 #444, 
        0 7px 0 #333, 
        0 8px 7px #001135;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 60px;
}
.multiColor p {
    color: White;
    text-shadow: 1px 1px 2px black, 
        0 0 1em blue, 
        0 0 0.2em red;
    font-size: 30px;
}

Il codiced HTML

<div class="multiColor">
<span>Testo di prova</span><br />
<p>&nbsp;L'effetto alone nel BOX</p>
il CSS:<br />
<br />
.multiColor { <br />
    border: 8px solid #000; <br />
    width: 750px; <br />
    margin: 50px; <br />
    padding: 5px 5px 5px 15px; <br />
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; <br />
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; <br />
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; <br />
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; <br />
} <br />
.multiColor span { <br />
    color: #fff; <br />
    text-shadow: 0 1px 0 #999,  <br />
        0 2px 0 #888,  <br />
        0 3px 0 #777,  <br />
        0 4px 0 #666,  <br />
        0 5px 0 #555,  <br />
        0 6px 0 #444,  <br />
        0 7px 0 #333,  <br />
        0 8px 7px #001135; <br />
    font-family: 'Arial Black', Gadget, sans-serif; <br />
    font-size: 60px; <br />
}<br />
.multiColor p { <br />
    color: White; <br />
    text-shadow: 1px 1px 2px black,  <br />
        0 0 1em blue,  <br />
        0 0 0.2em red; <br />
    font-size: 30px; <br />
} </div>
<p>Fine esempio</p>

I risultati ottenuti

Testo di prova

 L'effetto alone nel BOX

il CSS:

.multiColor {
    border: 8px solid #000;
    width: 750px;
    margin: 50px;
    padding: 5px 5px 5px 15px;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}
.multiColor span {
    color: #fff;
    text-shadow: 0 1px 0 #999, 
        0 2px 0 #888, 
        0 3px 0 #777, 
        0 4px 0 #666, 
        0 5px 0 #555, 
        0 6px 0 #444, 
        0 7px 0 #333, 
        0 8px 7px #001135;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 60px;
}
.multiColor p {
    color: White;
    text-shadow: 1px 1px 2px black, 
        0 0 1em blue, 
        0 0 0.2em red;
    font-size: 30px;
}

Fine esempio

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum