SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Background modification for website

    I'm looking for an idea (or even better - realization ) to make the following background more compatible with transparent banners (image of boots with text in this example):


    As you may see, dumbbell is dark grey, surrounded with too bright colors. This makes text hardly readable, so in my opinion, there should be less contrast difference. I'm not sure what are the viable options here, perhaps you might have any nice ideas?

    Thanks!

    Here is the source background: http://shrani.si/f/2U/12C/2yxAUglq/i...2327medium.jpg
    And that's how website will roughly look like (with different background amongost other things of course): <snip/>
    Last edited by Mittineague; Nov 16, 2013 at 12:44. Reason: removing unnecessary link

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by krneki View Post
    This makes text hardly readable, so in my opinion, there should be less contrast difference. I'm not sure what are the viable options here, perhaps you might have any nice ideas?
    My preferred option is to put a box around the text with a semi-transparent background, so that you can still see the underlying image.

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Bucharest
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    My preferred option is to put a box around the text with a semi-transparent background, so that you can still see the underlying image.
    Or maybe try adding a blur option to it ( gaussian blur - 5-8px )!

  4. #4
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where should I put Gaussian blur to, banner (slider) or on the background?

    Won't semi-transparent square block around banner make design less minimalistic, modern and sleek?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by krneki View Post
    Where should I put Gaussian blur to, banner (slider) or on the background?
    I don't think you can do that with CSS—unless there's some experimental new feature I haven't heard of.

    Won't semi-transparent square block around banner make design less minimalistic, modern and sleek?
    Heh, what I'm suggesting is very modern and all the rage, as far as I can tell. And you need the text to be readable, too, after all. A subtle transparent bg color should be fine. E.g. something like this (replace the background color with an image):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    body {background: #108a7f; }
    .wrapper {display: table; text-align: center; margin: 0 auto;}
    .wrapper div {color: white; font-size: 3em; font-family: sans-serif; padding: 30px; background: rgba(0,0,0,0.2); border-radius: 10px;}
    i {display: block; font-style: normal;}
    b {font-weight: normal; color: #f96c6c;}
    
    </style>
    </head>
    <body>
    
    <div class="wrapper">
        <div>
        <i>Hiking Boots</i>
        <b>20%</b> Off
        </div>
    </div>
    			
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Bucharest
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't think you can do that with CSS—unless there's some experimental new feature I haven't heard of.
    I made some experiments with css3 blur check it out http://jsbin.com/OFIreya/4

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mironcatalin View Post
    I made some experiments with css3 blur check it out http://jsbin.com/OFIreya/4
    Ah yes, I have seen the blur effect. It's not widely usable yet, and sucks a lot of power, from what I hear, but certainly something to watch.


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
  •