A Pen by nicolas barradeau 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
<figure class="animation"> | |
<section class="animation__block" role="img" aria-label="Animation of the sun rising very quickly"> | |
<div class="hill front red-dk"></div> | |
<div class="hill back red"></div> | |
<div class="sun"></div> | |
</section> | |
<figcaption class="animation__caption"> | |
inspired by <a href="https://dribbble.com/shots/2271207-Wallpaper-Icon-Animation" target="_blank">@krishgounder</a> | |
</figcaption> |
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="modal-frame"> | |
<div class="modal"> | |
<div class="modal-inset"> | |
<div class="button close"><i class="fa fa-close"></i></div> | |
<div class="modal-body"> | |
<h3>Such Modal, Much Animate!</h3> | |
<p>Nothing groundbreaking, but I hope you enjoyed <br /> the physics for the open/close animation =).</p> | |
<p class="ps">**I know the SASS is a bit messy, I did this on the fly and for fun <br /> and w.e. I DO WHAT I WANT!!</p> | |
</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 class='container'> | |
<div class='burger'> | |
<div class='burger__line-top'></div> | |
<div class='burger__line-mid'></div> | |
<div class='burger__menu'> | |
<p>MENU</p> | |
</div> | |
</div> | |
<div class='stuff'><a href='http://codepen.io/mrspok407/' class='pens' target="_blank">Check out my other pens</a><a href="https://twitter.com/mrspok407" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div> | |
</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 class="gravity-well-center"> | |
<div class="sun"></div> | |
<div class="orbit orbit--mercury"><div class="gravity-well"><div class="planet mercury"></div></div></div> | |
<div class="orbit orbit--venus"><div class="gravity-well"><div class="planet venus"></div></div></div> | |
<div class="orbit orbit--earth"> | |
<div class="gravity-well"> |
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
<canvas id="canvas"></canvas> |
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
<!-- | |
article: https://raygun.io/blog/2014/07/making-svg-html-burger-button/ | |
--> | |
<div id="hamburger" class="hamburglar is-open"> | |
<div class="burger-icon"> | |
<div class="burger-container"> | |
<span class="burger-bun-top"></span> | |
<span class="burger-filling"></span> |
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
<h1 class='title'>Flexbox Rules!</h1> | |
<div class='container'> | |
<div class='thing'>Yay!</div> | |
<div class='thing'>Flexbox 4evr!</div> | |
<div class='thing'><span class="emoji">🙀</span></div> | |
<div class='thing'>Easy!</div> | |
<div class='thing'><span class="emoji">👍</span></div> | |
<div class='thing'>1 of ur 5 a day!<span class="emoji">🍓</span></div> | |
<div class='thing'><span class="emoji">🚀</span></div> | |
<div class='thing'>Super good!</div> |
Working on the new nonatomic.co.uk website.
A Pen by Paul Stamp 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="planet"></div> |
NewerOlder