How to create such (see image below) effect using pure HTML JS and CSS?


Tags: javascript,html,css,background

Problem :

How to create such (see image below) effect using pure HTML JS and CSS?

alt text

For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)



Solution :

You need a different approach.

Check out this url: http://www.eyecon.ro/colorpicker/.

As you can see when you move slider up and down it changes the background of the picker div.

But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png

..because parent div is using the actual colour:

<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>

Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.

And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.

So in the theoretical code:

body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }

<body>
  <div id="background-overlay">
  ..content goes here
  </div>
</body>

The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))

Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.


    CSS Howto..

    How to center a span inside a TD?

    How can I make the ul list the same size as the input element in terms of width?

    How do i add a fading border to my nav bar CSS

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    show hover by default using CSS

    How to align this text in CSS?

    How to center navigation bar items CSS

    How to set keyboard focus to a representing parent element of a list

    How apply CSS to browse button

    How can I switch overlapped elements with CSS transitions?

    In a framework using rewrite rules, how best to integrate CSS and JS?

    How can I get the box with text to stick to the top of each wrap div?

    How to add number to current CSS width with jQuery

    How to change css class for the inputfield and label when validation fails?

    asp .net: how to change css on span tag in c#

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How do I put several elements on the second row in a div

    How to display 'fit' image in CSS or HTML?

    How do I format tabs in Blueprint CSS?

    How to change width of

    How to effectively use the Frameless grid?

    links are showing up on each line, instead of inline

    Content attribute in CSS to show image icon

    how to add line break in HTML using jQuery

    How can I add pictures to my web via CSS

    How to make a Xul button bigger using css as it get focus?

    How to customize the HTML5 input range type looks using CSS?

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?