Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Dec 17, 2015

Embed
What would you like to do?
CSS Transparency
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<title>CSS Transparency</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="img-wrap1 tile">
<img class="transparent" src="//placekitten.com/g/212/212" style="width:200px;">
</div>
<div class="stack tile">
<div class="blue transparent triangle"></div>
<div class="yellow transparent triangle"></div>
<div class="red transparent triangle"></div>
<div class="white transparent triangle"></div>
<img class="transparent" src="//placekitten.com/g/212/212" style="width:200px;">
</div>
<div class="img-wrap2 tile">
<img class="transparent" src="//placekitten.com/g/212/212" style="width:200px;">
</div>
</body>
</html>
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.tile {
position: relative;
display: inline-block;
margin: 10px;
}
.tile > img {
display: block;
}
.img-wrap1 {
background-image: url(http://i.imgur.com/LV4BYGp.png);
background-color: #654;
}
.img-wrap2 {
background-image: url(http://www.graphicdesignblog.org/wp-content/uploads/2011/10/cinemagraph-4.gif);
background-position: -180px -20px;
}
.stack div {
position: absolute;
top: 0;
left: 0;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
}
.blue {
border-width: 200px 200px 0 0;
border-color: #007bff transparent transparent transparent;
}
.yellow {
border-width: 0 200px 200px 0;
border-color: transparent #ffea00 transparent transparent;
}
.red {
border-width: 100px 100px 0 0;
border-color: #ff0000 transparent transparent transparent;
}
.white {
border-width: 40px 40px 0 0;
border-color: #ffffff transparent transparent transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.