A simple search input with an icon at the right
A Pen by Ismail Ghallou (Smakosh) on CodePen.
Steven TrueSlu
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
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <link href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700' rel='stylesheet' type='text/css'> | |
| <style> | |
| @import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css); | |
| @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); |
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
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <link href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700' rel='stylesheet' type='text/css'> | |
| <style> | |
| @import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css); | |
| @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); |
TrueSlu
/ codepen-challenge-checkboxes.markdown
Created
August 27, 2018 20:48
Codepen Challenge - Checkboxes
A Pen by Pinnacle Web Development on CodePen.
TrueSlu
/ index.html
Created
August 27, 2018 17:35
[WIP] Multiple Sliding Panels, CSS-only transforms
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="panels"> | |
| <a href="#" class="panel"> | |
| <div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=760);"> | |
| <h3 class="panel__title">A</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="panel"> | |
| <div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=786)"> | |
| <h3 class="panel__title">B</h3> | |
| </div> |
TrueSlu
/ full-width-panel-expansion-css-only.markdown
Created
August 27, 2018 17:34
Full-Width Panel Expansion, CSS only
A CSS only expanding panel gallery with keyboard support and CSS Vars to progressively enhance with animation.
The keyboard support is probably not truly accessible. I'll leave it as an exercise to the reader to add real accessibility aria-roles and JavaScript.
Thanks to @davidkpiano for help with setup and the Animation At Work community for helpful feedback.
Like sliding panels? Try these transform-based sliding panels
TrueSlu
/ css-only-sliding-panels-using-transforms.markdown
Created
August 27, 2018 05:55
CSS-only Sliding Panels using transforms
Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance.
Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class
TrueSlu
/ fancy-search-box-svg-css-jquery.markdown
Created
August 27, 2018 04:08
Fancy Search Box // SVG + CSS + jQuery
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> | |
| <input type="text" class="search" /> | |
| <div class="line-1"></div> | |
| <div class="line-2"></div> | |
| </main> |