CODEWITHSUNDEEP
htmlcssgradient
Isuru
Isuru

Reputation: 31323

How to create a "shiny" effect like this using CSS gradients?

Is it possible to create the following using CSS only?

enter image description here

I have created the container and the rounded corners. Fiddle here.

But I don't know how to get the slight shiny effect. Is it possible to do this in CSS? If so how?

Below is the code I have written so far.

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;   
}

Upvotes: 4

Views: 18652

Answers (4)

KBN
KBN

Reputation: 2984

Close enough I hope:

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%);
}

Upvotes: 16

David Hellsing
David Hellsing

Reputation: 108510

If you are looking for the subtle gradient glow, something like this should do it:

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

This is for webkit, you can apply the -moz and -o equivalents depending on your support table.

You can also add multiple box shadows to create the black shadow as well, something like:

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

Here is a demo: http://jsbin.com/opinaj/4

enter image description here

Upvotes: 6

defau1t
defau1t

Reputation: 10619

Yes, you can use the Box-Shadow property,

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

Updated Fiddle is here:

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

UPDATE:

For that you can use border:

Updated Fiddle:

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

Upvotes: 2

James Coyle
James Coyle

Reputation: 10428

Play around with this a little http://www.colorzilla.com/gradient-editor/ and you may be able to figure something out. A background image would be much easier though. Any reason why you can't just use that image?

Upvotes: 0

Related Questions