This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.
CHANGELOG
Added will-change property to improve performance.
A Pen by Damián Muti on CodePen.
califat
califat
/ index.html
Created
August 11, 2017 06:37
— forked from anonymous/index.html
Video and image thumbnail for HTML file upload
This file contains hidden or 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
| <input type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" /> | |
| <p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p> | |
| <div></div> |
This file contains hidden or 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
| .container | |
| h2 This snake is... | |
| form | |
| p.form__answer | |
| input(type="radio" name="type" id="responsive" value="responsive" checked) | |
| label(for="responsive") Responsive | |
| p or | |
| p.form__answer | |
| input(type="radio" name="type" id="adaptive" value="adaptive") |
califat
/ index.html
Created
August 1, 2017 08:05
— forked from anonymous/index.html
Split Image | Hover Effect
This file contains hidden or 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="placeholder"></div> |
califat
/ index.html
Created
July 26, 2017 05:49
— forked from anonymous/index.html
Theremin Oscillator
This file contains hidden or 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"></div> | |
| <a href="https://s.codepen.io/jscottsmith/debug/dRBOzE" rel="noopener" target="_blank" class="fullscreen"> | |
| <svg version="1.1" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30"> | |
| <polygon fill="#FFF" points="16.5,15 23.1,8.3 26,11.2 26,4 18.8,4 21.7,6.9 15,13.5 8.3,6.9 11.2,4 4,4 4,11.2 6.9,8.3 13.5,15 6.9,21.7 4,18.8 4,26 11.2,26 8.3,23.1 15,16.5 21.7,23.1 18.8,26 26,26 26,18.8 23.1,21.7 "/> | |
| </svg> | |
| </a> |
califat
/ css-only-image-slider-using-svg-patterns.markdown
Created
July 26, 2017 05:49
— forked from anonymous/css-only-image-slider-using-svg-patterns.markdown
CSS-only image slider using SVG patterns
califat
/ index.html
Created
July 26, 2017 05:48
— forked from anonymous/index.html
Profile Image Hover Effect
This file contains hidden or 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="profile_container scream"> | |
| <div class="background"></div> | |
| <div class="foreground"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile"> | |
| </div> | |
| </div> | |
| <div class="profile_container la"> | |
| <div class="background"></div> | |
| <div class="foreground"> |
califat
/ index.html
Created
July 26, 2017 05:48
— forked from anonymous/index.html
Profile Image Hover Effect
This file contains hidden or 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="profile_container scream"> | |
| <div class="background"></div> | |
| <div class="foreground"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile"> | |
| </div> | |
| </div> | |
| <div class="profile_container la"> | |
| <div class="background"></div> | |
| <div class="foreground"> |
califat
/ html-5-layerslider-animation.markdown
Created
July 16, 2017 12:48
— forked from anonymous/html-5-layerslider-animation.markdown
HTML 5 Layerslider Animation
A Pen by Richard Gonyeau on CodePen.
califat
/ eleven-stranger-things-cinemagraph.markdown
Created
July 14, 2017 05:40
— forked from anonymous/eleven-stranger-things-cinemagraph.markdown
Eleven — Stranger Things Cinemagraph
Requires a browser that can handle CSS filter (or -webkit-filter).
A Pen by Matt Popovich on CodePen.
califat
/ index.html
Created
July 12, 2017 09:10
— forked from anonymous/index.html
Paint on Heat Distortion
This file contains hidden or 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
| <main> | |
| <canvas data-img=""></canvas> | |
| <div class="mask"> | |
| <div class="mask-inner"> | |
| </div> | |
| </div> | |
| </main> | |
| <a class="button">Clear</a> |