Comment créer un “brillant” effet comme ceci en utilisant des gradients CSS?

Est-il possible de créer ce qui suit à l'aide de CSS?

Comment créer un “brillant” effet comme ceci en utilisant des gradients CSS?

J'ai créé le conteneur et les coins arrondis. Violon ici.

Mais je ne sais pas comment pour obtenir le léger effet brillant. Est-il possible de faire cela en CSS? Si oui, comment?

Ci-dessous le code que j'ai écrit jusqu'à présent.

HTML

<div id="phone-outer">
    <div id="phone-inner">

    </div>
</div>

CSS

#phone-outer {
    margin-bottom:200px;
    margin:0 auto;  
    width:400px;
    height:500px;
    background-color:#333;
    -webkit-border-bottom-right-radius:25px;
    -webkit-border-bottom-left-radius:25px;
    -moz-border-radius-bottomright:25px;
    -moz-border-radius-bottomleft:25px;
    border-bottom-right-radius:25px;
    border-bottom-left-radius:25px;
}

#phone-inner {
    margin:0 auto;
    background-color:#FFF;
    width:360px;
    height:460px;   
}
Je ne suis pas assez bon avec des gradients de répondre correctement, mais vous pourriez vouloir essayer un grand dégradé radial, à l'aide de couleurs rgba pour créer le semi-transparent blanc de l'ombre, c'est re-placé de sorte que la plupart des il est derrière la zone blanche.
Je vous remercie. Je vais faire un essai. Je suis d'accord avec CSS de base, mais les gradients a toujours été un endroit difficile pour moi aussi.
et pour un peu d'inspiration! tjrus.com/iphone 🙂

OriginalL'auteur Isuru | 2013-02-13

  1. 15

    Assez proche, je l'espère:

    http://jsfiddle.net/UxSdU/13/

    #phone-outer {    
    border: 1px solid #FFFFFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

    height: 500px;
    width: 400px;
    margin: 0 auto;


    background-image: linear-gradient(right, #111 11%, #333 56%);
    background-image: -o-linear-gradient(right, #111 11%, #333 56%);
    background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
    background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
    background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
    background-image: gradient(right, #111 11%, #333 56%);
}
    Je vous remercie beaucoup. Cela fonctionne très bien! J'ai un peu de peaufinage, comme le retrait de cette ligne border: 1px solid #FFFFFF; et réglage de la box-shadow valeurs. Il semble bien, maintenant. Merci encore 🙂
    beau travail.

    OriginalL'auteur KBN

  2. 6

    Si vous êtes à la recherche pour le subtil dégradé lueur, quelque chose comme ça devrait le faire:

    background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));

    C'est pour webkit, vous pouvez appliquer l'-moz et -o équivalents en fonction de votre support de table.

    Vous pouvez également ajouter plusieurs zone d'ombres pour créer le noir de l'ombre, ainsi, quelque chose comme:

    box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);

    Voici une démo: http://jsbin.com/opinaj/4

    Comment créer un “brillant” effet comme ceci en utilisant des gradients CSS?

    Merci beaucoup, David. 🙂 Cela fonctionne bien, mais seulement dans le Chrome. J'ai essayé d'ajouter le background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0)); ligne avec le préfixe -moz- et -o mais ils ne travaillent pas dans Firefox et Opera.
    FF et Opera ont différentes gradient de syntaxe, vous pouvez lire certains de il ici (il suffit de google vous-même pour le reste): developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients
    Merci, David. Seront à faire 🙂

    OriginalL'auteur David Hellsing

  3. 2

    Oui, vous pouvez utiliser la propriété Box-Shadow,

     box-shadow:0px 0px 0px 3px #666;

    Mis à jour le Violon est ici:

    http://jsfiddle.net/UxSdU/2/

    Mise à JOUR:

    Pour cela, vous pouvez utiliser de la frontière:

    Mis À Jour Le Violon:

    http://jsfiddle.net/UxSdU/6/

    Vous avez effectivement répondu à une autre question. +1 je me demandais comment obtenir à fine bordure trop. 😀 Mais ce que je veux ici, c'est que léger éclat sur la section du bas. Pouvez-vous voir? Sur le côté gauche.
    voir ma réponse mis à jour et le violon, tu veux dire?
    Pas de. Pas la frontière. Voir ceci de l'image. J'espère que son perceptible. Il est vraiment difficile de voir. Dans certaines résolutions d'écran.
    si j'ai interprété la question correctement. la réponse est de nouveau box-shadow. Jouer avec shadow box valeurs. Je suppose que probablement, vous pourriez avoir besoin de modifier légèrement la mise en page aussi...

    OriginalL'auteur defau1t

  4. 0

    Jouer avec cela, un peu http://www.colorzilla.com/gradient-editor/ et vous pourriez être en mesure de comprendre quelque chose. Une image de fond serait beaucoup plus facile si. Aucune raison pourquoi vous ne pouvez pas utiliser cette image?

    J'ai quelques contrôles de formulaire qui va à l'intérieur de la zone blanche. Si j'utilise une image, lorsque le navigateur est redimensionnée, l'image se déplacer lorsque les commandes sont en un seul endroit. C'est pour une disposition horizontale. Ont eu beaucoup de difficulté avec la même approche que précédemment. De Plus, ce site a beaucoup de grandes images dans déjà. Im essayant de garder l'utilisation des images à un minimum d'évincer certaines performances.

    OriginalL'auteur James Coyle