webdevRefinery Forum: Need help in CSS Box Shadow - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline GeekyMacBoy1 

  • Group: Members
  • Posts: 36
  • Joined: 28-December 10
  • LocationHK
  • Expertise:Graphics

Posted 05 April 2012 - 05:53 AM (#1)

Need help in CSS Box Shadow


I'm trying to add an inner shadow to my background, with no insets. However, I can't get it working. Here's the code.


I just started on the website, so all I did was add a background color. But couldn't get the box shadow working...


Posted Image

What should I do?
0


User is offline Renegade 

  • 418 I'm a teapot
  • Group: Members
  • Posts: 748
  • Joined: 08-March 10
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 05 April 2012 - 06:04 AM (#2)

Your CSS seems to be valid,
box-shadow
syntax is correct. The problem is that you have no heights or widths set on the elements. Try adding
width: 100px
and
height: 100px
to the
.shadow
. Also, have you defined an element with the
shadow
class? For example,
<div class="shadow"></div>
.
http://adriancooney.ieGithubTwitterDribbbleForrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";
0


User is offline Varemenos 

  • Group: Members
  • Posts: 108
  • Joined: 22-October 11
  • LocationGreece
  • Expertise:HTML,CSS,Graphics

Posted 05 April 2012 - 06:16 AM (#3)

If the shadow class was meant to style the body element, then you do it like this:
body.shadow

not
body .shadow


though this wouldnt make any sense, since there is only 1 body tag in an HTML file, so just copy the content of .shadow's style inside the body's style
body{
    background-color:...;
    box-shadow: ...;
}

/* or */

body{
    background-color:...;
}

.shadow{
    box-shadow: ...;
}


if you want to style all the elements that have the .shadow class, then you shouldnt use this:
body .shadow{
    /* your style*/
}

but this:
.shadow{
    /* your style*/
}

0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 05 April 2012 - 09:37 AM (#4)

Does this not work?

body{
    background: #e0e0e0;
    box-shadow:0 0 15px #000 inset;
}


What your code posted is doing is lookin for an element with
.shadow
applied that is nested inside the body tags.

(I omitted vendor prefixes from my example, make sure to include them)
DO NOT OPEN THIS

Spoiler
0


User is offline Hyde 

  • Group: Members
  • Posts: 1562
  • Joined: 08-March 10

Posted 05 April 2012 - 09:41 AM (#5)

Varemenos, on 05 April 2012 - 06:16 AM, said:

If the shadow class was meant to style the body element, then you do it like this:
body.shadow

not
body .shadow


No,
body .shadow
definitely works.
Hyde | HTML & CSS | PHP & SQL | Objective-C | Java | Basic JavaScript
0


User is offline Varemenos 

  • Group: Members
  • Posts: 108
  • Joined: 22-October 11
  • LocationGreece
  • Expertise:HTML,CSS,Graphics

Posted 05 April 2012 - 10:07 AM (#6)

Hyde, on 05 April 2012 - 09:41 AM, said:

No,
body .shadow
definitely works.

I think you didnt get what i was trying to say.

http://jsfiddle.net/Ue499/1/ vs http://jsfiddle.net/Ue499/2/

even though that makes no actual sense, i think this is what he was trying to do.
0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 05 April 2012 - 10:51 AM (#7)

Varemenos, on 05 April 2012 - 10:07 AM, said:

I think you didnt get what i was trying to say.

http://jsfiddle.net/Ue499/1/ vs http://jsfiddle.net/Ue499/2/

even though that makes no actual sense, i think this is what he was trying to do.


Why are you doing
body.shadow
and not just
.shadow
? Less selectors is better.
DO NOT OPEN THIS

Spoiler
0


User is offline Varemenos 

  • Group: Members
  • Posts: 108
  • Joined: 22-October 11
  • LocationGreece
  • Expertise:HTML,CSS,Graphics

Posted 05 April 2012 - 10:55 AM (#8)

arronhunt, on 05 April 2012 - 10:51 AM, said:

Why are you doing
body.shadow
and not just
.shadow
? Less selectors is better.


read my first post
0


User is offline Renegade 

  • 418 I'm a teapot
  • Group: Members
  • Posts: 748
  • Joined: 08-March 10
  • Expertise:HTML,CSS,PHP,Javascript,Node.js,SQL,Graphics

Posted 05 April 2012 - 10:57 AM (#9)

arronhunt, on 05 April 2012 - 10:51 AM, said:

Why are you doing
body.shadow
and not just
.shadow
? Less selectors is better.


That's uh, still one selector. Has the OP actually any content in body?
http://adriancooney.ieGithubTwitterDribbbleForrst
We all die. The goal isn't to live forever. The goal is to create something that will.

Array(16).join({}-{}) + " Batman!";
0


User is offline arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 05 April 2012 - 11:01 AM (#10)

Varemenos, on 05 April 2012 - 10:55 AM, said:



Missed that one. :unsure:
DO NOT OPEN THIS

Spoiler
1


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services