leereamsnyder + css   1605

A Theme Switcher
filter: invert(100%) goes a long way

This article also presents the control as a React component, just so you can see how that's done
accessibility  javascript  browsers  react  css 
16 days ago by leereamsnyder
A Content Slider
“Carousels (or 'content sliders') are like men. They are not literally all bad — some are even helpful and considerate. But I don't trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don't have the choice. Hence this article.”
webdesign  accessibility  javascript  css  ux 
16 days ago by leereamsnyder
Collapsible Sections
This goes into making baby Web Components, which is pretty awesome
accessibility  javascript  css  webdesign 
16 days ago by leereamsnyder
Faux Grid Tracks · An A List Apart Article
How to place extra elements around a grid to reveal tracks or backgrounds
webdesign  grid  css  layout 
22 days ago by leereamsnyder
Animista - CSS animations on demand
Great examples, with code you can adjust and copy/paste
css  animation  webdesign  tools  webtools 
24 days ago by leereamsnyder
The Anti-hero of CSS Layout - "display:table" | Colin Toh
It has broad support, works fairly well, and solves a bunch of layout issues. It's no grid or flex, but it's a solid fallback
css  html  layout  webdesign  browsers 
27 days ago by leereamsnyder
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
Mostly you can use older methods and grid will override them, as specified. (Smart!)
webdesign  layout  css  browsers  grid 
27 days ago by leereamsnyder
Grid areas and element that occupies them aren't necessarily the same size. | CSS-Tricks
I ran into similar issues with flex box

"Perhaps the most interesting limitation is that you can't target the grid area itself. If you want to take advantage of alignment, for example, you're giving up the promise of filling the entire grid area."
css  grid  layout  webdesign 
4 weeks ago by leereamsnyder
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
Reduce contrast for the image, then boost it back up client-side with filters. Not bad.
css  images  webdesign  performance 
5 weeks ago by leereamsnyder
Focusingly – Better focus styling
yeah but per CSS Tricks:

"outline color inherits from the color, which yields the same result."
css  javascript  accessibility  webdesign 
5 weeks ago by leereamsnyder
Breaking down CSS Box Shadow vs. Drop Shadow | CSS-Tricks
If you have a non-box shape and can live with worse (still decent) browser support, filter: drop-shadow() is your friend
css  webdesign 
7 weeks ago by leereamsnyder
Image Effects with CSS
Pencil drawing, watercolors, "hallucination", etc
css  effects  images  webdesign 
8 weeks ago by leereamsnyder
Web Typography: Numerals · An A List Apart Article
touches on sub/superscripts, old-style numbers and CSS font properties to enable them properly
css  webdesign  typography 
8 weeks ago by leereamsnyder
The Era of Newshammer - daverupert.com
I like the use of CSS variables for instant "themes"
css  webdesign 
8 weeks ago by leereamsnyder
Tabbed Interfaces
+ Don't provide tabbed interfaces unless they are suited to the use case and are likely to be understood and appreciated by the user. Just because you can doesn't mean you should.
+ Tables of content and same-page links are a simpler and more robust approach to many of the ostensible use cases for tabbed interfaces.
+ Make sure interfaces that appear as tabbed interfaces have the semantics and behaviors expected of them.
+ Single-page applications should not present or behave as tabbed interfaces, despite their shared use of JavaScript to switch between and/or populate content panes.
a11y  accessibility  css  javascript  ux  webdesign 
9 weeks ago by leereamsnyder
Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.
I, uh, wouldn't do this myself because fixed header bars suck, but I'll probably lose this battle in the future
css  ios  webdev 
12 weeks ago by leereamsnyder
Web truths: CSS is not real programming | Christian Heilmann
“If you don’t consider an interface as an agreement with your users with various levels of fidelity depending on their technical platform, CSS isn’t for you. It is by design a forgiving language, that doesn’t throw any errors when something can’t get applied. Thus it is amazing for progressive enhancement. You don’t even need to worry about adding a line of unsupported code as the parser skips what it can’t apply. What causes a JavaScript parser to throw in the towel and give you an error message, the CSS parser shrugs off and moves on. That can feel odd for a developer – I for one like to know when something went wrong. But it frees you from needing to test on all possible user agents and put “if” statements around everything. Want to use a gradient on button? Define a background color, then override it with a gradient in the next line. If the user agent can’t render gradients, you get a simpler, but still working button. And you didn’t need to worry about gradient support at all.”
css  webdesign  javascript  programming 
12 weeks ago by leereamsnyder
Breaking the Grid - daverupert.com
Includes "clearfix 2.0" to make grids less likely to do this
css  webdesign  browsers  layout  grid 
september 2017 by leereamsnyder
Be Slightly Careful with Sub Elements of Clickable Things | CSS-Tricks
This has burned me before. pointer-events: none has been the simplest fix
css  javascript 
august 2017 by leereamsnyder
Font style matcher
Helps you line up a webfoot with a system font so the transition isn't so jarring
css  fonts  webdesign  webtools  typography 
august 2017 by leereamsnyder
If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks
"optional" gives 100ms to load a font, and if it's not there, you don't see it. it'll load the font and probably be in the cache next time, though.

