CODEWITHSUNDEEP
htmlcss
Pierre-Louis Gottfrois
Pierre-Louis Gottfrois

Reputation: 17631

How would you do this CSS effect?

I wonder how I could do this shadow effect using pure CSS ? If some one can give me tips.

css effect

Upvotes: 1

Views: 124

Answers (2)

Michas
Michas

Reputation: 9428

My idea.

http://jsfiddle.net/dBcAE/1/

CSS:

body {
    background-color: silver;
}

#alfa {
    padding: .5em; 
    background-color: orange;
    border-radius: 1em 1em 0 0; 
    border-top: solid .5em white;
    border-left: solid .5em white; 
    border-right: solid .5em white; 
    margin-left: .5em;
    margin-right: .5em; 
}

#wita {
    margin-top: 1em;
    height: 1px;
    box-shadow: 0 -1em 4px black;
}

HTML:

<div id='alfa'>
    Alfa
</div>
<div id='wita'> 

</div>

To make a nice shadow, I've created an additional div for it.

Upvotes: 2

Ēriks Daliba
Ēriks Daliba

Reputation: 718

Either by adding rounded background, or:

 -moz-box-shadow: 0 0 1em white;
-webkit-box-shadow: 0 0 1em white;
        box-shadow: 0 0 1em white;

last one has browser compatibility limitations.

Upvotes: 4

Related Questions