Results 1 to 4 of 4

Thread: Relative Clipping

  1. #1
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Relative Clipping

    Hey everyone!

    This is my first post in these forums and I'm really new to CSS. This is my first attempt at designing a "real" website.

    I've been amazed by the things CSS3 can accomplish (no more wasting loading time on images!), but I've ran into a couple issues. Here's one:

    I've been trying to use the clipping of a box shadow to get the desired gradient effect. The only issue is, it involves clipping the sides, which are affected by relative positioning and a fluid layout. I've tried using a gradient to get a similar effect, but the colors never seem quite right. I would also prefer not to use an image.

    Now, I know it's pretty explicitly stated in clipping's documentation that the feature will only work with absolute positioning, but I'm curious to see if JavaScript can be used as a work-around. Any thoughts?

    Images (edited to remove personal information):


    An image of the image without clipping is shown above.


    And an image with clipping. Notice the many dashes, used to make sure that the entire footer's length can be clipped. I would like those to go as well, if possible.

    Thanks in advance!
    Last edited by J4G; 06-28-2011 at 05:39 PM. Reason: Solved

  2. #2
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    *bump*

  3. #3
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    How about if you just use a tiny div above the red one that has a gradient from white to red like this:

    Code:
      .gradient {
       /* fallback/image non-cover color */
       background-color: #990000; 
    
       /* Firefox 3.6+ */
       background-image: -moz-linear-gradient(#ffffff, #990000);
    
       /* Safari 4+, Chrome 1+ */
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#990000));
    
       /* Safari 5.1+, Chrome 10+ */
       background-image: -webkit-linear-gradient(#ffffff, #990000); 
    
       /* Opera 11.10+ */
       background-image: -o-linear-gradient(#ffffff, #990000);
    }
      </style>
    dbc
    Last edited by deathbycheese; 06-28-2011 at 04:46 PM.

  4. #4
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply, but like I said, I've already tried using gradients. I fixed the problem though, with the simple line of CSS code:
    Code:
    #Table {overflow: hidden;}

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
  •