CODEWITHSUNDEEP
cssgradientphotoshop
Tomer
Tomer

Reputation: 17930

How to mimic Photoshop "Color Overlay" in CSS

I have a button designed with Photoshop. The button has a gradient defined and I know how to generate it using Ultimate CSS Gradients Tool.

The problem is the button also has a 'Color Overlay' and I don't know how to convert it to css terms?!

UPDATE:

O.K, just to clarify, I know CSS quite well and i know how to set styles to elements.

I have this gradient:

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjdiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iIzZhNzI3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(top,  rgba(179,183,189,1) 0%, rgba(106,114,125,1) 85%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,183,189,1)), color-stop(85%,rgba(106,114,125,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(179,183,189,1) 0%,rgba(106,114,125,1) 85%); /* W3C */

But like i mentioned, In photoshop there is also a Color Overlat defined which makes the button a bit darker, so in photoshop the button looks darker then in the browser, So my question is how do i combine the gradient and the Color Overlay in one CSS rule to make the button look exactly the same as in photoshop.

Upvotes: 1

Views: 3784

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

Update:

Demo

A little better button Demo

Demo with overlay

Just declare a class for button say .design

.design {
   /* Gradient code goes here */
}

Now you can use this class as follows

<button class="design">Designed Button</button>

OR

<input type="button" class="design" value="Designed Button" />

For the COLOR OVERLAY, you can wrap the button inside a div with display: inline-block and position: relative so that it will wrap the button appropriately and use another div which is positioned absolute inside the wrapper div with a height and width defined as 100% and assign opaque background color using rgba() and define opacity as needed

Also if you want to be precise with your CSS declarations, you can particularly define .design class as input[type=button].design or button.design whatever you use, so that .design will not be applied to any other element

Upvotes: 2

Related Questions