Menu
I saw some apps where even though a black icon was included, some how the app used CSS to convert the icon into a different colour. I can't seem to repeat this process
Here's my back.css file:
.dashboard-buttons a {
width: 80px;
height: 80px;
border: 1px solid #ccc;
margin: 0px 5px;
display:inline-block;
border-radius: 10px;
background:white;
text-decoration:none;
-moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
}
.dashboard-buttons a:hover {
text-decoration:underline;
}
.dashboard-buttons span,
.dashboard-buttons img {
display:inline;
font-size: 12px;
font-weight:bold;
}
.dashboard-buttons .sessions img {
background-color:#C60;
}
.dashboard-buttons .sessions img {
-webkit-mask-image:url(mobile/images/calendar2.png)
}
And the html code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="back.css" />
<title>West</title>
</head>
<body>
<div class="dashboard-buttons">
<a href="sessions.php" class="sessions">
<img src="mobile/images/calendar2.png">
<span>Sessions</span>
</a>
</div>
</body>
</html>
But it's not working in my chrome browser. Am i missing something?
Additional notes I only need to support modern webkit browsers. Don't need to worry about IE or anything else.
I posted my code here http://jsfiddle.net/ZnbF3/ . First time using jsfiddle, hopefully it's working? If not, just copy the html file and css file i already posted above. I have the calendar2.png attached to this question.
321
You can change the colour by using CSS-styling. The icons are actually text, so setting the "color" property changes the colour.
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
Customizing icons After inserting an icon, there are several different ways you can customize it. To change the color of an icon, select the icon you'd like to edit. The Format tab will appear. Then click Graphics Fill and select a color from the drop-down menu.
Your code isn't working because the src attribute is being used to show up the black version on top of the orange version. You will be able to get the desired result only with CSS, this way:
.dashboard-buttons .sessions .img { width: 60px; height: 60px; background-color: #C60; }
.dashboard-buttons .sessions .img { -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png'); }
Here is the changed HTML snippet:
<div class="dashboard-buttons">
<a href="sessions.php" class="sessions">
<div class="img"></div>
<span>Sessions</span>
</a>
</div>
And here is a working sample of it.
185
Try use background image for your image, then use another div inside the first one to apply the alpha
<style type="text/css">
#image{background-image:url(/img/2012-05-24_1834.png);width:400px;height:400px;}
#image #image_mask{background-color:red;width:400px;height:400px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
</style>
</head>
<body>
<div id="image">
<div id="image_mask"></div>
</div>
</body>
sry for not using your code, i started to work in your awnser before you posted it
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
