recentpopularlog in

piperh : technique   33

Compressive Images | Filament Group, Inc., Boston, MA
the original article by Filament about compressive images. From October 2012 so I wonder if there are arguments against this technique now?
webdesign  web  design  images  compression  srcset  technique  compress  jpg  jpeg 
19 days ago by piperh
The "Blur Up" Technique for Loading Background Images | CSS-Tricks
article describing a technique to show first a blurry bg image while whole final image loads. Makes perceived loading time faster. Could be useful for page with large bg image
webdesign  web  design  image  load  loading  blur  blurred  technique  background  bg  performance 
january 2018 by piperh
The ”blur-up” technique
a codepen demo of a loading technique for bg images. See blurred image before final
webdesign  web  design  image  load  loading  blur  technique  codepen  blurred 
january 2018 by piperh
An Overview of SVG Sprite Creation Techniques ◆ 24 ways
description, with howto's, of different methods of spriting svg's and using in your site, both as inline and as external svg file
webdesign  web  design  svg  sprite  technique  method  inline  css  external  icon  image  vector  browser 
june 2017 by piperh
text/ background contrast with mix-blend-mode #1
code pen showing fancy use of contrasting background to maintain legibility
webdesign  web  design  contrast  text  background  mix-blend  css  technique 
may 2017 by piperh
Responsive CSS Patterns without Media Queries
some techniques for getting responsive behaviour without media queries. Interesting use of fab four technique to make an image occupy only part or all of a column using only the container's width.
webdesign  web  design  css  responsive  fab  four  technique 
february 2017 by piperh
the new code – Balancing Text and Images with Flexbox
technique for accommodating pic and words together in boxes using flex. might have been handy for aopc structure
webdesign  web  design  css  layout  structure  flex  flexbox  box  card  panel  technique 
january 2017 by piperh
Using CSS to animate border-radius Chris Ruppel
explanation of some effects achievable with css on borders - give a sort-of hand drawn look
webdesign  web  design  css  technique  effect  animate  animation  border  radius  animated 
december 2016 by piperh
Free Learn Grid Layout video series
free videos about css grid layout by Rachel Andrew
webdesign  web  design  css  grid  layout  code  coding  technique  structure  video  tutorial  howto 
december 2016 by piperh
The Coming Revolution in Email Design · An A List Apart Article
24.11.16. roundup of current and soon-to-be email design possibilities, though rather general and short of specific references
email  design  graphic  client  technique  css  html  animated 
november 2016 by piperh
AtoZ CSS: Vertical-alignment in CSS - SitePoint Premium
nice technique (at end of video) for flexible vertical centering using before:
webdesign  web  design  css  code  coding  technique  vertical  center  centering  layout 
november 2016 by piperh
Sticky footer revisited | eAnka StudioeAnka Studio
a handy roundup of best-known techniques but no perfect one for flexible height footer. Also suggests flexbox
webdesign  web  design  sticky  footer  technique  css  html  code  roundup 
april 2016 by piperh
Responsive, Flexible-Height Sticky Footers in CSS – Galen Gidman
flexible height sticky footer. Author says put a div inside 'table row' to get round unexpected table padding and margin issues.
At end of page he says use flexbox if compatibility is OK.
webdesign  web  design  sticky  footer  flexible  height  table  technique  code  css  html 
april 2016 by piperh
How to Use the Sticky Footer HTML & CSS Code
Sticky footer similar to Ryan Fait. Fixed height footer
webdesign  web  design  sticky  footer  code  howto  layout  page  technique  css  html 
april 2016 by piperh
How To Get Started With CSS Flexbox
nice simple explanations of different uses for flex
webdesign  web  design  css  flex  flexbox  display  howto  tutorial  technique  layout  responsive 
june 2015 by piperh
A Modern Designer's Canvas | Smashing Magazine
great article about design process and channelling ones abilities and skills
design  web  art  graphic  technique  skill  work  tool  iterate  sketch  plan  skillset  diversify  present  presentation  method  communicate  inspiration 
march 2014 by piperh

Copy this bookmark:





to read