leereamsnyder + css   1665

How to Use Emojis as Icons – Preethi Sam
Clever: make them transparent, and use a text shadow.
css  emoji  icons  webdesign 
6 days ago by leereamsnyder
Takeaways from trying out Tachyons CSS after ages using BEM – Made by Many
“What I enjoyed most about Tachyons was its simplicity and how productive I felt using it. It also offered some perspective on BEM: above all was that I no longer had to think about how to organise my CSS. I didn’t have to think about what to name my ‘components’, where to draw the line between one component and another, what should live where, and crucially, how to refactor things when new requirements came in. This is the biggest sticking point for me with BEM because it often seems like a huge overhead. These points are especially true for applications that change over time, which is all-too-common in the kind of work we do.”
webdesign  css  programming 
13 days ago by leereamsnyder
Inclusive Components: Cards
Good thoughts on making whole cards clickable and a solid use for :focus-within

- Use list markup to group your cards
- Make sure your cards don't break when lines of content wrap or images don't meet specific aspect ratio requirements
- Avoid too much functionality and reduce tab stops. Cards shouldn't be miniature web pages.
- Remember that headings should begin sections. Most everything that belongs to the section should follow the heading in the source.
html  webdesign  css  accessibility 
24 days ago by leereamsnyder
The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article
Has a good code snippet for detecting just old browsers in general (basically, Internet Explorer)
css  browsers  performance  webdesign  javascript 
8 weeks ago by leereamsnyder
Adactio: Journal—Good griddance
“I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.”
css  grid  layout  webdesign 
10 weeks ago by leereamsnyder
Delightful and performance-focused pure css loading animations.
animation  css  inspiration  loading 
10 weeks ago by leereamsnyder
Using UI System Fonts In Web Design: A Quick Practical Guide — Smashing Magazine

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
css  design  fonts  webdesign  typography 
march 2018 by leereamsnyder
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
“This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.

While previous attempts to build responsive components were valuable in exploring this space, limitations in the platform meant these solutions were always either too big, too slow, or both.

Fortunately, we now have browser APIs that allow us to build efficient and performant solutions. ”
css  browsers  rwd  javascript  webdesign  layout  performance 
march 2018 by leereamsnyder
Styling Empty Cells With Generated Content And CSS Grid Layout — Smashing Magazine
All kinds of trickery you can do with generated elements or "filler <b>s" to flesh out grid layouts
css  design  grid  layout  webdesign 
february 2018 by leereamsnyder
Shipping system fonts to GitHub.com · @mdo
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
css  webdesign  fonts  github  typography 
february 2018 by leereamsnyder
Cheapass Parallax - daverupert.com
Seriously like 6 lines of code. Neat use of updating CSS variables with JS
animation  css  webdesign  javascript 
february 2018 by leereamsnyder
Direction Aware Hover Effects | CSS-Tricks
Interesting script math to get the 'top'/'right'/'bottom'/'left' entry point for an element
javascript  css  webdesign 
february 2018 by leereamsnyder
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
You might not need so many of them!

Also, there are new interaction ones (coarse/fine pointers, hover capability)
css  layout  webdesign  rwd  grid 
february 2018 by leereamsnyder
Keeping aspect-ratio with HTML and no padding tricks
+ SVG knows how to maintain aspect ratio
+ CSS grid knows how to make overlapping items affect each other’s size
css  svg  images  webdesign  layout  grid 
january 2018 by leereamsnyder
Typical use cases of Flexbox - CSS | MDN
Along with "Solved by Flexbox" (tho some of those would be better solved with css grid), this is probably the go-to list of scenarios to use flex layout
css  layout  webdesign 
january 2018 by leereamsnyder
Meet the New Dialog Element
Finally, a standard way to do this. (Modals are still bad tho)
html  webdesign  css  javascript 
january 2018 by leereamsnyder
Flexible type with :root · Matt Smith

:root {
font-size: calc(1vw + 1vh + .5vmin);

uses some fuzzy math around the viewport to figure out the base font-size
css  webdesign  rwd 
january 2018 by leereamsnyder
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
“If you're using auto-fit, the content will stretch to fill the entire row width. Whereas with auto-fill, the browser will allow empty columns to occupy space in the row like their non-empty neighbors — they will be allocated a fraction of the space even if they have no grid items in them, thus affecting the size/width of the latter.

Which behavior you want or prefer is completely up to you. I have yet to think of a use case where auto-fill would make more sense than auto-fit.”
webdesign  css  grid  layout 
december 2017 by leereamsnyder
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 
november 2017 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 
november 2017 by leereamsnyder
Collapsible Sections
This goes into making baby Web Components, which is pretty awesome
accessibility  javascript  css  webdesign 
november 2017 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 
november 2017 by leereamsnyder
Animista - CSS animations on demand
Great examples, with code you can adjust and copy/paste
css  animation  webdesign  tools  webtools 
november 2017 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 
november 2017 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 
november 2017 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 
november 2017 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 
november 2017 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 
november 2017 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 
october 2017 by leereamsnyder
Image Effects with CSS
Pencil drawing, watercolors, "hallucination", etc
css  effects  images  webdesign 
october 2017 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 
october 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  emoji  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: