Results 1 to 10 of 10

Thread: Tablecloth Background

  1. #1
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tablecloth Background

    I'm attempting to make a tablecloth background out of pure css. I'm trying to make a set of red vertical lines, overlaying the white space of the
    background-color: #fff;
    I'd also like to make another set of red horizontal lines, the same color as the first set of lines. When each of the lines meet every other square, I'd like the red to intensify, and deepen in red.
    Essentially, I'm looking for something like this:

    The problem is, I'm not sure how to make repeating lines, or how to combine the colors of the lines in CSS.
    I'm attempting to build my background with the aid of webkits, and I program in XHTML 1.0 Strict.

  2. #2
    Join Date
    May 2010
    Posts
    10
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    funny i saw (and answered) this post elsewhere. good luck with it.

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,510
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    If you've got a solution to their problem, why don't you post it?

  4. #4
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Code:
    background-color:white;
    background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
    	linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
    background-size:50px 50px;

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by ApacheTech View Post
    Code:
    background-color:white;
    background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
    	linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
    background-size:50px 50px;
    Hmmm..... Doesn't seem to be displaying for me....

  6. #6
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Is there a reason that the background needs to be built as separate lines? Couldn't you just build the image you want in Photoshop and then apply it as a fixed background-attachment?

  7. #7
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Quote Originally Posted by itivae View Post
    Is there a reason that the background needs to be built as separate lines? Couldn't you just build the image you want in Photoshop and then apply it as a fixed background-attachment?
    Read the first words of the first post in the thread.

    Quote Originally Posted by Jaytheforth View Post
    I'm attempting to make a tablecloth background out of pure css.

  8. #8
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    Hmmm..... Doesn't seem to be displaying for me....
    Here it is in action:

    http://lea.verou.me/css3patterns/#tablecloth

  9. #9
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by ApacheTech View Post
    Thanks, may have just been something up with how I implemented the CSS.

  10. #10
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    Thanks, may have just been something up with how I implemented the CSS.
    They have it set up as inline tags on the actual page (I mined the page with FireBug), but it's attached to the body tag. Fully formed CSS would be:

    Code:
    /* GLOBAL STYLES
    /---------------------------------*/
    body
    {
        background-color:white;
        background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
        background-size:50px 50px;
    }

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
  •