SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2000
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Shadow or Images?

    Does anyone know how espn.com is getting the drop shadow effects on their redesigned front page (http://espn.go.com/main.html)?

    There's a drop shadow on the right side of the middle content column, as well as under the main ESPN logo at the top of the page. There is also a drop shadow under the "Top Story" headline text.

    I was wondering if this is CSS or images, and if it is CSS, how it is done.

    Any input is appreciated.

    Thanks!

  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're images. Well, the espn logo and the headline are Flash, but they seem to have images there too. And the middle column drop shadow is a background image.

    However, have a read of http://www.evolt.org/article/comment/17/18583/ for a look at how it can be accomplished using CSS
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ye gods...i tried to have a look at espn's source code but gave up when my eyes started bleeding...
    sorry, may have another look later tonight...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2000
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. After I asked I opened it in IE6 on my pc and ctrl+clicked on the column drop shadow and lo and behold I could save the image.

    I asked because the effect was there in different browsers, both pc and mac, and I haven't seen a CSS effect that worked on both sides.

    I'm thinking about doing a similar design, and I was hoping I could get it using CSS. But the site I'm doing is rather simple and small and so images will work just fine for the drop shadows.

    Thanks again.

  5. #5
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried to have a look at espn's source code but gave up when my eyes started bleeding...
    I know, Validate they may do, but it's hardly semantic, structural html!

    Oh, but we are picky...
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •