🌐 Public

CSS Master Class

By Patrik Ward

Introduction

A collection of tools and articles to take your CSS game to the next level.

Patrik Ward — Designer currently working as a Happiness Hero at Buffer. Also writing a guide to Sketch ...

2 CSS Level 4 And More: What's Coming In 2014

Over the last few years web developers have been forced to adapt to several major shifts: the rise of HTML5, a fount of preprocessors and JavaScript frameworks, together with a sweeping series of design trends driven by technological change. Mobile and responsive design, flat UIs, and deeply interactive pages have become standard practice in a very short period. At times

Added by Patrik Ward: “Cover images are a big deal (get it?), so this method of flexible implementation is pretty handy.

4 Flexible CSS cover images

I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it's displayed at a predetermined aspect ratio. This post describes the implementation. Known support: Chrome, Firefox, Safari, Opera, IE 9+ FeaturesThe way that the cover image scales, and changes aspect ratio, is

5 Z63 | Vertical align anything with just 3 lines of CSS

With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don't know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning

7 Troubleshooting CSS

Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. Text documents. It has come a long way since then. Probably a bit too long. A lot of things

8 Animated Books with CSS 3D Transforms

A creative way to show interactive books using CSS 3D Transforms. View demo Download source In this playground we'll show you some creative, animated books with CSS 3D transforms and transitions. We'll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and

13 Nifty Modal Window Effects

A set of experimental modal window appearance effects with CSS transitions and animations. View demo Download source Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration. The

20 Nick Heer: Form Framework

What?Form controls such as radio buttons, check boxes, and text areas are currently delegated by the different devices one uses. Depending on whether one is using a Mac or PC, one will get differently-styled form controls. iOS and Android each serve their own form controls that are optimized for the touch-based user interface. This presents a challenge to web designers

22 CSS and Images for Retina Displays

I see lots of blurry images out there on websites (and application webviews) designed for retina iPhone/iPad and more recently the new MacBook Pro. These images are not taking full advantage of the retina display's pixel density. Remember these things... Retina displays render HTML at the same "pixel" size as standard displays. This means your old width:1024px website is rendered

23 CSSAnimation Homepage & Documentation

Download source code from Github here CSSAnimation makes creating CSS transforms and transitions easy as pie. It's also framework agnostic. It has a base implementation, and then extensions to the MooTools and jQuery APIs. Native JavaScript Fiddle with this var element = document.getElementById('some-el'), transition = new Transition(element), transform = new Transform(element); transition.set({ property: 'transform', 'timing-function': 'ease-in', duration: '2s' }); transform.rotate(720).scale(2);

26 Juicy Studio: CSS Analyser

This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

Added by Patrik Ward: “Advanced CSS techniques shared by Lea Verou at An Event Apart in Chicago 2013.

30 An Event Apart: Deep CSS Secrets

At An Event Apart in Chicago IL 2013, Lea Verou shared a number of advanced CSS techniques for creating useful design effects in the browser. Here's my notes from her talk Deep CSS Secrets: background-attachment can be used to make background images fixed or scroll. There is a new value called local. It stays fixed when scrolling the page but

Todos

Freshman

  • 0 Playlists
  • 0 Followers

Chris Savoie

User Experience Designer for InViid at Bold Commerce

  • 0 Playlists
  • 0 Followers

Tim Robertson

Freshman

  • 0 Playlists
  • 0 Followers

Vladimir Milojevic

Freshman

  • 1 Playlists
  • 1 Followers

qibang

Freshman

  • 0 Playlists
  • 0 Followers

aoiusui

Freshman

  • 0 Playlists
  • 0 Followers

Maria Brovarska

Freshman

  • 0 Playlists
  • 0 Followers

Nandini Rathi

Freshman

  • 0 Playlists
  • 0 Followers

inestestes

Freshman

  • 0 Playlists
  • 0 Followers

J Boku

Freshman

  • 0 Playlists
  • 0 Followers

Arek Mycek

Freshman

  • 0 Playlists
  • 0 Followers

Egid van Houtem

Freshman

  • 0 Playlists
  • 0 Followers

Thiago Silva Ferreira

Freshman

  • 0 Playlists
  • 0 Followers

schoenflies

Freshman

  • 2 Playlists
  • 0 Followers

samreen qureshi

Freshman

  • 0 Playlists
  • 0 Followers

Bokuchava Bokuchava

Freshman

  • 0 Playlists
  • 0 Followers

James B

Freshman

  • 0 Playlists
  • 0 Followers

HERI SUSANTO

Freshman

  • 0 Playlists
  • 0 Followers

Martijn Schouten

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?