public marks

PUBLIC MARKS with tag css

July 2015

Wealthfront Engineering: Performant CSS Animations: Netflix Case Study

by manu
While going over performant web animations with our new batch of interns, Netflix's new redesign was brought up as an example of something that seemed to have DOM nodes that changed size and pushed other DOM nodes around.

June 2015

Fabiolik

by fabiolik
Avec 15 ans d’expérience en tant qu’indépendant, au sein d’agences web et auprès de l’annonceur, j'interviens à chaque étape de l’expérience utilisateur. Webdesign et gestion de sites internet Infographie Photographie

Framer - Prototyping Tool for Designing UI, Interaction and Animation

by sbrothier (via)
Framer is a new creative tool to build interaction and animation prototypes.

Isotope

by 84GHz & 8 others (via)
Filter & sort magical layouts

May 2015

cssnext

by 84GHz (via)
You can code in CSS4+ and it will be transformed to CSS3.

After Effects to CSS

by 84GHz (via)
key findings that an After Effects motion designer needs to understand if their animations will ultimately be in code

Solved by Flexbox — Cleaner, hack-free CSS

by srcmax & 1 other
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity. Finally, thanks to Flexbox, we have a solution.

Solved by Flexbox — Cleaner, hack-free CSS

by Spone & 1 other (via)
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity. Finally, thanks to Flexbox, we have a solution.

CSS - ICONS - @font-face, Accélérez vos polices d'icônes ! - Alsacreations

by decembre
Aller un peu plus loin Oui mais voila, il reste encore trop de fichiers à charger. C'est là qu'intervient le schéma Data-URI, que l'on utilisait pour les icônes images afin de supprimer une requête en intégrant directement l'image dans le fichier CSS. L'idée est la même, intégrer directement la police de caractères dans le fichier CSS. Une option disponible dans les préférences d'Icomoon : "Encode et Embed Font in CSS". On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe.

Animate.css

by sbrothier
Just-add-water CSS animations

ramjet

by 84GHz & 1 other (via)
Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree. It does so by making copies of the two elements (and all their children), setting a fixed position on each, then using CSS transforms to morph the two elements in sync.

April 2015

CSS Flexbox : related articles, tips and resources

by dzc & 1 other
Curated collection of CSS Flexbox related articles, tips and resources

CSS Noise | MightyMeta

by sbrothier
This post looks at a way to add a subtle noise effect to HTML elements using CSS. Using this technique is of interest because it doesn’t require use of an image editor, weighs in at just a little over 2K and doesn’t generate any extra HTTP requests.