Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jan 2007
    Posts
    21
    Member #
    14657
    If you go to the following site: ziggiescafe.com you will notice a shadow effect around the outside of the main body. It makes the center part seem to jump off the page. I was wondering how you could make this effect and what type of code you need to do it. (CSS, HTML, Java, etc.) I am fairly new to web design and I am currently creating a page for a friend and I would like to use this effect. He does have a deadline for the site being up and I am making it with tables because I haven't quite figured out CSS. If there is a way that I can add this effect to the main HTML table that I have created, that would save a lot of time.

  2.  

  3. #2
    Junior Member ryanyoungsma's Avatar
    Join Date
    Dec 2006
    Location
    MA
    Posts
    8
    Member #
    14548
    This effect is not created using CSS, and I am not sure that there is a way by only using CSS to do that. This site uses images to create the shadow. There are 4 different images used to create it. Most likely they are creating a background image in the CSS.

    If you use Firefox 2.0, download the development add-on. There is a way to view all image information with that add-on.

  4. #3
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    Quote Originally Posted by dantheman
    If you go to the following site: ziggiescafe.com you will notice a shadow effect around the outside of the main body. It makes the center part seem to jump off the page. I was wondering how you could make this effect and what type of code you need to do it. (CSS, HTML, Java, etc.) I am fairly new to web design and I am currently creating a page for a friend and I would like to use this effect. He does have a deadline for the site being up and I am making it with tables because I haven't quite figured out CSS. If there is a way that I can add this effect to the main HTML table that I have created, that would save a lot of time.
    The shadow effect that the site uses to do this like shown above is images, however it is possable to do that effect with tables using code like the following:
    HTML Code:
    <!--for a top shadow-->
    <table>
    <tr>
    <td colspan="2" style="v-align:bottom;"><img src="shadow_top.bmp" alt="Top shadow" style="width:100%;" /></td>
    <td style="text-align:right;"><img src="shadow_side.bmp" alt="left shadow" style="height:100%;" /></td>
    <td>
    <!--this is where the body of the thing you want to levitate would go -->
    </td>
    </tr>
    </table>
    The images would be just gray bars, and i have those attached note that you may have to change the colour to suit the background, just darken the background colour, as the colour of the bars.
    also the padding of the cells would have to be 0px, and the spacing of the cells would have to be 0px
    Thee Pyro Wolf

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The achievement using CSS and divs can be seen at A List Apart at the article entitled Onion Skinned Drop Shadows. It bears mentioning that this is only one of the solutions, and there are others on ALA.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com