chrismasters + css   264

Time-saving CSS techniques to create responsive images
This one works everywhere and it is my favourite! You’ll need to wrap your image with a relative padded parent.

We will keep the image ratio with a percentage on the padding property. Your image will be a full size absolute child.
responsive  image  css  video  technique 
august 2018 by chrismasters
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
css  design  snippets  useful  resource  html 
april 2018 by chrismasters
Very useful guide to modern web typography.
code  css  documentation  font  typography  web 
december 2017 by chrismasters
Hero Patterns
Free repeatable SVG background patterns for your web projects
background  css  design  patterns  svg 
november 2017 by chrismasters
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
css  html  accessibility  components 
april 2017 by chrismasters
Grid by Example
A collection of usage examples for the CSS Grid Layout specification.
css  css3  grid  grids  layout 
march 2017 by chrismasters
Convert html into a JSON API
api  json  css  scraping  html  via:popular 
may 2016 by chrismasters
A jQuery Masonry alternative with CSS-driven configuration.
css  grid  javascript  jquery  masonry 
april 2016 by chrismasters
MJML - The Responsive Email Framework
The only framework that makes responsive-email easy
css  email  framework  html  responsive 
april 2016 by chrismasters
Ink Transition Effect in CSS and jQuery
An ink bleed transition effect, powered by CSS animations.
css  animation  transition 
march 2016 by chrismasters
Styling CSS without losing your sanity
css  framework  web  scss 
november 2015 by chrismasters
Animating an SVG Menu Icon with Segment
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths. View demo
css  svg  animation  jquery 
november 2015 by chrismasters
Making Instagram style filters using CSS
css  css3  filters  design  instagram 
october 2015 by chrismasters
Pure CSS Progress
3d style progress bar pure CSS
css  css3  loading 
august 2015 by chrismasters
A set of beautifully handcrafted minimal mobile devices in pure CSS.
ios  iphone  ipad  css  mockup  preview  devices 
july 2015 by chrismasters
Swipeable, Destroyable clean coded carousel library.
carousel  css  gallery  javascript  jquery 
june 2015 by chrismasters
Basscss is a lightweight collection of base element styles, immutable utilities, layout modules, and color styles designed for speed, clarity, performance, and scalability.
boilerplate  css  development  framework  sass 
april 2015 by chrismasters
How to Center in CSS
Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.
centering  code  css  webdesign  webdev 
april 2015 by chrismasters
Apple Watch Dials - CSS Animation
Technique for creating circular progress bars.
animation  bars  css 
march 2015 by chrismasters
Uppercase alphabet made entirely from CSS.
css  design  font  fonts  typography 
march 2015 by chrismasters
Cross-browser Image Blur with CSS
Some techniques for CSS blurs — IE being the (as usual) pain point.
blur  css  css3  webdev  filter 
december 2014 by chrismasters
Add styling and animation effects to individual lines of HTML text.
css  dev  javascript  typography  webdev 
november 2014 by chrismasters
The Art of UI Animations, Lean UX SF
Really great presentation on animation principals and techniques for motion designers.
animation  ui  design  css  motion  javascript  js  via:popular 
november 2014 by chrismasters
Mega-Site Navigation in CSS and jQuery | CodyHouse
A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.
css  jquery  navigation  responsive  megnav  supermenu  megamenu 
november 2014 by chrismasters
Styling And Animating SVGs With CSS
In-depth article on using CSS & SVG together, a good compliment to the CSSTricks article.
animation  css  webdesign  SVG  styling  development 
november 2014 by chrismasters
Flexbox Cheatsheet Cheatsheet
Well explained guide to implementing flexbox.
cheatsheet  css  flex  flexbox 
november 2014 by chrismasters
LivingStyleGuide Gem—easily create front-end style guides
The easiest way to create front-end style guides with Sass and Compass
compass  css  design  ruby  styleguide 
october 2014 by chrismasters
Beautiful CSS drop caps made easy
css  fonts  js  typography  dropcap 
october 2014 by chrismasters
the last carousel you'll ever need
carousel  html  css  javascript  slider 
october 2014 by chrismasters
Pure CSS 3 fancy separator | Front / Back
Separator CSS Expo musees style divider pure CSS
css  separator 
september 2014 by chrismasters
Vertical align anything with just 3 lines of CSS
Useful backup - even has a way of solving the blurred pixel issue now.
css  css3  html  vertical 
september 2014 by chrismasters
Beautiful icon transformations
animation  css  icons  javascript 
august 2014 by chrismasters
A free library of HTML, CSS, JS nuggets
css  development  html  javascript  library 
july 2014 by chrismasters
Simplest possible examples of HTML, CSS and JavaScript.
css  development  html5  javascript  reference 
july 2014 by chrismasters
Hover Effect Ideas
Inspiration for subtle hover effects
css  design  effects  ux  hover 
june 2014 by chrismasters
CSS Gradients with background-blend-mode
New CSS gradient possibilities with the background-blend-mode property.
background  css  gradient 
june 2014 by chrismasters
Outdated Browser
browser  css  javascript  resources  update  browsercheck 
june 2014 by chrismasters
bounce.js lets you create tasty CSS3 powered animations in no time.
animation  css  javascript  js 
june 2014 by chrismasters
Project Parfait (Beta)
PSD CSS Extraction, Measurements and Image Optimization Service for the Web
adobe  css  photoshop  tool  tools 
april 2014 by chrismasters
What is the cost of your non-responsive images?
CSS  breakpoint  RWD  responsive  images 
april 2014 by chrismasters
One click exporting of layers from Illustrator as png/jpg or svg.
css  illustrator  svg  jpg  png  export  tool  plugin 
april 2014 by chrismasters
Minimal Devices - CSS and HTML devices
Pure scaling HTML & CSS devices to use to present screenshots.
css  design  portfolio  templates  tools 
march 2014 by chrismasters
« earlier      
per page:    204080120160

