| form(onsubmit="return false") | |
| .form-item | |
| label Username | |
| .input-wrapper | |
| input(type="text" id="username" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-lpignore="true") | |
| .form-item | |
| label Password | |
| .input-wrapper | |
| input(type="password" id="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-lpignore="true") | |
| button(type="button" id="eyeball") |
Lately, I've seen a lot of alpha opacity text effects on the TV, web, and even on print, that I decided to make my own version.
I created this Hover Alpha Effect with mobile support.
Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects.
The headline is editable, so place your cursor in the text and type anything else you'd like.
A Pen by gabecrockett on CodePen.
This method utilizes the Intersection Observer to zoom the image only when it is in view. This cuts down on the processing power required for this effect.
A Pen by Chris Weissenberger on CodePen.
| <div class="slider"> | |
| <input type="range" min="1" max="100" value="50"> | |
| </div> | |
| <!-- twitter / dribbble --> | |
| <a class="dribbble" href="https://dribbble.com/shots/8424211-Smoke-Slider" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a> | |
| <a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5. |
| <div class="wrapper"> | |
| <input type="checkbox"> | |
| <div class="video"> | |
| <video src="https://www.robmillsarchitects.com/files/land/city/RMA_Web_land_city_1.mp4" loop muted autoplay></video> | |
| </div> | |
| <div class="text"> | |
| <span data-text="Watch the video"></span> | |
| </div> | |
| </div> |
| <h1>All things are difficult before they are easy.</h1> | |
| <h2>Thomas Fuller</h2> | |
| <h3>CodeMyUI.com</h3> |
| <h1>Lorem Ipsum</h1> |
| <!-- div that will hold our WebGL canvas --> | |
| <div id="canvas"></div> | |
| <div id="content"> | |
| <h1 id="title">Skylines</h1> | |
| <!-- drag slider --> | |
| <div id="planes"> |
| <div class="container"> | |
| <div class="range-slider"> | |
| <span id="rs-bullet" class="rs-label">0</span> | |
| <input id="rs-range-line" class="rs-range" type="range" value="0" min="0" max="200"> | |
| </div> | |
| <div class="box-minmax"> | |
| <span>0</span><span>200</span> |