Des pixels et du code #31

Ce contenu a été rédigé il y a 12 ans. Il se peut qu'il ne soit plus à jour.

Une semaine très orientée CSS et CSS3, avec toujours autant de liens utiles sur le responsive webdesign et la mobilité.

Les tutoriels de la semaine

#CSS
Animer les pseudo-éléments avec les transitions CSS une technique a base d’inherit pour pallier (tricher?) au fait qu’à part Firefox, aucun navigateur ne comprend les transitions sur les pseudo classes pour le moment

Three line menu navicon ,  trois façons de créer une icône en 3 lignes à utiliser comme icône de navigation

Simple yet amazing css3 border transition effects des effets hover funs et pourtant très simples avec des transitions CSS3

#Favicon
Don’t Forget About Favicons on Retina Screens un petit tutoriel pour gérer les favicons de différente taille pour les sites mobiles

Des ressources utiles

#mobile inspiration
Mobilemozaic.com  une autre gallerie d’interface mobiles classées par type d’interface

#WordPress
How to Create Grid Column Content in WordPress the “Right” Way un plugin pour créer un système de colonnes à base de shortcode

#CSS3
Nthmaster.com un site pour comprendre visuellement la pseudo classe nth child

#RWD
Responsivedesignweekly.com toutes les semaines les actus et astuces concernant le responsive Webdesign

#Typo
Fontdropper un bookmarklet pour jouer avec les fonts d’un site

Les outils  et plugins pour vous faciliter la vie

#QRcode
Qrhacker.com un générateur de qrcode pour en faire des sympas et originaux

#Accessibilité
ContrastA un petit outil en ligne pour tester les contrastes entre deux couleurs pour les normes d’accessibilité

Les articles à lire

#mobile
Safari for iPhone ignores viewport settings on .mobi domains

#Mobilité
A pixel is not a pixel la conférence de Peter-Paul Koch sur la relativité de l’unité pixel

#Optimisation SVG
svgs are cool, but icon fonts are just 10% of their file size un petit comparatif SVG vs font icon

#HTML5 Pishing
Using the HTML5 Fullscreen API for Phishing Attacks, non vous ne revez pas, on parle bien d’utiliser l’API HTML5 fullscreen pour créer du pishing. Impressionnant et inquiétant à la fois.

#CSS
Cssrefresh.frebsite.nl un petit JavaScript à placer dans les pages en cours de dev, pour que leur CSS se rafraichisse automatiquement.

#Inspiration
20 Simply Gorgeous Examples of User Interface Design un peu d’inspiration pour du design d’interface