La création d'un “creux” effet

La figure ci-jointe a un effet qui rend l'aspect de la boîte comme il a une épaisseur d'environ une page et c'est assis sur la surface. Tous les quatre côtés regardez comme ils sont soulevées. Je suis à la recherche de l'effet inverse qui ferait de la boîte de donner l'impression d'être "submergé" par les propos d'une page de l'épaisseur.

Merci pour toutes les idées.La création d'un “creux” effet

Pourquoi en bas de voter et ensuite ne fournit aucune indication quant à ce qui est mal avec la question? Sans vous transmettre toute information, personne ne sait à quoi vous pensez...
Celui qui downvoted la question semble qu'il y ait une évidente et banale solution à cette question. Il n'y en a pas. Imaginez une découpe dans la case ci-dessus où vous pouvez voir la surface ci-dessous et de se sentir à la hauteur de la boîte autour de la découpe sur tous les quatre côtés. C'est l'effet, je suis à la recherche pour.
Pourriez-vous fournir une image de ce que vous essayez d'accomplir?
Voici quelque chose que j'ai fait avec les feux d'Artifice - jsfiddle.net/mfsU5. Sur l'image de gauche est le meilleur que je pouvais faire avec CSS3. Même les feux d'Artifice de l'image n'est pas exactement ce que je veux parce qu'elle montre de la lumière provenant de la partie supérieure gauche, de sorte que les bords droit et inférieur sont plus légers. J'aimerais que tous les quatre bords à être de couleur sombre, comme le haut et le bord gauche, comme si la lumière était directement au-dessus. Les feux d'Artifice de l'image, même si, certainement, me donne le sentiment d'une profondeur, comme si le rectangle intérieur a été découpées dans un 1/16 de pouce mat. C'est ce que je suis à la recherche pour.
Site css-shack.herokuapp.com est absolument pour vous!

OriginalL'auteur Steve | 2013-10-15

  1. 7

    Je pense que, vraiment, vous voulez juste ajouter "encart" à votre box-shadow règle. Voir http://www.w3schools.com/cssref/css3_pr_box-shadow.asp pour plus de détails.

    Quelque chose comme:

    box-shadow: 1px 1px 5px #555 inset;

    Donc, pour votre exemple, http://jsfiddle.net/FY2mk/ fonctionne très bien.

    OriginalL'auteur Josiah

  2. 2

    Voici une idée:

    <div style="box-shadow:inset 2px 5px 20px #555;
 width:100px;height:100px;border-radius:5px;">
<div style="width:50px;height:50px;
 background:#f00;box-shadow:
 inset 0px -10px 25px #700,0px 5px 5px #333;margin:20px 30px;
 display:block;position:absolute;border-radius:5px;">page</div>
 </div>

    http://jsfiddle.net/sK5bB/80/

    Vous pouvez obtenir beaucoup si vous jouez avec la box-shadow paramètres.

    Brrr. Inline css. JSFiddle a un CSS fenêtre, utiliser.
    LOL. J'ai mis à jour il. jsfiddle.net/sK5bB/1
    C'est un bel effet mais ce n'est pas le "étape" liste déroulante, je suis à la recherche pour. Un décent exemple est sur jsfiddle, lorsque vous le chargez. Il a ce "nuage" de l'image qui ressemble comme il en contrebas, au moins sur la moitié supérieure, à partir de l'environnement.
    J'ai mis à jour à nouveau. jsfiddle.net/itsmikem/QDMpr Si vous voulez les œuvres d'art que du relief, vous aurez probablement envie d'aller avec une image. Si c'est juste du texte, vous pouvez obtenir un mi-chemin décent estampage avec une combinaison de text-shadow et box-shadow. Il n'y a pas bien pris en charge css relief le filtre.

    OriginalL'auteur itsmikem

  3. 0

    Enfoncés chose? Je voudrais image que vous essayez d'obtenir un pressant, à l'instar de l'élément est plus à l'intérieur.

    Que vous pourriez envisager d'utiliser l'encart, c'est une ombre des biens qui en ferait le navigateur de donner un effet de l'élément, et la fera se sentir submergé.

    div {
 box-shadow: inset 1px 1px 3px #999;
}

    Il suffit d'ajouter le médaillon, et il va se sentir submergé!

    Ici est un jsfiddle pour que: http://jsfiddle.net/afzaal_ahmad_zeeshan/jfRDA/

    Et voici une imageLa création d'un “creux” effet

    Vous pouvez ajouter l'effet d'ombre autant que vous le souhaitez! 🙂

    J'ai joué avec l'insert d'effet et, comme la vôtre, il me donne toujours l'impression d'une surface surélevée avec des bords lisses et arrondis, comme le sommet d'une miche de pain.
    Vous utilisez peut-être border-radius parce que des bords arrondis! ou peut-être une trop grande utilisation de la troisième paramètre.
    Vous utilisez peut-être quelque chose qui est à l'origine du problème, pourquoi ne pas vous donner quelques jsfiddle 🙂

    OriginalL'auteur Afzaal Ahmad Zeeshan