The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Shadows on Divs and.....
Waynoo
post Feb 6 2007, 05:42 AM
Post #1





Group: Members
Posts: 2
Joined: 6-February 07
Member No.: 1,793
Hi there
I'm new to the forums but i'm sure ill be visiting much more smile.gif


I want to create the effect of a shadow around the edge of a website (iv'e seen it on other sites but cant find any as an example atm =p). So i wonder if any of you know how to smile.gif an help/ideas would be appretiated!

Also i created a photoshop Website header with build in links (at the bottom of it), ive seen it in various tutorials. Is there a way to add links to the image? so it can be used as a header/link bar on a site or is this not a good way to do it?

look foward to your answers

cheers

Wayne
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Waynoo
post Feb 6 2007, 09:09 AM
Post #2





Group: Members
Posts: 2
Joined: 6-February 07
Member No.: 1,793
http://www.sitetutor.com/

that shows the shadow around the main content, thats the effect i want
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2007, 12:03 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It's probably done with images distributed in the outmost table cells.

There's a good page about how to do it with CSS but I don't find the URL right now. Anyone else have it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 6 2007, 01:29 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
The W3C has a page on drop shadows. I've played with it a bit. It won't work on MSIE unless you use the zoom:1 hack.

They also have a page on rounded corners and drop shadows with a soft edge, but I haven't played with it. It looks like it has some good links though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2007, 01:39 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
MSIE also supports proprietary shadow "filters", see http://msdn.microsoft.com/workshop/author/.../dropshadow.asp and http://msdn.microsoft.com/workshop/author/...ters/shadow.asp
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Feb 6 2007, 02:02 PM
Post #6


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10
Interesting ideas here: http://www.saila.com/usage/shadow/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2007, 05:00 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(john f @ Feb 6 2007, 08:02 PM) *

Interesting ideas here: http://www.saila.com/usage/shadow/

Note that such text shadows will look like duplicated text in browsers that don't support the CSS. A slightly safer version might be to generate the shadow text copy with javascript.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Peter1968
post Feb 6 2007, 05:39 PM
Post #8


Serious Coder
*****

Group: Members
Posts: 448
Joined: 23-September 06
Member No.: 213
text-shadow doesn't work on any browser I've tested. Shame that, as you could do some interesting things with it, without resorting to IE filters, or images.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Feb 7 2007, 03:30 PM
Post #9


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10
See:http://garyblue.port5.com/webdev/dropshadow.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 7 2007, 05:04 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
QUOTE(john f @ Feb 7 2007, 12:30 PM) *
See:http://garyblue.port5.com/webdev/dropshadow.html
The "Drop shadows on individual letters" examples demonstrate CSS dependency. When CSS is disabled/unavailable, the content appears garbled.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Peter1968
post Feb 7 2007, 05:20 PM
Post #11


Serious Coder
*****

Group: Members
Posts: 448
Joined: 23-September 06
Member No.: 213
In what browser does it appear garbled? In FF 2.0.0.1 and Opera 9.1, with CSS disabled, all non-styled text renders fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 7 2007, 06:01 PM
Post #12


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
With CSS enabled, you get
QUOTE
This is a demo of shadowing letters only
with shadowed letters. With CSS disabled, you get
QUOTE
This is a demo of shadowing letters onlyThis is a demo of shadowing letters only
instead. There are worse ways for content to be garbled, but still, it's pretty ugly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Peter1968
post Feb 7 2007, 07:03 PM
Post #13


Serious Coder
*****

Group: Members
Posts: 448
Joined: 23-September 06
Member No.: 213
Oh, I see what you're saying. I thought you were seeing overlapping or mangled text or something.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 11:36 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC