Below is Zuckerberg's profile picture.
 |
| Mark Zuckerbeg, founder of Facebook. |
I'm a little late to the party, but here's my challenge - apply the rainbow filter using only CSS!
There's already a Facebook feature for that!
Why, of course there is. But this will serve as a useful little exercise for CSS and RGB! Let's use another picture of Zuckerberg for this. |
| zuck.jpg |
We begin with some HTML.
<!DOCTYPE html>
<html>
<head>
<title>Gay Pride</title>
<style>
.gaypride
{
background:url(zuck.jpg) center
center no-repeat;
width:200px;
height:200px;
background-size:cover;
}
</style>
</head>
<body>
<div class="gaypride">
</div>
</body>
</html>
<html>
<head>
<title>Gay Pride</title>
<style>
.gaypride
{
background:url(zuck.jpg) center
center no-repeat;
width:200px;
height:200px;
background-size:cover;
}
</style>
</head>
<body>
<div class="gaypride">
</div>
</body>
</html>
Instead of an img tag for Zuckerberg's pic, we have a div tag that uses his pic as a background image. The div has been given a class, appropriately named gaypride, for this.
height and width properties have been set to 200 pixels. Feel free to adjust!
The background-size property has been set to cover, so Zuckerberg's shit-eating grin is plastered all over the div.
Now, what do we have?
Excellent. Now to super-impose those colorful translucent bars over this pic! To do so, we create the CSS class bar.
<style>
.gaypride
{
background:url(zuck.jpg) center center no-repeat;
width:200px;
height:200px;
background-size:cover;
}
.bar
{
width:100%;
height:14.5%;
position:relative;
float:left;
}
</style>
.gaypride
{
background:url(zuck.jpg) center center no-repeat;
width:200px;
height:200px;
background-size:cover;
}
.bar
{
width:100%;
height:14.5%;
position:relative;
float:left;
}
</style>
width has been set to 100%, so whatever width your div will be eventually, no sweat! The bar covers it all the way.
position is set to relative and float to left. So anything that doesn't fit into the width of the containing div floats to the next line! Which is a certainty because your width, as noted above, has been set to 100%.
So you're probably wondering why the height is 14.5%. That's because we are going for 7 bars - Red, Orange, Yellow, Green, Blue, Indigo and Violet. And we want the entire height of the div to be covered. So 100% divided by 7 is roughly 14.5%.
More HTML. This time, divs have been added inside the first div. Each of these divs has the CSS class bar attached to it. The background colors for each one is different, obviously. And the alpha value for each bar has been set to 0.3. Again, feel free to adjust!
<body>
<div class="gaypride">
<div class="bar" style="background-color:rgba(254,0,0,0.3);"></div>
<div class="bar" style="background-color:rgba(254,154,0,0.3);"></div>
<div class="bar" style="background-color:rgba(254,254,0,0.3);"></div>
<div class="bar" style="background-color:rgba(0,254,0,0.3);"></div>
<div class="bar" style="background-color:rgba(0,0,254,0.3);"></div>
<div class="bar" style="background-color:rgba(154,0,154,0.3);"></div>
<div class="bar" style="background-color:rgba(254,0,254,0.3);"></div>
</div>
</body>
<div class="gaypride">
<div class="bar" style="background-color:rgba(254,0,0,0.3);"></div>
<div class="bar" style="background-color:rgba(254,154,0,0.3);"></div>
<div class="bar" style="background-color:rgba(254,254,0,0.3);"></div>
<div class="bar" style="background-color:rgba(0,254,0,0.3);"></div>
<div class="bar" style="background-color:rgba(0,0,254,0.3);"></div>
<div class="bar" style="background-color:rgba(154,0,154,0.3);"></div>
<div class="bar" style="background-color:rgba(254,0,254,0.3);"></div>
</div>
</body>
Now what do we have?
And here we are, ladies, gentlemen and all in-between. The CSS Rainbowlizer.
Last words on the Legislation
Warning: This may come across as flamebait. It's certainly not entirely in keeping with the neutral nature of this tech blog.Do I approve of same-sex marriage? Hell no, I don't. Actually, I don't approve of any kind of marriage, for that matter. I happen to think matrimony is one of the most heinous forms of slavery ever invented. Freedom to love... yes, absolutely. Freedom to marry... well, let's just say that I don't think the words "freedom" and "marriage" go together.
I'm watching the wars break out on Facebook and other Social Media with no small amount of amusement. The Legislation happened, folks. Nothing any of us can do about it. So, for those who support the LGBT movement, nobody likes a bad loser, but bad winners are worse. Maybe you should quit your victory-wanking in the faces of the others. And for those who feel you suffered a great loss because it's now legal in the US for two men to live together and have vigorous noisy buttsex... suck it up, whiners. Life goes on.
Have a nice gay, I mean, day.
T___T
T___T
No comments:
Post a Comment