View _-turnable-tables-part-1-_-3d-css-record-player-keyframers-1-18-0.markdown

(βŒπŸ”΄_πŸ”΅) Turnable Tables, Part 1 (πŸ”΄_πŸ”΅Β¬) | 3D CSS Record Player | @keyframers 1.18.0

Stephen Shaw and a faintly appearing David Khourshid create a 3D turntable with CSS! Control the rotation & open the lid with the power of CSS Variables.

Skip around:

View celebrating-1-000.markdown

Celebrating 1,000!

βœ… 1,000 Twitter Followers βœ… 1,000 YouTube Subscribers

Thank you all for your support! πŸŽ‰

✍️ Reply with your favorite tips/eps! We'd love to hear what you've learned from the streams βœ‰οΈ Sign up at http://keyframe.rs for news about more exciting content coming soon !

View gliding-gallery-simple-image-slider-transitions-keyframers-1-15-0.markdown
View splitting-image.css
.splitting-image img { width: 100%; display: block; }
@supports ( display: grid ) {
.splitting-image {
position: relative;
overflow: hidden;
background-size: cover;
visibility: hidden;
}
View index.html
<div class="debug" style="display: none;"></div>
<a href="https://youtu.be/_rKtTIJJaJY" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div id="app" data-state="wallet" data-panning="0">
<header class="ui-header">
</header>
<div class="ui-wallet">
View index.html
<div id="app" data-state="wallet">
<header class="ui-header">
</header>
<div class="ui-wallet">
<h2 class="ui-wallet-heading">
Wallet
</h2>
<div class="ui-cards">
<div class="ui-card" data-card="AnimEx">
View css-only-calendar-conundrum-keyframers-1-11-0.markdown

CSS-only Calendar Conundrum πŸ“†πŸ€” | @keyframers 1.11.0

Watch us code this live! https://youtu.be/_8OMGE87e2Q

Challenge Accepted!

David Khourshid and Stephen Shaw rise to the challenge raised on Twitter, recreating an amazing, if not improbable calender UI interaction using CSS only. Will they succeed or fail? Watch to find out!

Streamed live on June 18, 2018.

View index.html
<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="triangles">
<div class="triangle">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="triangle -big">
View index.html
<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="sun">
<svg class="eclipse-container" viewBox="0 0 100 100">
<circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
</svg>
</div>
View index.html
<div class="box"></div>
<div class="box"></div>