A Pen by Caleb Zahnd on CodePen.
Barbara Seidel beseidel
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="canvas-wrapper"> | |
| <div id="overlay"></div> | |
| <canvas id="canvas"></canvas> | |
| </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
| <div id="container"> | |
| <div id="main"> | |
| <audio id="theSong" controls /> | |
| <div id="controls"> | |
| <p> | |
| <select id="filtersDropdown"> | |
| </select> | |
| </p> |
beseidel
/ image-manipulation-slider-with-css-filters.markdown
Created
July 22, 2019 07:28
Image Manipulation Slider with CSS Filters
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
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> | |
| </head> | |
| <p>Photography</p> | |
| <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"> | |
| <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"> |
beseidel
/ index.html
Created
July 22, 2019 07:22
Responsive focuspoint on image with object-position
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
| <figure class="focus__area"> | |
| <div class="focus__picker"> | |
| <img class="focus__picker__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" /> | |
| <span class="focus__picker__indicator"></span> | |
| </div> | |
| <p class="focus__area__info">⬅ choose<br /> focuspoint<br />here!</p> | |
| <p class="media__info">Use bigger screen to pick a focus point!</p> | |
| <img class="focus__image" src="http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg" alt="" /> | |
| <figcaption class="focus__caption"> | |
| focus-point: <span></span> |
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="colorpreview"> | |
| <div class="colorpreview__label"><h1>Living Room</h1></div> | |
| <!-- Buttons --> | |
| <div class="colorpreview__buttons"> | |
| <div class="colorpreview__buttons__col"> | |
| <label for="color-trim">Trim Wall</label> |
A Pen by Mohamed Ibrahim on CodePen.
beseidel
/ css3-split-screen-moving-slider.markdown
Created
July 22, 2019 06:42
CSS3 Split Screen Moving Slider
A Pen by Marc Ucman on CodePen.
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
| <canvas id="canvas"></canvas> |