Last active
December 17, 2015 00:10
-
-
Save kaezarrex/5519200 to your computer and use it in GitHub Desktop.
CSS Transparency
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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