Skip to content

Instantly share code, notes, and snippets.

Ικονικρε Ατρέας ikonikre

Block or report user

Report or block ikonikre

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ikonikre
ikonikre / index.html
Created Nov 20, 2016
Sunrise Animation
View index.html
<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>
@ikonikre
ikonikre / index.html
Created Nov 14, 2016
Modal Animation Physics
View index.html
<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>
@ikonikre
ikonikre / index.html
Created Nov 5, 2016
They call it le Big-Mac
View index.html
<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>
@ikonikre
ikonikre / index.html
Created Nov 4, 2016
Solar System - step 3
View index.html
<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">
@ikonikre
ikonikre / index.html
Created Nov 1, 2016
Time-driven colorful trails
View index.html
<canvas id="canvas"></canvas>
@ikonikre
ikonikre / index.html
Created Nov 1, 2016
SVG CSS3 Menu / Burger Button
View index.html
<!--
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>
@ikonikre
ikonikre / index.html
Created Nov 1, 2016
SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥
View index.html
<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>
View css-parallaxing-horizontal-scroller.markdown
View index.html
<div class="planet"></div>
You can’t perform that action at this time.