"fallback" shows a fallback after 100ms, and gives ~3s for the font to load (so you don't get a big reflow after being on the page for 30 seconds)
css  performance  webdesign  usability  fonts 
august 2017 by leereamsnyder
Connect: behind the front-end experience
Pretty good description of modern ways to approach CSS animations, JS animations, and poly fills.

I had not heard of the Intersection Observer API
animation  css  javascript  webdesign  browsers 
june 2017 by leereamsnyder
Preventing Reflow
This is regarding aspect-ratio (padding-top trick) boxes.

There's some good logic here to allow content to break out of the box and other considerations, with clever use of CSS variables
rwd  webdesign  layout  images  css 
june 2017 by leereamsnyder
Breaking out with CSS Grid explained
Why named grid lines let you do neat stuff with breaking out content
css  webdesign  grid  layout 
june 2017 by leereamsnyder
A Unified Styling Language – SEEK blog – Medium
The history (and future?) of authoring CSS in JavaScript.

I particularly like how some of these libraries give you niceties like scoped styling, automatic optimizations, and easy-peasy critical styles
history  css  javascript  webdesign  react 
june 2017 by leereamsnyder
Responsive Design for Motion | WebKit
@media (prefers-reduced-motion) is now broadly available
accessibility  animation  css  javascript  webdesign 
may 2017 by leereamsnyder
Adactio: Notes—May 31st, 2017, 3:53pm
@media (prefers-reduced-motion) {
*:hover, *:focus {
transform: none !important;
css  accessibility  webdesign 
may 2017 by leereamsnyder
Fluid Responsive Typography With CSS Poly Fluid Sizing – Smashing Magazine

(with the caveat that users aren't constantly resizing their browsers, if they even can)
css  sass  webdesign  rwd  math 
may 2017 by leereamsnyder
Tiny "position: sticky" library
css  javascript  layout 
may 2017 by leereamsnyder
I like their opinionated use of react to build articles. This seems like a single-page version of the authoring style I was thinking about for my own site
documentation  my_cmsicorn  javascript  webdesign  react  css  cms  design 
april 2017 by leereamsnyder
Implementing system fonts on Booking.com — A lesson learned.
“So, lesson learned; don’t use -apple-system at the head of a shorthand font declaration, and test thoroughly, especially when playing around with proprietary stuff like system font declarations.”
css  webdesign  fonts  browsers 
april 2017 by leereamsnyder
Grid by Example
Indespensible resource from Rachel Andrews
reference  css  webdesign  layout  grid 
april 2017 by leereamsnyder
A Todo List
an accessible one, that is. A comprehensive walkthrough
javascript  accessibility  webdesign  html  css  screenreaders 
april 2017 by leereamsnyder
Grid “fallbacks” and overrides - rachelandrew.co.uk
Just use your 'fallback' first, and display:grid more or less will always override it and take over seamlessly. You might have to remove explicit widths, because those are kind of a no-no w/ grid
css  grid  layout  webdesign  rwd 
april 2017 by leereamsnyder
Focusing a `background-image` on a Precise Location with Percentages | CSS-Tricks
There's a lot of trickiness if you're not setting something at 0%, 50%, or 100%
css  backgrounds  tips  sass 
april 2017 by leereamsnyder
Eric's Archived Thoughts: Grid-Powered Drop Quotes
Grid layout will be great for all kinds of little things
browsers  css  design  layout  grid 
april 2017 by leereamsnyder
« earlier      
per page:    204080120160

related tags

3d  a11y  accessibility  addons  advice  ajax  ala  analytics  android  animation  apache  api  app  apple  apps  architecture  art  audio  automation  backgrounds  base64  bbedit  blog  blogs  bookmarklets  bootstrap  browserify  browsers  business  buttons  calendar  canvas  cartoons  cheatsheet  chrome  clever  clients  cms  coda  code  codekit  collaboration  color  comments  comparison  compass  compression  computer  content  contentstrategy  contrast  converter  copyright  creativecommons  creativity  css  css-tricks  css3  cufon  culture  data  demonstration  design  development  documentation  download  downloads  ecommerce  eecms  effects  efficiency  email  enterprise  expressionengine  extensions  eyetracking  facebook  favicon  filters  firefox  flash  flickr  fonts  formatting  forms  fra  framework  free  freelance  fun  funny  gallery  games  generator  geometry  gif  git  github  givethanksforyourblog  gmail  google  googlereader  graphics  grid  grunt  guide  gulp  hacks  hardware  history  hosting  howto  html  html5  ia  icons  ie  ie6  ie7  ie8  ie9  ie10  illustrator  image  images  imported  indesign  infoporn  inspiration  interesting  internet  interviews  ios  ipad  iphone  iphone4  ipod  javascript  jquery  json  language  lastFM  layout  less  libraries  lifehacker  lightbox  list  loading  logo  logos  mac  magazine  maintenance  maps  markdown  marketing  math  media  mediacenter  mediaqueries  menu  microsoft  mini  mobile  modernizr  mp3  mq  music  my_cmsicorn  names  navigation  networking  news  newsletter  nodejs  noise  opensource  osx  outsourcing  password  patterns  perception  performance  photography  photos  photoshop  php  pixels  plugins  polyfills  portfolio  postcss  powerpoint  presentations  print  process  productivity  programming  python  rdfa  react  reading  reference  research  resets  resources  retina  rss  rubyonrails  rwd  safari  sanity  sass  science!  screenreaders  scripts  search  security  semantics  seo  servers  services  slideshow  socialnetworking  software  statistics  stock  style  styleguide  svg  symbols  tables  tablets  templates  testing  text  textures  themes  tips  toblog  tools  tooltip  toread  tostudy  totry  touch  transition  transitions  trends  trivia  troubleshooting  tutorials  twitter  typekit  typography  ui  unicode  usability  utilities  ux  validation  vector  via:popular  video  videogames  visualization  wallpaper  web  webapps  webdesign  webdev  webkit  webpack  webtools  windows  wordpress  work  writing  xhtml  xml  yahoo  yepnope  youtube  z-index 

Copy this bookmark: