recentpopularlog in

piperh : css-only   20

2019 Checkbox Styled — Accessible, Simple, CSS-only
A pen by Jen Simmons:
2019 Checkbox Styled — Accessible, Simple, CSS-only
webdesign  web  design  css  checkbox  accessible  css-only  custom  style  styled  form 
5 weeks ago by piperh
Performant Parallaxing  |  Web  |  Google Developers
clear article about coding a performant css-only parallax effect, with links to a demo and a github repo. Uses css perspective
webdesign  web  design  parallax  scroll  scrolling  effect  css-only  vanilla  css  google 
june 2019 by piperh
Under-Engineered Toggles | Adrian Roselli
css-only toggles using the checkbox default browser functionality
webdesign  web  design  toggle  css-only  css  accessible  accessibility  checkbox  default 
may 2019 by piperh
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
css/html only carousel. Be careful, doesn't work in any browser on my iPad (feb 2019). Hacky. No continuous scroll - you have to go back when you reach final image. Authors blog design is horrible.
webdesign  web  design  scroll  carousel  vanilla  css-only  snap  pinch  zoom 
february 2019 by piperh
Pure CSS Loader - Optimized Spinners for Web · Loading.io
they say: Pure CSS Loaders. Open sourced css loading animations dedicated for speed, simplicity and dev-friendly. 1KB per icon before minimized.
webdesign  web  design  css  spinner  loader  spinning  loading  css-only 
february 2019 by piperh
Solved With CSS! Dropdown Menus | CSS-Tricks
Demo of css only dropdown. BEWARE - doesn't work on iPad iOS 9.3.5 Safari & Chrome (7.5.18). On diff demos you can't dismiss menu or it doesn't appear at all.
Works correctly on Huawei (7.5.18) - tap anywhere to dismiss
webdesign  web  design  css  dropdown  menu  css-only  only 
may 2018 by piperh
Cheapass Parallax - daverupert.com
a css-only parallax effect using css variables
webdesign  web  design  css  parallax  scroll  css-only  variable 
february 2018 by piperh
CSS Arrows From CodePen - Freebie Supply
collection of (some animated) css arrows from codepen. Possibly useful for speed - grab a bit code so as not to figure out angles by trial and error
webdesign  web  design  css  codepen  arrows  css-only  examples  code 
february 2018 by piperh
Introducing SpinKit | Tobias Ahlin
animated loading symbols. Quite classy and makes unusual change from default. CSS only
webdesign  web  design  animate  animated  animation  spinner  loader  symbol  css  css-only 
october 2017 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
april 2017 by piperh
CSS sidebar toggle
css only sidebar toggle with a bit of js for accessibility, aria states and tab index. Very smooth. I think it uses transformX but need to study it more. See orig article https://silvestarbistrovic.from.hr/en/articles/css-sidebar-toggle/ for breakdown. view in compiled mode. Code is absurdly complicated by convoluted font-size vh guff but the sidebar transition is good
webdesign  web  design  css  menu  sidebar  toggle  css-only  aria  accessible  code 
april 2017 by piperh
CSS-only Sliding Panels using transforms
css-only sliding panels. Haven't studied this closely but initially I don't understand the css - why use :before ?
At StaE the images were incredibly slow to load, so was difficult to understand purpose of effect
webdesign  web  design  css  css-only  sliding  panel  transition  slide  transform 
november 2016 by piperh
Responsive pure CSS tabs & accordion
a flexbox method for css-only tabs. Uses checkbox hack
webdesign  web  design  css  layout  css-only  tabs  accordion  flex  flexbox 
november 2016 by piperh
Animated CSS Underline Hover Examples
css-only animated underline. Rather neat, no js, but on touch screen (iOS, haven't tried Android) makes links require 2 taps - don't know why.
This is copied to a html page on my disc - see code samples
webdesign  web  design  css  html  underline  effect  transition  css-only  animated  hover 
november 2016 by piperh
transform | CSS-Tricks
a handy rundown of the css transform property, with code examples
webdesign  web  design  css-only  css  transform  css3 
january 2016 by piperh

Copy this bookmark:





to read