A Pen by Marc Ucman on CodePen.
Barbara Seidel beseidel
beseidel
/ css3-split-screen-moving-slider.markdown
Created
July 22, 2019 06:42
CSS3 Split Screen Moving Slider
A Pen by Mohamed Ibrahim 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
| <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> |
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
| <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
/ image-manipulation-slider-with-css-filters.markdown
Created
July 22, 2019 07:28
Image Manipulation Slider with CSS Filters
A Pen by Caleb Zahnd 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
| <div id="container"> | |
| <div id="main"> | |
| <audio id="theSong" controls /> | |
| <div id="controls"> | |
| <p> | |
| <select id="filtersDropdown"> | |
| </select> | |
| </p> |
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> |
beseidel
/ gray-white-skewed-slider-with-scrolling.markdown
Last active
December 14, 2020 18:24
Gray & White - Skewed Slider with Scrolling
This Skewed Slider with Scrolling based on Pure JS and CSS (without libraries).
A Pen by Victor Belozyorov 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
| <div class="slider" id="slider-1"> | |
| <div class="item"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="original"> | |
| <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/1.jpg?raw=true" mask="url(#donutmask)"></image> | |
| </svg> | |
| <div class="tit">DAISY</div> | |
| </div> | |
| <div class="item"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="original"> | |
| <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/3.jpg?raw=true" mask="url(#donutmask)"></image> |