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..

    jquery-ui icons not showing in production environment

    How to apply CSS to part of some text without breaking the text content itself

    CSS(3): How to display elements after each other

    Autohide Scrollbars - Show only when necessary

    How can I specify relative positioning in HTML?

    How Should I Send HTML/CSS Content To A Server?

    How to make a vertical CSS menu with arrows on the right of each entry?

    How to refresh div using ajax refresh?

    How to figure out which lines of css is not actually affecting anything again?

    How can I place two grid items above each other using Susy?

    How to access files from this hierarchy?

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    How to set the styles on “*” and pseudo states with JavaScript? [closed]

    How can I make this kind of a border?

    How do I validate day and month?

    How to use JavaScript to scale an image to fit

    CSS & Button: How to override native CSS of html buttons element?

    How to trigger click on links with the same class?

    How to efficiently update css on multiple selector classes in jquery

    jQuery: How to add a string to a css property

    How to add fade in and fade out effect in CSS animations no javascript?

    How to create the equivalence of CSS “ease” in jQuery?

    How to attach a CSS stylesheet to FXML?

    How to load CSS in specific page in php

    Rails How to include a scss file in a specific erb view? [duplicate]

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    how to align the content to center of page using css

    How can I create this button in CSS3?

    How to find all inputs which is not inside one div with css selector?

    How to do this specifically things in CSS for a table