Reproduction of traditional fine art image mounting and matting in CSS, with no HTML elements other than the original image. More details in the related entry on my blog
A Pen by Dudley Storey on CodePen.
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
<div class="wrap" data-pos="0"> | |
<div class="wrap-clip"></div> | |
<div class="content"> | |
<div class="top"> | |
<img src="https://dl.dropbox.com/s/6u64ty9fp2tyi4y/adiddas.png" class="logo"> | |
<div class="menu"> | |
<a href="javascript:void(0)">MEN</a> | |
<a href="javascript:void(0)">WOMEN</a> | |
<a href="javascript:void(0)">KIDS</a> | |
</div> |
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
<div id="screen-toggle">Hide Screen</div> | |
<div id="screen-selector"> | |
<div id="screen-selector-1" data-href="#screen-wrapper-1" class="selector"></div> | |
<div id="screen-selector-2" data-href="#screen-wrapper-2" class="selector"></div> | |
<div id="screen-selector-3" data-href="#screen-wrapper-3" class="selector"></div> | |
<div id="screen-selector-4" data-href="#screen-wrapper-4" class="selector"></div> | |
</div> | |
<div id="screen-wrapper-1" class="screen-wrapper"> | |
<div class="image"></div> | |
<div class="screen"></div> |
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
<div id='root' /> |
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
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
<div class="container"> | |
<div id="output"></div> | |
<div class="row"> | |
<div class="digit" id="one">1</div> | |
<div class="digit" id="two">2 | |
<div class="sub">ABC</div> | |
</div> | |
<div class="digit" id="three">3 |
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
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
<div class="container"> | |
<div id="output"></div> | |
<div class="row"> | |
<div class="digit" id="one">1</div> | |
<div class="digit" id="two">2 | |
<div class="sub">ABC</div> | |
</div> | |
<div class="digit" id="three">3 |