CODEWITHSUNDEEP
htmlcss
voodoo417
voodoo417

Reputation: 12111

Single <div> with Box-Shadow = 6 cicles. How it works?

Question ,surely, for CSS3-guru. I am used box-shadow for buttons,modals,etc. But I never would have thought that we can using like this.

HTML

<div></div>

CSS

div {
   border-radius:50%;
   height:2px; width:2px; /* To allow border-radius to work */
   position:absolute;
   top:50%; left:50%;
   margin-top:-1px; margin-left:-1px;
   box-shadow:
   -75px -125px 0 40px #6cce74,
   75px -125px 0 40px #c18d46,
   150px    0px 0 40px #c14745,
   75px  125px 0 40px #2e1e5b,
   -75px  125px 0 40px #9c37a6,
  -150px    0px 0 40px #76bdd1;
 }

I saw only code and result (without explanation). And now i trying understand how single div with enumeration of six (N) box-shadow render to it :

OUTPUT

enter image description here

Please, explain me ( or give me link with any explanation), how renderer works in this case. Thanks!

JSFiddle: http://jsfiddle.net/9Rddm/1/.

Upvotes: 2

Views: 1053

Answers (2)

kylieCatt
kylieCatt

Reputation: 11039

You can separate different instances of a box-shadow with a comma, this is useful for creating 3D buttons or text boxes that look "pressed" into the page.

The relevant code:

box-shadow:
   -75px -125px 0 40px #6cce74,
   75px -125px 0 40px #c18d46,
   150px    0px 0 40px #c14745,
   75px  125px 0 40px #2e1e5b,
   -75px  125px 0 40px #9c37a6,
  -150px    0px 0 40px #76bdd1;

Each one of those declarations is a separate shadow. So in your example the code creates a small empty (thus invisible), circular div and gives it 6 different shadows with different positions. This effect can also be used for this effect:

HTML:

<input type='text'>

CSS:

html {
background: grey;
}

input {
    border: 1px solid black;
    box-shadow: inset 1px 1px 9px rgba(0,0,0,.3), inset -1px -1px 9px rgba(0,0,0,.3); /* note the separated declarations */
    line-height: 25px;
    border-radius: 4px;
}

http://jsfiddle.net/9Rddm/4/

Altering anyone of the properties in the box-shadow rule would alter one of the six-circles

Upvotes: 1

Joeytje50
Joeytje50

Reputation: 19112

The box-shadow style has the following syntax here:

box-shadow: [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]+

(source: MDN) - where the + represents that the group can be repeated 1 or more times, and the ? represents that that value is optional.

This means that the first dot, created by box-shadow: -75px -125px 0 40px #6cce74,, has an offset with coordinates (-75, -125) relative to the div it's made from. It has a blur radius of 0 (so no blur) and it has a spread-radius of 40px (so it's 40px in radius).

This is then repeated for the other 5 dots with different coordinates and colours. Each shadow gets different coordinates, and a different colour, which results in the 6 dots being positioned and coloured this way.

PS: I suggest (in Chrome:) right-clicking on the result frame in that fiddle, then clicking "Inspect Element" (bottom option), and then navigating down the DOM tree you'll find (you'll most open a panel that has either <html> or <body> selected, you'll want to navigate down that tree to end up on the <div>). In that interface you'll see what styles are applied to the element. What you could do to make things a bit clearer is first clicking on the box-shadow style in the styles part of the panel that showed up, then placing your cursor on any number you see there, and then pressing the up/down arrow. If you press the up/down arrow, it will in/decrement the number you've selected, and dynamically update the result too. If you do that, you can see directly what happens for each value you change.

Upvotes: 5

Related Questions