related tags

3d  :nth  :nth-child  accessibility  adaptive  adobe  ajax  alignment  android  animation  animations  api  app  application  apps  arrow  art  artwork  awesome  backbone  background  bars  base64  baseline  beatdetection  bestpractices  bezier  blog  blogging  blur  boilerplate  bootstrap  border-image  border-radius  borders  boxes  breakpoint  browser  browsercheck  bubble  button  buttons  carousel  center  centering  cheatsheet  checkbox  chrome  circle  clean  clip  clip-path  cloud  code  coding  coff  coffeescript  color  colors  colour  compass  components  convert  covers  css  css3  cssgrid  cssreset  currentColor  customproperties  customshaders  dabblet  data  dataURI  dependencies  design  dev  developement  developer  developertools  development  devices  divider  dock  docs  documentation  dropbox  dropcap  dropshadow  easing  easingequations  editor  effect  effects  email  emailing  emails  eric  ericmeyer  export  extension  feed  file  fileinput  filter  filters  fittext  flex  flexbox  font  font-face  fonts  footnotes  form  forms  framework  fullscreen  functional  gallery  gem  generator  gist  goldenratio  google  gradient  grid  grids  gridsystems  guide  guidelines  headers  hex  history  hortizontal  hosting  hover  html  html5  icon  icons  IE  illustrator  image  images  infinite  infinitescrolling  inline  input  inspiration  instagram  interactive  ios  ipad  iphone  jank  javascript  jpg  jquery  js  json  kerning  layerstyles  layout  less  lesscss  library  lightbox  links  list  lists  live  loader  loading  mac  magazine  mailer  mailouts  maps  markdown  markup  masonry  md  media-queries  mediaqueries  megamenu  megnav  menu  metro  meyer  minimal  mixin  mobile  mockup  modal  motion  music  myth  navigation  newsletter  noise  normalize  online  optimization  osx  otf  pagination  parallax  pattern  patterns  performance  photo  photoshop  plugin  plugins  png  pointer  polyfill  portfolio  position  postprocessor  premailer  preview  progress  progressbar  prototype  prototyping  psd  pseudo  publishing  pullquote  quotations  radial  radio  rails  ratio  reference  reset  resource  resources  responsive  retina  reveal  rhythmn  rss  ruby  RWD  sass  saving  scraping  scroll  scrollbar  scrolling  scss  search  selectors  separator  shadow  shaky  share  sharing  sidebar  sketch  slicing  slider  slideshow  smooth  snippets  social  software  space  spinner  sprites  spritesheet  sticky  style  styleguide  styles  styling  sublime  sublimetext  supermenu  svg  systems  table  technique  template  templates  test  testing  textinput  texture  thumbnail  timeline  tips  tool  tools  tooltip  transition  transitions  ttf  tutorial  tutorials  twitter  type  typekit  typography  ui  units  update  url  useful  ux  validation  variable  vector  vertical  via:gjhead  via:popular  video  web  webapp  webdesign  webdev  webfont  webfonts  widget  windows  wordpress  workflow 

Copy this bookmark: