HTML/CSS “ombre” de la frontière?

J'ai essayé de regarder dans google Chrome, Inspecter l'Élément, mais je ne pouvais pas savoir comment cette page ici [ http://www.mousehuntgame.com/ ] fait une ombre type de frontière? De chaque côté de la case du milieu [avec tout le contenu de la page], il s'estompe d'un bleu plus sombre, créant un effet d'ombre.

Je veux l'utiliser pour mon site web. Quel est le code? Est-il CSS? Merci!

Vous devez ajouter la capture d'écran(s) en raison des liens qui peuvent mourir dans l'avenir.

OriginalL'auteur Matt | 2011-05-02

  1. 5

    De l'utilisation d'une image:

    HTML/CSS “ombre” de la frontière?

    (c'est en fait 1px haut, j'ai juste tendu ici pour plus de clarté)

    Vous pourriez le faire avec CSS3 box-shadow, voir ici pour un exemple grossier: http://jsfiddle.net/B9Uyj/1/

    De faire box-shadow travail dans les anciennes versions d'IE, vous pouvez utiliser TARTE CSS3. (Il fonctionne déjà dans IE9)

    Une image serait l'option la plus facile ici.

    Oui, et box-shadow est clairement de devenir mainstream viable à très bientôt. caniuse.com/#search=box-shadow
    J'ai vérifié le lien, et c'est assez sucré. Merci!

    OriginalL'auteur thirtydot

  2. 4

    si vous voulez CSS3, vous pouvez définir le style de votre texte avec 

    text-shadow: red 2px 2px 2px;

    ne zone d'ombre avec

    -moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;

    pour des raisons de simplicité de dégradés d'arrière-plan vous pouvez utiliser ce site
    http://gradients.glrzad.com/

    OriginalL'auteur robx

  3. 2

    Ce code Css va donner un solide frontière de la division et de l'Ombre, tel qu'utilisé dans la page de votre lien. 

     -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    overflow:hidden;
    background:#F6E7B9;
    -webkit-box-shadow:0 0 4em rgb(4,6,5);
    -moz-box-shadow:0 0 3em rgb(6,7,8);
    box-shadow:0 0 1em rgb(5,9,2);
    border:20px solid skyblue;
    font-family:Verdana, Geneva, sans-serif;

    HTML/CSS “ombre” de la frontière?

    OriginalL'auteur kammy

  4. 1

    J'ai l'habitude de définir l'image de fond d'écran d'un conteneur à un quel que soit x 10 pixels de l'image qui serait de 20 pixels sur chaque côté de la valeur de l'ombre, puis répéter verticalement. En supposant que votre espace est 960px de large avec 20px chaque côté de l'ombre, utilisation:

    <div class="box">
     content
</div>

    CSS:

    div.box
{
     background: url(image-with-shadow.png) repeat-y;
     padding: 0 20px;
     width: 960px;
}

    Voici un exemple d'une image à utiliser: http://projectavian.com/repeat.png

    OriginalL'auteur Marty

  5. 0

    Je crois qu'ils le font avec les images. La recherche "active" et découvrez tous leurs trucs dans cette feuille de style: http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

    OriginalL'auteur iosfreak