HTTP/1.1 200 OK
Date: Fri, 17 Mar 2017 17:53:41 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Status: 200 OK
x-powered-by: Express
cache-control: public, max-age=2678400
vary: Accept-Encoding
X-Ghost-Cache-Status: From Cache
CF-Cache-Status: MISS
Expires: Mon, 17 Apr 2017 17:53:41 GMT
Server: cloudflare-nginx
CF-RAY: 3411d025de005699-IAD

<!DOCTYPE html>
<html lang="fr" prefix="dcterms: http://purl.org/dc/terms/">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LA CASCADE</title>
<meta name="title" content="LA CASCADE">
<meta name="description" content="Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"/>
<meta name="keywords" content="css, html, web, web design, responsive design, développement web, sass, svg, animations, flexbox, css-grid layout, javascript, typographie, sketch 3, grunt, gulp, ux, ui, métadonnées, web sémantique, seo, workflow, video"/>
<meta name="Editor" content="Pierre Choffé"/>
<meta name="Translator" content="Pierre Choffé"/>
<meta name="Publisher" content="La Cascade"/>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"0620d6dc06494e97e17e4b866aebab65",petok:"a4f7a20a3000d22ad2164928732977948b11db26-1489773221-86400",zone:"la-cascade.io",rocket:"0",apps:{"ga_key":{"ua":"UA-46638418-1","ga_bs":"2"},"abetterbrowser":{"ie":"8","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="/assets/css/global.css?v=39da68af2d"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,900' rel='stylesheet' type='text/css'/>
<link rel="publisher" href="https://plus.google.com/u/0/114976289963220170204"/>
<link rel="author" href="https://plus.google.com/u/0/114976289963220170204"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:creator:id" content="37664207"/>
<meta name="twitter:site" content="La Cascade"/>
<meta name="twitter:description" content="Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"/>
<meta name="twitter:image:src" content="https://la-cascade.io/content/images/2017/02/starsandcar-mid-compressor.jpg"/>
<meta property="fb:admins" content="100007472623336"/>
<meta property="og:locale" content="fr"/>
<meta property="article:author" content=""/>
<meta property="og:type" content="blog"/>
<meta property="og:title" content="LA CASCADE"/>
<meta property="og:description" content="Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"/>
<meta property="og:image" content="https://la-cascade.io/content/images/2017/02/starsandcar-mid-compressor.jpg"/>
<link rel="canonical" href="https://la-cascade.io/"/>
<meta name="referrer" content="no-referrer-when-downgrade"/>
<meta property="og:site_name" content="LA CASCADE"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="LA CASCADE"/>
<meta property="og:description" content="Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"/>
<meta property="og:url" content="https://la-cascade.io/"/>
<meta property="og:image" content="https://la-cascade.io/content/images/2017/02/starsandcar-mid-compressor.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="LA CASCADE"/>
<meta name="twitter:description" content="Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"/>
<meta name="twitter:url" content="https://la-cascade.io/"/>
<meta name="twitter:image" content="https://la-cascade.io/content/images/2017/02/starsandcar-mid-compressor.jpg"/>
<meta name="twitter:site" content="@pierrechoffe"/>
<meta property="og:image:width" content="2126"/>
<meta property="og:image:height" content="1419"/>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Website",
    "publisher": {
        "@type": "Organization",
        "name": "LA CASCADE",
        "logo": "https://la-cascade.io/content/images/2015/03/optimised.svg"
    },
    "url": "https://la-cascade.io/",
    "image": {
        "@type": "ImageObject",
        "url": "https://la-cascade.io/content/images/2017/02/starsandcar-mid-compressor.jpg",
        "width": 2126,
        "height": 1419
    },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://la-cascade.io"
    },
    "description": "Un peu de tout sur CSS, HTML,  SVG, JavaScript et le reste"
}
    </script>
<meta name="generator" content="Ghost 0.11"/>
<link rel="alternate" type="application/rss+xml" title="LA CASCADE" href="https://la-cascade.io/rss/"/>
<script type="application/ld+json">
    { "@context" : "http://schema.org",
      "@type" : "Person",
      "name" : "Pierre Choffé",
      "url" : "http://la-cascade.io/",
      "sameAs" : [ "https://www.facebook.com/pierre.choffe.7",
          "https://twitter.com/pierrechoffe",
          "https://www.linkedin.com/profile/view?id=108000049",
          "https://plus.google.com/u/0/+PierreChoff%C3%A9Css/about",
          "http://la-cascade.io/foaf.rdf",
          "https://fr.wikipedia.org/wiki/Utilisateur:Pierre_Choffe",
          "http://codepen.io/pierrechoffe/",
          "http://tutsplus.com/authors/pierre-choffe",
          "https://github.com/pierrechoffe",
          "http://www.proz.com/profile/1927037"]
    }
    </script>
<script type="application/ld+json">
    { "@context" : "http://schema.org",
      "@type" : "Blog",
      "name" : "La Cascade",
      "alternateName" : "La-Cascade",
      "url" : "https://la-cascade.io/",
      "editor" : {
        "@type": "Person",
        "name": "Pierre Choffé"
        },
      "translator" : {
        "@type": "Person",
        "name": "Pierre Choffé"
        },
      "author" : {
      	"@type": "Person",
        "name": "Pierre Choffé"
        }
    }
    </script>
<meta name="google-site-verification" content="c7Ipq7l4JVE7MtRvcmVlowoe-evYW5-51aHAixnqmLU"/>
 
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-46638418-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
</head>
<body class="home-template nav-closed">
<div class="nav">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul>
<li class="nav-home nav-current" role="presentation"><a href="https://la-cascade.io/">Home</a></li>
<li class="nav-articles" role="presentation"><a href="https://la-cascade.io/articles/">Articles</a></li>
<li class="nav-ressources" role="presentation"><a href="https://la-cascade.io/ressources/">Ressources</a></li>
<li class="nav--propos" role="presentation"><a href="https://la-cascade.io/a-propos/">À propos</a></li>
<li class="nav-dicocss" role="presentation"><a href="https://la-cascade.io/dico-css/">Dico-CSS</a></li>
<li class="nav-css" role="presentation"><a href="https://la-cascade.io/tag/css/">CSS</a></li>
<li class="nav-bases-css" role="presentation"><a href="https://la-cascade.io/tag/bases-css/">Bases CSS</a></li>
<li class="nav-html" role="presentation"><a href="https://la-cascade.io/tag/html/">HTML</a></li>
<li class="nav-svg" role="presentation"><a href="https://la-cascade.io/tag/svg/">SVG</a></li>
<li class="nav-sass" role="presentation"><a href="https://la-cascade.io/tag/sass/">Sass</a></li>
<li class="nav-flexbox" role="presentation"><a href="https://la-cascade.io/tag/Flexbox/">Flexbox</a></li>
<li class="nav-cssgrid" role="presentation"><a href="https://la-cascade.io/tag/css-grid/">CSS-Grid</a></li>
<li class="nav-design" role="presentation"><a href="https://la-cascade.io/tag/design/">Design</a></li>
<li class="nav-responsive-design" role="presentation"><a href="https://la-cascade.io/tag/responsive-web-design/">Responsive Design</a></li>
<li class="nav-typographie" role="presentation"><a href="https://la-cascade.io/tag/typographie/">Typographie</a></li>
<li class="nav-couleur" role="presentation"><a href="https://la-cascade.io/tag/couleur/">Couleur</a></li>
<li class="nav-dgrads" role="presentation"><a href="https://la-cascade.io/tag/gradients/">Dégradés</a></li>
<li class="nav-animations" role="presentation"><a href="https://la-cascade.io/tag/animations/">Animations</a></li>
<li class="nav-workflow" role="presentation"><a href="https://la-cascade.io/tag/workflow/">Workflow</a></li>
<li class="nav-sketch" role="presentation"><a href="https://la-cascade.io/tag/sketch/">Sketch</a></li>
<li class="nav-smantique" role="presentation"><a href="https://la-cascade.io/tag/metadata/">Sémantique</a></li>
<li class="nav-grunt" role="presentation"><a href="https://la-cascade.io/grunt-pour-ceux-qui-pensent-que-grunt-est-complique/">Grunt</a></li>
<li class="nav-gulp" role="presentation"><a href="https://la-cascade.io/gulp-pour-les-debutants/">Gulp</a></li>
<li class="nav-freefonts" role="presentation"><a href="https://la-cascade.io/les-free-fonts-aujourdhui/">Freefonts</a></li>
<li class="nav-video-background" role="presentation"><a href="https://la-cascade.io/video-en-background/">Video Background</a></li>
</ul>
<div class="follow-me-icons">
<a href="https://twitter.com/pierrechoffe"><span class="icon-twitter"></span></a>
<a href="https://www.facebook.com/pierre.choffe.7"><span class="icon-facebook"></span></a>
<a href="https://plus.google.com/u/0/+PierreChoff%C3%A9Css/posts"><span class="icon-google-plus"></span></a>
<a href="https://feeds.feedburner.com/LaCascade"><span class="icon-feed"></span></a>
</div>
 
</div>
<span class="nav-cover"></span>
<div class="site-wrapper" itemscope itemtype="http://schema.org/Article">
<header class="main-header " style="background-image: url(/content/images/2017/02/starsandcar-mid-compressor.jpg)">
<nav class="main-nav overlay clearfix">
<a class="blog-logo" href="https://la-cascade.io"><img src="/content/images/2015/03/optimised.svg" alt="Blog Logo"/></a>
<a class="menu-button" href="#"><span class="burger" aria-label="navigation du site">&#9776;</span><span class="word">Menu</span></a>
</nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">LA CASCADE</h1>
<h2 class="page-description">Un peu de tout sur CSS, HTML, SVG, JavaScript et le reste</h2>
</div>
</div>
<a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
</header>
<main id="content" class="content" role="main">
<div class="extra-pagination inner">
<nav class="pagination" role="navigation">
<span class="page-number">Page 1 of 1</span>
</nav>
</div>
<article class="post tag-css-grid tag-flexbox tag-css tag-bases-css tag-layout tag-debutant tag-responsive-web-design">
<header class="post-header">
<span class="post-meta"><time datetime="2017-03-14">14 Mar 2017</time> on <a href="/tag/css-grid/">CSS-Grid</a>, <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a></span>
<h2 class="post-title"><a href="/se-lancer-dans-css-grid/">Se lancer dans CSS Grid</a></h2>
</header>
<section class="post-excerpt">
<p>Robin Rendle a écrit un tutoriel simple pour s'initier à CSS Grid en commençant par les bases. Une excellente introduction au système de layout qui va nous changer la vie.</p>
</section>
</article>
<article class="post tag-css tag-css-grid tag-flexbox tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2017-03-05">05 Mar 2017</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/css-grid/">CSS-Grid</a>, <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/grid-et-flexbox-le-duo-gagnant/">Grid et Flexbox, le duo gagnant</a></h2>
</header>
<section class="post-excerpt">
<p>CSS Grid et Flexbox sont faits pour fonctionner ensemble. Grid pour l'organisation générale, Flexbox pour les ajustements spécifiques. Chen Hui Jing le démontre avec un exemple magistral (et quelques bonus)</p>
</section>
</article>
<article class="post tag-html tag-css tag-javascript tag-performance tag-layout tag-dom">
<header class="post-header">
<span class="post-meta"><time datetime="2017-03-01">01 Mar 2017</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/performance/">Performance</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/dom/">DOM</a></span>
<h2 class="post-title"><a href="/optimiser-votre-front-end-pour-le-navigateur/">Optimiser votre front-end pour le navigateur</a></h2>
</header>
<section class="post-excerpt">
<p>L'optimisation des sites web est à l'ordre du jour. Si nous voulons améliorer l'expérience utilisateur, en particulier sur les mobiles, nous devons comprendre le fonctionnement des navigateurs. Par Sanjay Purswani.</p>
</section>
</article>
<article class="post tag-css tag-bases-css tag-debutant tag-layout tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2017-02-05">05 Feb 2017</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/les-proprietes-css-background/">Les propriétés CSS background</a></h2>
</header>
<section class="post-excerpt">
<p>Méthodique et claire comme on la connaît, Ire Aderinokun fait le tour des propriétés background de CSS pour placer, dimensionner, répéter, etc les images d'arrière-plan. Une excellente introduction ou révision.</p>
</section>
</article>
<article class="post tag-css tag-layout tag-tous-niveaux tag-amelioration-progressive">
<header class="post-header">
<span class="post-meta"><time datetime="2016-12-30">30 Dec 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/amelioration-progressive/">Amélioration Progressive</a></span>
<h2 class="post-title"><a href="/css-supports-va-vous-changer-la-vie/">CSS @supports va vous changer la vie</a></h2>
</header>
<section class="post-excerpt">
<p>L'amélioration progressive est un beau principe nous invitant à utiliser des fonctionnalités CSS avancées dès maintenant, la feature-query @support est notre nouvel outil pour cela. Petite intro par Charlotte Jackson.</p>
</section>
</article>
<article class="post tag-svg tag-bases-svg tag-design tag-intermediaire tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2016-12-29">29 Dec 2016</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/svg-la-syntaxe-path/">SVG, la syntaxe Path</a></h2>
</header>
<section class="post-excerpt">
<p>L'élément path de SVG est l'outil de dessin le plus perfectionné qui soit, mais sa syntaxe ne semble pas aisée. Chris Coyier décortique brillamment ce langage, pas si compliqué finalement.</p>
</section>
</article>
<article class="post tag-css tag-accessibilite tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2016-12-27">27 Dec 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/accessibilite/">Accessibilité</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/css-noubliez-pas-limpression-papier/">CSS : n&#x27;oubliez pas l&#x27;impression papier!</a></h2>
</header>
<section class="post-excerpt">
<p>Les utilisateurs continuent d'imprimer nos pages web : les optimiser pour l'impression papier est important pour l'accessibilité mais aussi, tout simplement, pour l'expérience utilisateur. Manuel Matuzovic nous fait partager quelques astuces.</p>
</section>
</article>
<article class="post tag-bases-svg tag-svg tag-intermediaire tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2016-12-26">26 Dec 2016</time> on <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/comprendre-svg-viewbox/">Comprendre SVG viewBox</a></h2>
</header>
<section class="post-excerpt">
<p>L'attribut viewBox est l'un des premiers qu'on rencontre quand on débute avec SVG, et potentiellement une grande source de confusion. Cet article de Dudley Storey vous épargnera bien des soucis.</p>
</section>
</article>
<article class="post tag-hash-dudleystorey tag-bases-svg tag-svg tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2016-12-26">26 Dec 2016</time> on <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/utiliser-svg-use/">Utiliser SVG use</a></h2>
</header>
<section class="post-excerpt">
<p>use est l'outil de clonage de SVG, il permet de dupliquer des éléments existants ou prédéfinis et d'alléger votre code. Une introduction claire et concise, comme toujours, de Dudley Storey.</p>
</section>
</article>
<article class="post tag-css tag-bases-css tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2016-05-08">08 May 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/css-initial-inherit-unset-et-revert/">CSS Initial, Inherit, Unset et Revert</a></h2>
</header>
<section class="post-excerpt">
<p>Il existe quatre valeurs applicables (en théorie) à n'importe quelle propriété CSS, ce sont les valeurs explicites par défaut. Avec Ire Aderinokun apprenez à les connaître et à les différencier.</p>
</section>
</article>
<article class="post tag-css-grid tag-flexbox tag-css tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2016-04-18">18 Apr 2016</time> on <a href="/tag/css-grid/">CSS-Grid</a>, <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/utiliser-grid-ou-flexbox/">Utiliser Grid ou Flexbox ?</a></h2>
</header>
<section class="post-excerpt">
<p>Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout.</p>
</section>
</article>
<article class="post tag-css tag-css-grid tag-layout tag-intermediaire tag-responsive-web-design">
<header class="post-header">
<span class="post-meta"><time datetime="2016-04-18">18 Apr 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/css-grid/">CSS-Grid</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a></span>
<h2 class="post-title"><a href="/css-grid-layout-guide-complet/">CSS Grid Layout, guide complet</a></h2>
</header>
<section class="post-excerpt">
<p>Avec Flexbox, le module CSS Grid Layout représente l'avenir de la mise page CSS. Chris House a conçu un guide complet et plein d'exemples pour enfin comprendre cette spécification complexe.</p>
</section>
</article>
<article class="post tag-css tag-layout tag-intermediaire tag-responsive-web-design tag-css-grid">
<header class="post-header">
<span class="post-meta"><time datetime="2016-04-16">16 Apr 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/css-grid/">CSS-Grid</a></span>
<h2 class="post-title"><a href="/css-grid-et-le-saint-graal/">CSS Grid et le Saint Graal</a></h2>
</header>
<section class="post-excerpt">
<p>Un premier article sur la nouvelle spécification CSS Grid Layout. Ire Aderinokun s'attaque au Saint Graal et nous initie aux mystères d'une spécification qui va changer notre façon de travailler!</p>
</section>
</article>
<article class="post tag-svg tag-css tag-intermediaire tag-design">
<header class="post-header">
<span class="post-meta"><time datetime="2016-04-03">03 Apr 2016</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/design/">Design</a></span>
<h2 class="post-title"><a href="/comment-travailler-avec-des-icones-en-svg/">Comment travailler avec des icônes en SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Un bel article de notre frenchie Florens Verschelde qui a fait le buzz et a été repris par l'excellent CSS-Tricks. Explications claires du process et réflexions pour aller plus loin.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2016-03-20">20 Mar 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/sur-not-et-la-specifite/">Sur :not et la spécifité</a></h2>
</header>
<section class="post-excerpt">
<p>Ire Aderinokun va toujours fouiller au fond des choses. Elle revisite ici la pseudo-classe de négation, nous montre l'envers du décor et nous offre un crash course sur la spécificité!</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2016-03-11">11 Mar 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/styler-les-images-non-affichees/">Styler les images non affichées</a></h2>
</header>
<section class="post-excerpt">
<p>Aaah, les images qui ne s'affichent pas... une petite icône misérable à la place et notre texte alternatif tout penaud... Mais avec l'incroyable Ire Aderinokun tout cela est du passé!</p>
</section>
</article>
<article class="post tag-css tag-flexbox tag-layout tag-intermediaire tag-responsive-web-design">
<header class="post-header">
<span class="post-meta"><time datetime="2016-03-07">07 Mar 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a></span>
<h2 class="post-title"><a href="/jouons-avec-flexbox-et-les-quantity-queries/">Jouons avec Flexbox et les Quantity Queries</a></h2>
</header>
<section class="post-excerpt">
<p>Ayant lu l’article sur les quantity queries, Aaron Gustafson expérimente leur mise en oeuvre sur son site... avec Flexbox bien sûr, pour aller jusqu’au bout de l’aventure!</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-responsive-web-design">
<header class="post-header">
<span class="post-meta"><time datetime="2016-03-05">05 Mar 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a></span>
<h2 class="post-title"><a href="/quantity-queries-pour-css/">Quantity Queries pour CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article déjà fameux, Heydon Pickering démontre comment on peut créer des queries basées sur les quantités en pur CSS en utilisant ingénieusement pseudo-classes et combinateurs. Absolument génial Heydon!</p>
</section>
</article>
<article class="post tag-filtres-css tag-svg tag-couleur tag-blend-modes tag-intermediaire tag-hash-unakravets">
<header class="post-header">
<span class="post-meta"><time datetime="2016-02-28">28 Feb 2016</time> on <a href="/tag/filtres-css/">Filtres CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/couleur/">Couleur</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/fecolormatrix-en-douceur/">feColorMatrix en douceur</a></h2>
</header>
<section class="post-excerpt">
<p>Les filtres CSS sont formidables mais ils présentent un inconvénient majeur : on ne peut pas manipuler les canaux. C’est ici qu'intervient feColorMatrix, une méthode SVG présentée par Una Kravets.</p>
</section>
</article>
<article class="post tag-svg tag-design tag-intermediaire tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2016-02-14">14 Feb 2016</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/backgrounds-svg-hexagones-et-ecailles/">Backgrounds SVG : hexagones et écailles</a></h2>
</header>
<section class="post-excerpt">
<p>Dudley Storey poursuit sa passionnante série sur les backgrounds SVG, ici avec des motifs en tuiles hexagonales et en écailles. On y apprend quelques petites astuces relatives à l'encodage base64.</p>
</section>
</article>
<article class="post tag-css tag-animations tag-intermediaire tag-transformations">
<header class="post-header">
<span class="post-meta"><time datetime="2016-02-07">07 Feb 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a></span>
<h2 class="post-title"><a href="/creer-un-cube-en-css/">Créer un cube en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>David Walsh s’amuse à créer un cube 3D en CSS. En chemin, on suit la logique de construction, on apprend ou on révise la 3D CSS et les animations.</p>
</section>
</article>
<article class="post tag-flexbox tag-css tag-layout tag-design tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2016-01-24">24 Jan 2016</time> on <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/techniques-flexbox-4-conception-dune-page-produits/">Techniques Flexbox, 4: conception d&#x27;une page produits</a></h2>
</header>
<section class="post-excerpt">
<p>Levin Mejia, adepte de l’apprentissage par la pratique, nous propose de créer un layout flexible et responsif avec Flexbox. On s’amuse à apprendre ses concepts et propriétés fondamentales.</p>
</section>
</article>
<article class="post tag-css tag-bases-css tag-layout tag-debutant tag-accessibilite tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2016-01-23">23 Jan 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/accessibilite/">Accessibilité</a></span>
<h2 class="post-title"><a href="/cacher-des-elements-avec-css/">Cacher des éléments avec CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Encore un article d'Ire Aderinokun, qu'on aime beaucoup ici pour ses analyses en profondeur et la clarté de ses explications. Avez-vous bien tout considéré lorsque vous cachez un élément HTML?</p>
</section>
</article>
<article class="post tag-css tag-bases-css tag-debutant tag-layout tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2016-01-23">23 Jan 2016</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/controler-le-modele-de-boite/">Contrôler le modèle de boîte</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article simple et complet, Ire Aderinokun rappelle les bases du modèle de boîte CSS et montre pourquoi vous devriez utiliser box-sizing. Super clair comme toujours avec l'étonnante Ire.</p>
</section>
</article>
<article class="post tag-svg tag-animations tag-transformations tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-12-20">20 Dec 2015</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/creer-un-effet-chillwave-en-svg/">Créer un effet Chillwave en SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Varun Vachhar recrée en SVG un effet chillwave initialement créé en sprite : enchaînement de courbes de Bézier, chemins en miroir, animation de la vague et touche finale, un beau boulot!</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-animations tag-transformations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-12-17">17 Dec 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/transformations/">Transformations</a></span>
<h2 class="post-title"><a href="/css-animation-star-wars/">CSS animation : Star Wars</a></h2>
</header>
<section class="post-excerpt">
<p>En synchro parfaite avec l'actualité, Donovan Hutchinson propose l'animation CSS de la bande-annonce du Réveil de la Force, mêlant animations, transformations, translations, rotations et 3D. Bel exercice de pédagogie créative.</p>
</section>
</article>
<article class="post tag-css tag-bases-css tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2015-12-12">12 Dec 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/css-roots-le-retour-aux-racines/">CSS :root, le retour aux racines</a></h2>
</header>
<section class="post-excerpt">
<p>La cascade CSS est la meilleure et la pire des choses. Dans cet article limpide, Simurai donne quelques astuces simples pour réduire les problèmes de spécificité et mieux comprendre CSS.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-design tag-intermediaire tag-bases-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-12-05">05 Dec 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-proprietes-de-style/">Les bases de SVG : Propriétés de style</a></h2>
</header>
<section class="post-excerpt">
<p>Suite des bases de SVG par Dudley Storey : les styles de SVG sont souvent similaires à ceux de CSS, parfois identiques mais souvent juste assez différents pour créer la confusion.</p>
</section>
</article>
<article class="post tag-svg tag-bases-svg tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-22">22 Nov 2015</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/comprendre-svg-preserveaspectratio/">Comprendre SVG preserveAspectRatio</a></h2>
</header>
<section class="post-excerpt">
<p>Après SVG viewport et viewBox, Joni Trythall présente le complément logique, l'attribut preserveAspectRatio. Là aussi, les choses sont d'abord un peu complexes, mais présentées par Joni elles deviennent très claires.</p>
</section>
</article>
<article class="post tag-svg tag-bases-svg tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-22">22 Nov 2015</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/comprendre-svg-viewbox-et-viewport/">Comprendre SVG viewBox et viewport</a></h2>
</header>
<section class="post-excerpt">
<p>SVG viewport et viewBox peuvent sembler compliqués et intimidants lorsqu’on débute avec SVG. Joni Trythall décortique tout cela dans un langage simple et clair, excellente introduction agrémentée d'illustrations fruitées.</p>
</section>
</article>
<article class="post tag-css tag-blend-modes tag-gradients tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-22">22 Nov 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/gradients/">Dégradés</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/effets-dimages-css-3-les-vignettes/">Effets d&#x27;images CSS, 3 : les vignettes</a></h2>
</header>
<section class="post-excerpt">
<p>Suite de notre série d'articles sur les effets d'images CSS. Toujours aussi créative, l'étonnante Una Kravets montre 3 façons de créer des vignettes, l'un des filtres photo les plus populaires.</p>
</section>
</article>
<article class="post tag-css tag-blend-modes tag-intermediaire tag-transformations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-22">22 Nov 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a></span>
<h2 class="post-title"><a href="/effets-dimages-2-lunettes-3d/">Effets d&#x27;images CSS, 2 : lunettes 3D</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article, nous allons voir comment recréer l'effet d'une photo 3D en utilisant les blend modes et les transformations de CSS. Par Una Kravets, au top de sa créativité.</p>
</section>
</article>
<article class="post tag-css tag-blend-modes tag-filtres-css tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-15">15 Nov 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/filtres-css/">Filtres CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/effets-dimages-css-1-vintage-delave/">Effets d&#x27;images CSS, 1 : vintage délavé</a></h2>
</header>
<section class="post-excerpt">
<p>On peut réaliser de nombreux effets directement dans le navigateur aujourd'hui, sans passer par Photoshop. Una Kravets combine les fonctionnalités CSS disponibles actuellement, filtres, blend modes, dégradés, textures, transformations. Passionnant!</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-11">11 Nov 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-9-image-breakpoints/">Introduction aux images responsives 9 : image breakpoints</a></h2>
</header>
<section class="post-excerpt">
<p>C'est l'avant-dernière partie de notre série au long cours sur les images responsives, et c'est la plus redoutable. Mais comme toujours avec l'excellent Jason Grigsby, très complète et très claire.</p>
</section>
</article>
<article class="post tag-html tag-css tag-layout tag-bases-css tag-debutant tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2015-11-02">02 Nov 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/comment-fonctionne-z-index/">Comment fonctionne z-index</a></h2>
</header>
<section class="post-excerpt">
<p>Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!</p>
</section>
</article>
<article class="post tag-flexbox tag-css tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-31">31 Oct 2015</time> on <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/techniques-flexbox-3-layout-sur-2-colonnes/">Techniques Flexbox, 3 : layout sur 2 colonnes</a></h2>
</header>
<section class="post-excerpt">
<p>Les applications concrètes de Flexbox, suite : encore une solution simple à un problème compliqué de mise en page, présentée par David Walsh. Mais pourquoi diable a-t-il fallu attendre si longtemps?</p>
</section>
</article>
<article class="post tag-flexbox tag-css tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-25">25 Oct 2015</time> on <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/techniques-flexbox-2-centrer-verticalement/">Techniques Flexbox, 2 : centrer verticalement</a></h2>
</header>
<section class="post-excerpt">
<p>Le centrage vertical est depuis toujours un cauchemar pour les développeurs web, et même s'il existe des solutions, aucune n'égale flexbox par sa simplicité. Un article concis de David Walsh.</p>
</section>
</article>
<article class="post tag-css tag-animations tag-intermediaire tag-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-19">19 Oct 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/svg/">SVG</a></span>
<h2 class="post-title"><a href="/animer-des-elements-sur-un-chemin-avec-css/">Animer des éléments sur un chemin avec CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Motion Path est la plus excitante des nouveautés d’animation CSS de ces cinq dernières années, elle est présentée par Dudley Storey et son amie Alice (au pays des merveilles)</p>
</section>
</article>
<article class="post tag-flexbox tag-css tag-intermediaire tag-layout tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-18">18 Oct 2015</time> on <a href="/tag/flexbox/">Flexbox</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/techniques-flexbox-1-titre-aligne-et-retour-a-la-ligne/">Techniques Flexbox, 1 : titre aligné et retour à la ligne</a></h2>
</header>
<section class="post-excerpt">
<p>Premier article d’une série sur les applications pratiques de Flexbox. Chris Coyier résout un problème d'alignement de titre et de sous-titre avec retour à la ligne, compliqué sans flexbox.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-18">18 Oct 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/motifs-svg-maoris/">Motifs SVG maoris</a></h2>
</header>
<section class="post-excerpt">
<p>En hommage à nos amis néo-zélandais, voici un article de la série sur les backgrounds SVG consacré aux motifs maoris, à la fougère argentée, aux fractales et à l’ethnomathématique.</p>
</section>
</article>
<article class="post tag-outils tag-intermediaire tag-html tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-18">18 Oct 2015</time> on <a href="/tag/outils/">Outils</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/html/">HTML</a></span>
<h2 class="post-title"><a href="/html5-comprendre-les-polyfills-shivs-et-shims/">HTML5 : Comprendre les Polyfills, Shivs et Shims</a></h2>
</header>
<section class="post-excerpt">
<p>Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-bases-svg tag-intermediaire tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-17">17 Oct 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-groupes/">Les bases de SVG : Groupes</a></h2>
</header>
<section class="post-excerpt">
<p>Suite des bases de SVG par Dudley Storey : les groupes SVG ressemblent aux éléments div des pages web mais il existe des différences qu’il est important de bien comprendre.</p>
</section>
</article>
<article class="post tag-html tag-tous-niveaux tag-accessibilite tag-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-10-03">03 Oct 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/accessibilite/">Accessibilité</a>, <a href="/tag/svg/">SVG</a></span>
<h2 class="post-title"><a href="/bien-utiliser-lattribut-alt/">Bien utiliser l&#x27;attribut alt</a></h2>
</header>
<section class="post-excerpt">
<p>Le web est plus fort lorsqu'il est divers : plus il est accessible, meilleur il est. Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives tag-css">
<header class="post-header">
<span class="post-meta"><time datetime="2015-09-24">24 Sep 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a>, <a href="/tag/css/">CSS</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-8-images-css/">Introduction aux images responsives 8 : images CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Quand on parle d'images responsives, on ne pense généralement pas aux images CSS. Pourtant il existe des solutions spécifiques, dont les nouvelles media queries résolution et image-set(). Par Jason Grigsby.</p>
</section>
</article>
<article class="post tag-workflow tag-outils tag-preprocesseurs tag-intermediaire featured">
<header class="post-header">
<span class="post-meta"><time datetime="2015-09-20">20 Sep 2015</time> on <a href="/tag/workflow/">Workflow</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/preprocesseurs/">Preprocesseurs</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/gulp-pour-les-debutants/">Gulp pour les débutants</a></h2>
</header>
<section class="post-excerpt">
<p>Avec Grunt, Gulp est l'un des principaux task runners utilisés aujourd'hui. Le formidable Zell Liew présente de manière claire et complète cet outil de développement qui vous facilitera la vie.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css tag-layout tag-hash-ireaderinokun">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-16">16 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/comment-fonctionne-css-float/">Comment fonctionne CSS Float</a></h2>
</header>
<section class="post-excerpt">
<p>On n'utilise plus autant les float aujourd'hui, mais parfois c'est encore incontournable. Dans cette excellente intro (ou révision), Ire Aderinokun revisite float en présentant les règles qui régissent son comportement.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-intermediaire tag-blend-modes tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-15">15 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/blend-modes/">Blend Modes</a></span>
<h2 class="post-title"><a href="/image-revelee-au-grattage-avec-svg-et-blend-modes/">Image révélée au grattage avec SVG et Blend Modes</a></h2>
</header>
<section class="post-excerpt">
<p>Encore une association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. Dudley Storey anime une ligne multiple SVG et révèle un (joli) contenu en arrière-plan. Très malin!</p>
</section>
</article>
<article class="post tag-css tag-design tag-svg tag-intermediaire tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-10">10 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/diagrammes-circulaires-flexibles-avec-css-et-svg/">Diagrammes circulaires flexibles avec CSS et SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Lea Verou vient de publier un livre extraordinaire proposant des techniques CSS et SVG originales. Cet article est technique, mais l'approche, la méthode, la créativité sont une sacrée source d'inspiration!</p>
</section>
</article>
<article class="post tag-css tag-design tag-svg tag-blend-modes tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-09">09 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/blend-modes/">Blend Modes</a></span>
<h2 class="post-title"><a href="/creer-de-superbes-diagrammes-avec-svg-et-blend-modes/">Créer de superbes diagrammes avec SVG et Blend Modes</a></h2>
</header>
<section class="post-excerpt">
<p>Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!</p>
</section>
</article>
<article class="post tag-css tag-design tag-svg tag-blend-modes tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-09">09 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/backgrounds-pop-art-avec-svg-et-blend-modes/">Backgrounds Pop-Art avec SVG et Blend Modes</a></h2>
</header>
<section class="post-excerpt">
<p>Dudley Storey nous a appris à dessiner avec SVG. Ces lignes peuvent devenir complexes, on peut les mélanger à des images via Blend Modes pour créer des backgrounds “pop art”</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-09">09 Aug 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-7-type/">Introduction aux images responsives 7 : type</a></h2>
</header>
<section class="post-excerpt">
<p>Si vous déplorez la limitation des formats d'images, si vous voulez expérimenter sans abandonner vos utilisateurs, vous allez adorer l’attribut type. Un grand moment de détente avec Jason Grigsby!</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-09">09 Aug 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-6-element-picture/">Introduction aux images responsives 6 : élément picture</a></h2>
</header>
<section class="post-excerpt">
<p>Nous nous sommes concentrés jusqu'à présent sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-03">03 Aug 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/motifs-svg-japonais/">Motifs SVG japonais</a></h2>
</header>
<section class="post-excerpt">
<p>Pour le plaisir, Dudley Storey a réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais. Un approfondissement de la série sur SVG, mine de rien, ça devient sérieux!</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-accessibilite tag-blend-modes tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-02">02 Aug 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/accessibilite/">Accessibilité</a>, <a href="/tag/blend-modes/">Blend Modes</a></span>
<h2 class="post-title"><a href="/contraste-de-texte-automatique-avec-css-blend-modes/">Contraste de texte automatique avec CSS Blend Modes</a></h2>
</header>
<section class="post-excerpt">
<p>Les Blend Modes CSS permettent de créer des effets graphiques vraiment passionnants. Une des applications pratiques les plus utiles concerne le contraste automatique entre texte et background. Par Dudley Storey.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-02">02 Aug 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-5-dimensions/">Introduction aux images responsives 5 : dimensions</a></h2>
</header>
<section class="post-excerpt">
<p>Nous avons bien avancé dans notre feuilleton de l'été. Il est temps maintenant de faire connaissance avec le véritable héros de notre histoire, l’attribut `sizes`. Par Jason "Great" Grigsby.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-08-01">01 Aug 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-4-descripteurs-de-largeur-srcset/">Introduction aux images responsives, 4 : descripteurs de largeur srcset</a></h2>
</header>
<section class="post-excerpt">
<p>Les descripteurs de densité d’affichage sont parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles. C'est ici qu'interviennent les descripteurs de largeur! Par Jason Grisgsby.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-26">26 Jul 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-3-densite-daffichage-srcset/">Introduction aux images responsives, 3 : densité d&#x27;affichage srcset</a></h2>
</header>
<section class="post-excerpt">
<p>Depuis qu'Apple a lancé son affichage retina sur l'iPhone4, les designers doivent gérer le traitement de l'affichage en haute résolution. C'est ici que `srcset` et ses descripteurs entrent en scène.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-26">26 Jul 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-2-img-requise/">Introduction aux images responsives, 2 : img requise</a></h2>
</header>
<section class="post-excerpt">
<p>Suite de notre série de l'été consacrée aux images responsives. L'élément img est insuffisant, mais il est indispensable. Améliorons-le progessivement avec les nouveaux standards des images responsives. Par Jason Grigsby.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-26">26 Jul 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/introduction-aux-images-responsives-1-definitions-2/">Introduction aux images responsives, 1 : définitions</a></h2>
</header>
<section class="post-excerpt">
<p>Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide!</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-19">19 Jul 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/pourquoi-height-100-ne-marche-pas/">Pourquoi height: 100% ne marche pas</a></h2>
</header>
<section class="post-excerpt">
<p>Le blog que Maujor consacre à CSS depuis 2006 est bien connu au Brésil pour ses articles spécialisés ou de vulgarisation. Celui-ci fait le point sur le problème height:100%</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-19">19 Jul 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/backgrounds-svg-les-rayures/">Backgrounds SVG : les rayures</a></h2>
</header>
<section class="post-excerpt">
<p>Dans la continuité des articles sur les bases de SVG, Dudley Storey commence une série sur les motifs et les backgrounds. SVG permet de réaliser des choses impossibles en CSS.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-backgrounds-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-19">19 Jul 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a>, <a href="/tag/backgrounds-svg/">Backgrounds SVG</a></span>
<h2 class="post-title"><a href="/diagonales-et-motifs-svg-en-background/">Diagonales et motifs SVG en background</a></h2>
</header>
<section class="post-excerpt">
<p>Lorsque nous comprenons les bases des motifs SVG, c'est un monde de créativité qui s'ouvre. Après les bases de SVG, Dudley Storey nous montre comment créer des backgrounds en SVG.</p>
</section>
</article>
<article class="post tag-typographie tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-18">18 Jul 2015</time> on <a href="/tag/typographie/">Typographie</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/mecanique-des-polices-de-caracteres-2-2/">Mécanique des polices de caractères, 2</a></h2>
</header>
<section class="post-excerpt">
<p>Deuxième article de la brillante série de Tobias Frere-Jones. Après les questions de dimensions, Tobias aborde celles de l’épaisseur du trait et des graisses. Pour la plage, sujet incontournable.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-05">05 Jul 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/guide-de-flexbox-space-between-loublie/">Guide de Flexbox : space-between, l&#x27;oublié</a></h2>
</header>
<section class="post-excerpt">
<p>Tout comprendre sur space-between, le héros oublié de Flexbox. Noah Blon propose un cas pratique d'utilisation de cette valeur de justify-content dans Flexbox, super pratique pour vos mises en page.</p>
</section>
</article>
<article class="post tag-css tag-design tag-responsive-web-design tag-intermediaire tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-05">05 Jul 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/guide-de-flexbox-noubliez-pas-flex-shrink/">Guide de Flexbox : n&#x27;oubliez pas flex-shrink</a></h2>
</header>
<section class="post-excerpt">
<p>Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes.</p>
</section>
</article>
<article class="post tag-css tag-design tag-responsive-web-design tag-intermediaire tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-05">05 Jul 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/layout-sur-12-colonnes-avec-flexbox/">Layout sur 12 colonnes avec Flexbox</a></h2>
</header>
<section class="post-excerpt">
<p>La suite de la série de Landon Schropp sur Flexbox. Après avoir découvert les bases avec un simple dé, nous nous lançons dans les mises en page sur 12 colonnes.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-07-04">04 Jul 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-lignes-simples-et-multiples/">Les bases de SVG : Lignes simples et multiples</a></h2>
</header>
<section class="post-excerpt">
<p>Nous avons vu les formes de base de SVG, Dudley Storey présente maintenant les lignes, simples et multiples et.. ce n’est pas simple. Mais avec Dudley, tout devient clair.</p>
</section>
</article>
<article class="post tag-css tag-html tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-28">28 Jun 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/astuces-css-avec-checkbox/">Astuces CSS avec checkbox</a></h2>
</header>
<section class="post-excerpt">
<p>C'est incroyable ce qu'on peut faire avec un élément aussi modeste que les cases à cocher... du moins lorsqu'on s'appelle Will Boyd et qu'on a de la créativité à revendre!</p>
</section>
</article>
<article class="post tag-html tag-design tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-27">27 Jun 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/autocompletion-native-en-html5/">Autocomplétion native en HTML5</a></h2>
</header>
<section class="post-excerpt">
<p>Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-22">22 Jun 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/creer-un-logo-avec-sketch-3/">Créer un logo avec Sketch 3</a></h2>
</header>
<section class="post-excerpt">
<p>Dans ce tutoriel hyper-précis, Jeremy Osborn présente quelques-unes des fonctionnalités essentielles de Sketch et nous apprend à créer un logo à partir d'un croquis importé puis traduit en formes vectorielles.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-transformations tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-13">13 Jun 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a></span>
<h2 class="post-title"><a href="/background-revele-par-des-images-coulissantes-en-css/">Background révélé par des images coulissantes en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Encore un tutoriel sympa de Dudley Storey : créez des images coulissantes révélant un background, en pur CSS, grâce à clip-path et transform / translate. Un effet simple, construit astucieusement comme toujours!</p>
</section>
</article>
<article class="post tag-workflow tag-outils tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-07">07 Jun 2015</time> on <a href="/tag/workflow/">Workflow</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/le-path-vers-la-lumiere/">Le $PATH vers la lumière</a></h2>
</header>
<section class="post-excerpt">
<p>L'installation de logiciels sur notre machine est souvent un processus pénible et semé d'embûches. Mieux connaître $PATH facilitera notre vie et nous évitera quelques crises, grâce au Frenchie Olivier Lacan.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-06-07">07 Jun 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-polygones/">Les bases de SVG : Polygones</a></h2>
</header>
<section class="post-excerpt">
<p>Dudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes — dans une présentation claire et simple comme toujours.</p>
</section>
</article>
<article class="post tag-design tag-typographie tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-31">31 May 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/lajustement-optique/">L&#x27;ajustement optique</a></h2>
</header>
<section class="post-excerpt">
<p>Luke Jones le dit : les designers ne doivent pas compter sur les seuls logiciels pour faire le travail d'ajustement, mais également sur leurs yeux et leur instinct. Preuves à l'appui.</p>
</section>
</article>
<article class="post tag-design tag-intermediaire tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-30">30 May 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/sketch-3-loutil-ciseaux/">Sketch 3 : l&#x27;outil Scissors</a></h2>
</header>
<section class="post-excerpt">
<p>L'application de dessin vectoriel Sketch brille par sa simplicité. Peter Nowell présente l'outil "ciseaux", moins connu que d'autres, et fait un point très intéressant sur les formes et les lignes.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-26">26 May 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-rectangles-et-carres/">Les bases de SVG : Rectangles et Carrés</a></h2>
</header>
<section class="post-excerpt">
<p>Après les cercles, voici les rectangles ! Dudley Storey reconstitue un célèbre tableau de Mondrian et nous montre chemin faisant tout ce qu'il faut savoir pour créer des rectangles en SVG.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-intermediaire tag-bases-svg tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-25">25 May 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/bases-svg/">Bases SVG</a></span>
<h2 class="post-title"><a href="/les-bases-de-svg-cercles-et-ellipses/">Les bases de SVG : Cercles et Ellipses</a></h2>
</header>
<section class="post-excerpt">
<p>Même lorsqu’on utilise un logiciel de création graphique pour créer des SVG, la connaissance de la syntaxe permet de créer plus rapidement et efficacement des formes simples. Dudley Storey.</p>
</section>
</article>
<article class="post tag-css tag-design tag-responsive-web-design tag-intermediaire tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-24">24 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/flexbox-un-coup-de-des/">Flexbox, un coup de dés</a></h2>
</header>
<section class="post-excerpt">
<p>Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer Flexbox. Une méthode originale pour comprendre les fondamentaux de Flexbox et les mettre en pratique.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-flexbox tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-17">17 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/scroll-avec-background-revele-en-pur-css/">Scroll avec background révélé en pur CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Le défilement faisant apparaître des backgrounds différents est une technique populaire aujourd'hui, souvent réalisée via de fortes doses de JavaScript. Dudley Storey en propose une version moderne en pur CSS.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-gradients tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-16">16 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/gradients/">Dégradés</a></span>
<h2 class="post-title"><a href="/brood-x-le-principe-des-cigales-en-css/">Brood X : le principe des cigales en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Un texte étrange et poétique dans lequel Dudley Storey l'enchanteur nous entraîne dans l'univers fantastique de Magicicada Septemdecim. Ou comment les nombres premiers peuvent stimuler notre imaginaire et notre créativité.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-gradients">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-10">10 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/gradients/">Dégradés</a></span>
<h2 class="post-title"><a href="/comprendre-les-degrades-css/">Comprendre les dégradés linéaires CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Patrick Brosset a écrit sur Medium un article super clair pour vraiment comprendre les dégradés linéaires CSS et s'épargner des migraines. Évidemment, La Cascade se devait de traduire notre Frenchie.</p>
</section>
</article>
<article class="post tag-design tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-09">09 May 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/comprendre-clip-path/">Comprendre Clip Path</a></h2>
</header>
<section class="post-excerpt">
<p>La propriété Clip-Path de CSS est un super outil pour réaliser des effets de style. Dans cet article clair, Drew Minns présente son utilisation en détail, ainsi qu'un cas pratique.</p>
</section>
</article>
<article class="post tag-svg tag-intermediaire tag-accessibilite tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-08">08 May 2015</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/accessibilite/">Accessibilité</a></span>
<h2 class="post-title"><a href="/rendre-svg-accessible/">5 règles pour rendre SVG accessible</a></h2>
</header>
<section class="post-excerpt">
<p>SVG est formidable pour le design responsive, la performance et la qualité vectorielle, mais rendre SVG accessible demande encore du travail, simple avec ces 5 règles proposées par Dudley Storey.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-couleur tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-03">03 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/3-raisons-dutiliser-hsl-pour-vos-couleurs/">3 raisons d&#x27;utiliser HSL pour vos couleurs</a></h2>
</header>
<section class="post-excerpt">
<p>Maintenant que nous connaissons mieux HSL, Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie. Designer devient plus simple, plus facile et plus rapide.</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-couleur tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-05-03">03 May 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/utiliser-hsl-pour-vos-couleurs/">Utiliser HSL pour vos couleurs</a></h2>
</header>
<section class="post-excerpt">
<p>La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dans cet article en deux parties, Dudley Storey nous montre tout son intérêt.</p>
</section>
</article>
<article class="post tag-css tag-html tag-javascript tag-intermediaire tag-video tag-blend-modes tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-04-26">26 Apr 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/video/">Video</a>, <a href="/tag/blend-modes/">Blend Modes</a></span>
<h2 class="post-title"><a href="/effets-video-html5-avec-css-blend-modes/">Effets vidéo HTML5 avec CSS Blend Modes</a></h2>
</header>
<section class="post-excerpt">
<p>Les effets vidéos sont habituellement appliqués au montage et ne peuvent être manipulés une fois la vidéo exportée. Dudley Storey montre comment utiliser les nouveaux effets CSS dans vos vidéos.</p>
</section>
</article>
<article class="post tag-css tag-responsive-web-design tag-intermediaire tag-animations tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-04-25">25 Apr 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/un-carrousel-responsif-en-pur-css/">Un carrousel responsif en pur CSS</a></h2>
</header>
<section class="post-excerpt">
<p>De plus en plus les développeurs web ont besoin de solutions responsives et performantes. Dudley Storey propose ici un carrousel responsive en pur CSS qui répond parfaitement à ces objectifs.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2015-04-25">25 Apr 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/transformer-un-layout-avec-flexbox/">Transformer un layout avec Flexbox</a></h2>
</header>
<section class="post-excerpt">
<p>Pour comprendre flexbox en profondeur, Zoe Gillenwater transforme un layout préexistant créé avec table. Grâce aux media queries et aux possibilités d'ordonnancement de flexbox, ce layout devient encore plus responsif.</p>
</section>
</article>
<article class="post tag-design tag-tous-niveaux tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2015-04-18">18 Apr 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/11-astuces-de-prototypage-avec-sketch3/">11 Astuces de prototypage avec Sketch</a></h2>
</header>
<section class="post-excerpt">
<p>Si vous êtes designer, vous connaissez forcément Sketch, une application Mac idéale pour vos travaux de maquettage. Andy Orsow propose quelques astuces pour vous rendre la vie (encore) plus facile.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-03-29">29 Mar 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/combiner-css-clip-path-et-shapes/">Combiner CSS clip-path et Shapes</a></h2>
</header>
<section class="post-excerpt">
<p>Comment sortir du modèle de boîte et ouvrir de nouvelles possibilités créatives pour nos mises en page ? Dudley Storey se penche sur clip-path et Shapes et combine les deux modules.</p>
</section>
</article>
<article class="post tag-design tag-contenu tag-outils tag-tous-niveaux tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-03-28">28 Mar 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/contenu/">Contenu</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/appropriation-culturelle-utiliser-les-collections-des-musees/">Appropriation culturelle : utiliser les collections des musées</a></h2>
</header>
<section class="post-excerpt">
<p>Les musées exposent de plus en plus leurs collections en ligne et en permettent souvent l'utilisation gratuite. Dudley Storey nous invite à une promenade à travers quelques belles collections internationales.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-03-24">24 Mar 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/tout-sur-les-sprites-css/">Tout sur les sprites CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Les sprites combinent plusieurs images dans un fichier unique, permettant d’améliorer la performance de votre site. Ils sont largement utilisés dans les animations complexes. Belle introduction par Chris Coyier.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-intermediaire tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-03-21">21 Mar 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/animer-avec-les-sprites-svg/">Animer avec les sprites SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Sarah Drasner montre ici comment utiliser les sprites SVG pour créer des animations complexes et responsives. De superbes exemples illustrent d'étonnantes possibilités d'animation, avec un code qui reste relativement simple.</p>
</section>
</article>
<article class="post tag-design tag-typographie tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2015-03-08">08 Mar 2015</time> on <a href="/tag/design/">Design</a>, <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/typographie-dadvertising-age/">Typographie du site Advertising Age</a></h2>
</header>
<section class="post-excerpt">
<p>Jeremiah Shoaf, responsable de l'indispensable site Typewolf se lance dans une nouvelle série d'articles où il décortique un site du point de vue de sa typographie. Clair, pédagogique et passionnant.</p>
</section>
</article>
<article class="post tag-html tag-intermediaire tag-metadata tag-audio tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-22">22 Feb 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/metadata/">Metadata</a>, <a href="/tag/audio/">Audio</a></span>
<h2 class="post-title"><a href="/creer-un-player-audio-en-html5-3-microdonnees/">Créer un player audio en HTML5, 3 : microdonnées</a></h2>
</header>
<section class="post-excerpt">
<p>Notre prototype de player audio HTML5 est encore assez brut. Nous allons lui donner son look définitif et ajouter quelques microdonnées pour aider les moteurs de recherche. Par Dudley Storey.</p>
</section>
</article>
<article class="post tag-html tag-design tag-javascript tag-intermediaire tag-audio tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-19">19 Feb 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/audio/">Audio</a></span>
<h2 class="post-title"><a href="/creer-un-player-audio-en-html5-2e-partie-le-prototype/">Créer un player audio en HTML5, 2 : le prototype</a></h2>
</header>
<section class="post-excerpt">
<p>Bon allez, on se lance dans la création de notre player audio personnalisé ! Dudley Storey utilise une approche par petits pas — ou plutôt par petits tests — pour construire un prototype.</p>
</section>
</article>
<article class="post tag-html tag-design tag-intermediaire tag-audio tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-18">18 Feb 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/audio/">Audio</a></span>
<h2 class="post-title"><a href="/creer-un-player-audio-en-html5-1-fonctionnalites-et-design/">Créer un player audio en HTML5, 1 : fonctionnalités et design</a></h2>
</header>
<section class="post-excerpt">
<p>Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.</p>
</section>
</article>
<article class="post tag-typographie tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-14">14 Feb 2015</time> on <a href="/tag/typographie/">Typographie</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/fonctionnement-des-polices-de-caracteres-1/">Mécanique des polices de caractères, 1</a></h2>
</header>
<section class="post-excerpt">
<p>Notre esprit veut dessiner une forme, mais nos yeux veulent en voir une autre. Cette série d'articles de Tobias Frere-Jones explore le travail en coulisses permettant aux polices d'être fonctionnelles.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-14">14 Feb 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/un-surlignage-simple-en-css/">Un surlignage simple en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Surligner les rangées d'un tableau en CSS est très facile, mais les colonnes ? Les pseudo-éléments sont mis à contribution dans ce tutoriel court, facile et astucieux de l'indispensable Chris Coyier.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-13">13 Feb 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/animer-des-pseudo-elements/">Animer des pseudo-éléments</a></h2>
</header>
<section class="post-excerpt">
<p>Les pseudo-éléments nous permettent d'ajouter à nos pages du contenu supplémentaire, et ils peuvent être animés ! Donovan Hutchinson utilise ici un pseudo-élément pour ajouter une touche d'élégance à un bouton.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-07">07 Feb 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/leffet-gluant-avec-svg/">L&#x27;effet gluant avec SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Lucas Bebber, développeur brésilien hyper créatif, propose son effet Gooey, qui a fait le buzz dernièrement. Outre une dose d'inspiration, on y trouvera de bonnes bases sur les filtres SVG.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-07">07 Feb 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/shape-blobbing-en-css/">Shape blobbing en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Le shape blobbing c'est cet effet d'aspiration d'une goutte par une autre, réalisable en CSS à partir de filtres pour le flou et le contraste. Tutoriel clair de Chris Coyier.</p>
</section>
</article>
<article class="post tag-svg tag-javascript tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-07">07 Feb 2015</time> on <a href="/tag/svg/">SVG</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/le-morphing-en-svg/">Le morphing en SVG</a></h2>
</header>
<section class="post-excerpt">
<p>L'animation d'un SVG avec CSS est facile, mais certaines propriétés SVG ne sont pas animables avec CSS. Chris Coyier montre ici comment réaliser simplement un morphing avec SMIL et Javascript.</p>
</section>
</article>
<article class="post tag-web-semantique tag-intermediaire tag-metadata">
<header class="post-header">
<span class="post-meta"><time datetime="2015-02-01">01 Feb 2015</time> on <a href="/tag/web-semantique/">Web sémantique</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/metadata/">Metadata</a></span>
<h2 class="post-title"><a href="/twitter-et-la-recherche-semantique/">Twitter et la recherche sémantique</a></h2>
</header>
<section class="post-excerpt">
<p>Une présence robuste et construite avec soin sur Twitter peut aider de manière significative votre visibilité dans la recherche sémantique. Explications claires et conseils experts du grand spécialiste David Amerland.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2015-01-27">27 Jan 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/des-selecteurs-virtuels-en-css3/">Des sélecteurs virtuels en CSS3</a></h2>
</header>
<section class="post-excerpt">
<p>En combinant les sélecteurs CSS3 :nth-child et :nth-last-child, Matt Mastracci invente des sélecteurs virtuels et s'amuse à créer une galerie d'images redimensionnables qui fonctionne sans JavaScript. Très malin, complètement magique.</p>
</section>
</article>
<article class="post tag-css tag-html tag-javascript tag-intermediaire tag-amelioration-progressive">
<header class="post-header">
<span class="post-meta"><time datetime="2015-01-15">15 Jan 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/amelioration-progressive/">Amélioration Progressive</a></span>
<h2 class="post-title"><a href="/amelioration-responsive/">Amélioration responsive</a></h2>
</header>
<section class="post-excerpt">
<p>L'amélioration progressive n'est pas une technologie, c'est une façon de penser. Jeremy Keith montre ici comment cette idée est non seulement respectueuse des utilisateurs mais également incroyablement libératrice de créativité.</p>
</section>
</article>
<article class="post tag-html tag-intermediaire tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-01-13">13 Jan 2015</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/quest-ce-quun-element-remplace/">Qu&#x27;est-ce qu&#x27;un élément remplacé ?</a></h2>
</header>
<section class="post-excerpt">
<p>Avez-vous déjà entendu parler des éléments HTML remplacés ? Vous les utilisez pourtant tous les jours sans le savoir, et connaître leur nature peut vous éviter quelques soucis. Par Dudley Storey.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2015-01-13">13 Jan 2015</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/utiliser-css-object-fit/">Utiliser CSS object-fit</a></h2>
</header>
<section class="post-excerpt">
<p>La propriété object-fit de CSS offre des options de redimensionnement et de présentation des images qui faciliteront la vie des designers. Belle présentation pleine de robots par l'ami Dudley Storey.</p>
</section>
</article>
<article class="post tag-ux tag-animations tag-ui">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-23">23 Dec 2014</time> on <a href="/tag/ux/">UX</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/ui/">UI</a></span>
<h2 class="post-title"><a href="/5-facons-danimer-de-maniere-responsable/">5 façons d&#x27;animer de manière responsable</a></h2>
</header>
<section class="post-excerpt">
<p>Nous vivons une époque formidable de l'animation web. Mais tout à notre excitation, nous oublions parfois de nous poser la question du pourquoi ? Quelques rappels salutaires de Rachel "Jurassic" Nabors.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-18">18 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/masquer-et-detourer-en-css/">Masquer et détourer en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Il est devenu compliqué de s'y retrouver dans le paysage changeant du clipping et du masking. Évolution des syntaxes, technologies, support... Chris Coyier fait le point, explications et illustrations claires.</p>
</section>
</article>
<article class="post tag-css tag-html tag-design tag-svg tag-avance tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-17">17 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/avance/">Avancé</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/guide-des-animations-svg/">Guide des animations SVG (SMIL)</a></h2>
</header>
<section class="post-excerpt">
<p>Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.</p>
</section>
</article>
<article class="post tag-css tag-design tag-debutant tag-transformations tag-animations tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-16">16 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/css-animation-une-introduction/">CSS animation, une introduction</a></h2>
</header>
<section class="post-excerpt">
<p>Une présentation claire et vivante des animations CSS par Rachel Cope, avec exemples de code et présentation live sur CodePen. Un bon article pour apprendre ou pour réviser ses classiques.</p>
</section>
</article>
<article class="post tag-css tag-responsive-web-design tag-intermediaire tag-transformations tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-15">15 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a></span>
<h2 class="post-title"><a href="/stores-venitiens-3d-en-css/">Stores vénitiens 3D en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Les variations sur cette transition ont longtemps été un pilier de jQuery. Toujours partant pour de nouveaux défis, Dudley Storey a imaginé une superbe solution 3D responsive en pur CSS.</p>
</section>
</article>
<article class="post tag-css tag-typographie tag-tous-niveaux tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-14">14 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/css-aider-la-veuve-et-lorphelin/">CSS, aider la veuve et l&#x27;orphelin</a></h2>
</header>
<section class="post-excerpt">
<p>CSS nous permet de contrôler facilement la première ligne d'un texte, mais sa capacité à contrôler la dernière ligne reste limitée. Un rappel sur widows et orphans par Dudley Storey.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-10">10 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/toi-seul-utiliser-only-child-de-css/">Toi seul : utiliser only-child de CSS</a></h2>
</header>
<section class="post-excerpt">
<p>On pourrait se demander comment l'utiliser, mais les cas d'utilisation sont nombreux. Comme souvent avec les pseudo-classes, il nous permet d'écrire un code concis et adapté au contenu généré dynamiquement.</p>
</section>
</article>
<article class="post tag-css tag-html tag-javascript tag-intermediaire tag-video tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-10">10 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/video/">Video</a></span>
<h2 class="post-title"><a href="/video-en-background/">Créer un background vidéo fullscreen avec HTML5</a></h2>
</header>
<section class="post-excerpt">
<p>Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.</p>
</section>
</article>
<article class="post tag-css tag-responsive-web-design tag-svg tag-intermediaire tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-09">09 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/rendre-svg-responsif/">Rendre un SVG responsif</a></h2>
</header>
<section class="post-excerpt">
<p>Infiniment redimensionnable, le format SVG n'en est pas moins étonnamment difficile à rendre responsif. Dudley Storey montre comment y parvenir, avec un SVG image ou en ligne. Trop fort Dudley.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-couleur">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-02">02 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/un-css-concis-grace-a-currentcolor/">Un CSS concis avec currentColor</a></h2>
</header>
<section class="post-excerpt">
<p>Osvalda Valutis s'est intéressé de près à currentColor et présente ici quelques cas concrets d'utilisation étonnants illustrant la façon dont currentColor nous permet d'écrire un CSS plus concis et cohérent.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-couleur tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-12-02">02 Dec 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/la-premiere-variable-css-currentcolor/">La première variable CSS : currentColor</a></h2>
</header>
<section class="post-excerpt">
<p>En attendant l'arrivée des variables CSS, Dudley Storey nous rappelle l'existence de currentColor et nous en montre quelques applications qui peuvent nous aider à renforcer la cohérence de notre design.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-29">29 Nov 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/empty-une-pseudo-classe-pas-si-vide/">:empty, une pseudo-classe pas si vide</a></h2>
</header>
<section class="post-excerpt">
<p>La pseudo-classe :empty est relativement peu connue. Dudley Storey montre ici comment l'utiliser, depuis l'application d'un style CSS aux tableaux et aux navigations dynamiques jusqu'au nettoyage de votre balisage HTML.</p>
</section>
</article>
<article class="post tag-html tag-debutant tag-hash-dudleystorey">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-29">29 Nov 2014</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/les-raccourcis-html5/">Les raccourcis HTML5</a></h2>
</header>
<section class="post-excerpt">
<p>HTML 5 est moins strict que XHTML en ce qui concerne le respect des règles de balisage et autorise un certain nombre de raccourcis que nous présente rapidement Dudley Storey.</p>
</section>
</article>
<article class="post tag-web-semantique tag-intermediaire tag-metadata">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-20">20 Nov 2014</time> on <a href="/tag/web-semantique/">Web sémantique</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/metadata/">Metadata</a></span>
<h2 class="post-title"><a href="/quest-ce-que-la-recherche-semantique/">Qu&#x27;est-ce que la recherche sémantique ?</a></h2>
</header>
<section class="post-excerpt">
<p>Spécialiste reconnu du web sémantique, David Amerland répond ici aux dix questions les plus courantes sur la recherche sémantique. Utilisateurs du web ou producteurs de contenu, nous sommes tous concernés.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-19">19 Nov 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/svg-style-et-anime-avec-css/">SVG, style et animation avec CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Les articles de Sara Soueidan sont devenus une référence incontournable en matière de SVG. Sara passe ici en revue les étapes de l'application de styles et d'animation CSS aux SVG.</p>
</section>
</article>
<article class="post tag-css tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-07">07 Nov 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/la-pseudo-classe-de-negation/">La pseudo-classe de négation</a></h2>
</header>
<section class="post-excerpt">
<p>Parmi les pseudo-classes, il en est une qu'on oublie souvent, c'est :not(). La pseudo-classe de négation peut pourtant s'avérer très utile dans bien des situations, comme l'explique ici Shay Howe.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-avance tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-11-01">01 Nov 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/avance/">Avancé</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/portal-css/">Portal CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Vous n'avez pas nécessairement besoin de JavaScript pour créer des projets 3D impressionnants. Ce projet de Donovan Hutchinson est une excellente introduction aux transformations et animations CSS, ludique et claire.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-28">28 Oct 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/fixer-une-div/">Fixer une div, guide complet</a></h2>
</header>
<section class="post-excerpt">
<p>Fixer un bloc div est assez simple, Steve Pear nous en rappelle les bases et nous montre quelques petites choses moins évidentes qu'on peut faire avec les div fixes. Cool.</p>
</section>
</article>
<article class="post tag-design tag-tous-niveaux tag-mens-sana">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-25">25 Oct 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/mens-sana/">Mens Sana</a></span>
<h2 class="post-title"><a href="/faire-taire-votre-critique-interne/">Dompter son critique intérieur</a></h2>
</header>
<section class="post-excerpt">
<p>Vous connaissez le syndrome de l'imposteur n'est-ce pas ? Ce n'est qu'une des nombreuses manifestations de votre critique intérieur. Denise Jacobs nous présente ce vilain petit monstre, parfois utile malgré tout.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-20">20 Oct 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/initiation-a-sass-3/">Initiation à Sass, 3 : mixins et placeholders</a></h2>
</header>
<section class="post-excerpt">
<p>Laura Kalbag conclut son introduction à Sass avec les mixins et les placeholders, et la présentation de bibliothèques de mixins comme Compass et Bourbon. Maintenant, c'est à vous de jouer</p>
</section>
</article>
<article class="post tag-tous-niveaux tag-mens-sana">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-19">19 Oct 2014</time> on <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/mens-sana/">Mens Sana</a></span>
<h2 class="post-title"><a href="/burnout/">Burnout</a></h2>
</header>
<section class="post-excerpt">
<p>Le burnout, ou syndrome d'épuisement professionnel, touche beaucoup le secteur du développement web. Scott Boms l'a vécu personnellement, il en décrit les symptômes et surtout comment l'éviter ou s'en sortir.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-18">18 Oct 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/initiation-a-sass-2/">Initiation à Sass, 2 : rythme vertical</a></h2>
</header>
<section class="post-excerpt">
<p>La première partie de cette série présentait les bases de la syntaxe Sass. Passons maintenant aux variables et à l'imbrication des sélecteurs, et créons un rythme vertical dans notre page</p>
</section>
</article>
<article class="post tag-sass tag-design tag-responsive-web-design tag-susy tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-12">12 Oct 2014</time> on <a href="/tag/sass/">Sass</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/susy/">Susy</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/decouvrir-susy/">Découvrir Susy</a></h2>
</header>
<section class="post-excerpt">
<p>Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew</p>
</section>
</article>
<article class="post tag-css tag-sass tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-07">07 Oct 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/initiation-a-sass-1/">Initiation à Sass, 1</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cette série de 3 articles, Laura Kalbag présente Sass en nous proposant de la suivre progressivement dans son travail de création d'un site. Sass va vous changer la vie.</p>
</section>
</article>
<article class="post tag-design tag-intermediaire tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2014-10-05">05 Oct 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/sketch-3-maitriser-les-courbes-de-bezier/">Sketch 3 : Maîtriser les courbes de Bézier</a></h2>
</header>
<section class="post-excerpt">
<p>L'utilisation des courbes de Bézier est souvent compliquée. Peter Nowell nous introduit au fonctionnement et à la pratique des courbes de Bézier avec Sketch, dans ce tutoriel clair et détaillé.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-09-29">29 Sep 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/limbrication-des-selecteurs-dans-sass/">L&#x27;imbrication des sélecteurs dans Sass</a></h2>
</header>
<section class="post-excerpt">
<p>L'imbrication de sélecteurs est une fonctionnalité des préprocesseurs CSS d'utilisation courante. Tellement courante qu'elle peut devenir problématique. Hugo Giraudel, notre grand spécialiste de Sass, défend une position originale et radicale.</p>
</section>
</article>
<article class="post tag-intermediaire tag-css tag-workflow">
<header class="post-header">
<span class="post-meta"><time datetime="2014-09-28">28 Sep 2014</time> on <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/css/">CSS</a>, <a href="/tag/workflow/">Workflow</a></span>
<h2 class="post-title"><a href="/auditer-votre-css/">Auditer votre CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site. Par Susan Robertson.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2014-09-12">12 Sep 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/creer-une-interface-de-login-avec-sketch/">Créer une interface de Login avec Sketch</a></h2>
</header>
<section class="post-excerpt">
<p>Sketch est une excellente application pour le design d'interface. Armando Sotoca nous conduit pas à pas dans la réalisation du design d'une interface de connexion, une excellente introduction à Sketch3.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-couleur">
<header class="post-header">
<span class="post-meta"><time datetime="2014-09-09">09 Sep 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/theorie-des-couleurs-3-creer-votre-palette/">Théorie des couleurs, 3 : Créer votre palette</a></h2>
</header>
<section class="post-excerpt">
<p>Troisième et dernier article de notre série sur la théorie des couleurs. Nous connaissons la signification et la terminologie des couleurs, passons maintenant à la création des schémas de couleurs.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-09-06">06 Sep 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/centrer-en-css-un-guide-complet/">Centrer en CSS, un guide complet</a></h2>
</header>
<section class="post-excerpt">
<p>Le centrage en CSS est souvent un véritable casse-tête, car il existe plusieurs techniques différentes selon les cas d'utilisation. Chris Coyier les a listées et nous donne toutes les solutions.</p>
</section>
</article>
<article class="post tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-30">30 Jul 2014</time> on <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/images-responsives-cas-dutilisation-et-snippets/">Images responsives : cas d&#x27;utilisation et snippets</a></h2>
</header>
<section class="post-excerpt">
<p>Cet article détaillé d'Andreas Boven complète parfaitement l'introduction aux images responsives déjà publiée ici, en présentant des cas concrets d'utilisation et le code HTML correspondant. Très complet, technique mais clair!</p>
</section>
</article>
<article class="post tag-css tag-html tag-workflow tag-debutant tag-emmet">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-28">28 Jul 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/workflow/">Workflow</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/emmet/">Emmet</a></span>
<h2 class="post-title"><a href="/une-liste-de-raccourcis-emmet/">Raccourcis et astuces Emmet</a></h2>
</header>
<section class="post-excerpt">
<p>Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.</p>
</section>
</article>
<article class="post tag-css tag-tous-niveaux tag-bases-css tag-filtres-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-26">26 Jul 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/filtres-css/">Filtres CSS</a></span>
<h2 class="post-title"><a href="/les-filtres-css/">Les filtres CSS</a></h2>
</header>
<section class="post-excerpt">
<p>En été, il n'y a pas que les filtres solaires, c'est aussi le moment idéal pour se pencher sur une propriété qui peut être utile... ou pas. Par Paula Borowska.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-transformations tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-26">26 Jul 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/transformations/">Transformations</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/creer-des-spheres-en-css/">Créer des sphères en CSS</a></h2>
</header>
<section class="post-excerpt">
<p>C'est l'été et nous avons de plus en plus l'impression d'être les seuls à travailler... Mais nous aussi nous pouvons faire des bulles, grâce à Donovan Hutchinson, maître des sphères.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-intermediaire tag-canvas tag-blend-modes">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-18">18 Jul 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/canvas/">Canvas</a>, <a href="/tag/blend-modes/">Blend Modes</a></span>
<h2 class="post-title"><a href="/css-blend-modes/">CSS Blend Modes, un petit guide</a></h2>
</header>
<section class="post-excerpt">
<p>Nous avons déjà découvert CSS Blend Modes avec l'introduction de Chris Coyier, voici un article plus fouillé de Shwetank Dixit pour approfondir notre connaissance de cette nouvelle fonctionnalité de CSS.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-couleur">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-17">17 Jul 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/theorie-des-couleurs-2-concepts-et-terminologie/">Théorie des couleurs, 2 : Concepts et terminologie</a></h2>
</header>
<section class="post-excerpt">
<p>Suite de notre mini-feuilleton: pour utiliser efficacement les couleurs, il est utile de connaître quelques concepts et la terminologie des couleurs. L'article de Cameron Chapman est illustré de nombreux exemples.</p>
</section>
</article>
<article class="post tag-design tag-svg tag-debutant tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-13">13 Jul 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/sketch-et-les-vecteurs/">Sketch et les vecteurs</a></h2>
</header>
<section class="post-excerpt">
<p>Sketch3 est un outil merveilleux, il brille tout particulièrement dans le domaine des formes vectorielles. Dans ce tutoriel bien fait, Peter Nowell établit les bases, puis nous apprend quelques astuces.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-08">08 Jul 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/sass-et-interpolation/">Sass et interpolation</a></h2>
</header>
<section class="post-excerpt">
<p>Tout ce que vous avez toujours voulu savoir sur l'interpolation dans Sass, expliqué par Hugo Giraudel. Une bonne introduction toute simple et les cas d'utilisation principaux, pour interpoler avec plaisir.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-couleur">
<header class="post-header">
<span class="post-meta"><time datetime="2014-07-03">03 Jul 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/couleur/">Couleur</a></span>
<h2 class="post-title"><a href="/theorie-des-couleurs-1-signification-de-la-couleur/">Théorie des couleurs, 1 : Signification de la couleur</a></h2>
</header>
<section class="post-excerpt">
<p>C'est la saison, voici le feuilleton de l'été. Une série de trois articles sur la théorie des couleurs: signification des couleurs, concepts, application, le tout bien illustré. Par Cameron Chapman.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-19">19 Jun 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/creer-une-icone-flat-avec-sketch/">Créer une icône flat avec Sketch</a></h2>
</header>
<section class="post-excerpt">
<p>Le succès du précédent tutoriel Sketch 3 imposait une suite. Dans ce nouveau tutoriel très clair, Abhijeet Wankhade réalise une icône simple, permettant de montrer quelques fonctionnalités essentielles de Sketch.</p>
</section>
</article>
<article class="post tag-css tag-html tag-design tag-javascript tag-tous-niveaux tag-amelioration-progressive">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-14">14 Jun 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/amelioration-progressive/">Amélioration Progressive</a></span>
<h2 class="post-title"><a href="/continuum/">Continuum</a></h2>
</header>
<section class="post-excerpt">
<p>Jeremy Keith, dans la continuité du célèbre Tao du Webdesign, défend l'idée du web comme un continuum - un espace ouvert à l'expérimentation, soucieux d'accessibilité au contenu. Engagé, constructif, définitif.</p>
</section>
</article>
<article class="post tag-css tag-html tag-design tag-svg tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-10">10 Jun 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/animer-un-degrade-svg/">Animer un dégradé SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation&nbsp;! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.</p>
</section>
</article>
<article class="post tag-design tag-debutant tag-sketch">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-09">09 Jun 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/sketch/">Sketch</a></span>
<h2 class="post-title"><a href="/sketch-tutoriel_01/">Sketch, tutoriel 01</a></h2>
</header>
<section class="post-excerpt">
<p>Sketch 3, pour Mac, est une alternative sérieuse à Photoshop et Illustrator. Sébastien Gabriel, Frenchie designer chez Google propose dans ce tutoriel hyper-détaillé de passer en revue ses caractérisques principales.</p>
</section>
</article>
<article class="post tag-css tag-html tag-svg tag-intermediaire tag-gradients">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-06">06 Jun 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/gradients/">Dégradés</a></span>
<h2 class="post-title"><a href="/les-degrades-svg/">Les dégradés SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Dégradés CSS ou dégradés SVG&nbsp;? C'est une longue discussion, les deux ont leurs avantages, leurs utilisations particulières. Joni Trythall présente les dégradés SVG, en se concentrant sur leur utilisation</p>
</section>
</article>
<article class="post tag-css tag-blend-modes tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-06-03">03 Jun 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/blend-modes/">Blend Modes</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/css-blend-modes-introduction/">CSS Blend Modes, une introduction</a></h2>
</header>
<section class="post-excerpt">
<p>De superbes effets Photoshop que nous admirons sur certains sites statiques peuvent aujourd'hui être réalisés facilement avec CSS3 Blend Modes. Chris Coyier fait le tour du sujet en amateur créatif.</p>
</section>
</article>
<article class="post tag-css tag-html tag-svg tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-31">31 May 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/ligne-animee-en-svg/">Ligne animée en SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Chris Coyier s'est intéressé aux animations SVG qu'on trouve un peu partout et il a voulu comprendre la base de cette technique. Il nous livre ses observations, c'est évidemment passionnant.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-31">31 May 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/un-composant-sass-en-10-minutes/">Un composant Sass en 10 minutes</a></h2>
</header>
<section class="post-excerpt">
<p>Dans ce bref article, Hugo Giraudel crée un composant Sass très simple et nous donne quelques bons principes de base pour construire nos propres composants. Limpide et passionnant comme toujours.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-30">30 May 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/subtilites-de-css3-transitions/">Subtilités de CSS3 Transitions</a></h2>
</header>
<section class="post-excerpt">
<p>On aime bien Louis Lazaris à la Cascade. Dans cet article, Louis montre quelques utilisations inattendues des transitions CSS3 et un piège à éviter. Animez vos pages en pur CSS.</p>
</section>
</article>
<article class="post tag-workflow tag-outils tag-tous-niveaux tag-preprocesseurs">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-26">26 May 2014</time> on <a href="/tag/workflow/">Workflow</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/preprocesseurs/">Preprocesseurs</a></span>
<h2 class="post-title"><a href="/codekit-2-0/">CodeKit 2.0</a></h2>
</header>
<section class="post-excerpt">
<p>D'accord, il y a Grunt, mais pour la plupart des projets, les applications comme CodeKit et autres sont souvent plus appropriées, simples et efficaces. Bryan Jones présente Codekit, pour Mac.</p>
</section>
</article>
<article class="post tag-html tag-responsive-web-design tag-intermediaire tag-images-responsives">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-17">17 May 2014</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/images-responsives/">Images Responsives</a></span>
<h2 class="post-title"><a href="/images-responsives-picture-et-srcset/">Images responsives : picture et srcset</a></h2>
</header>
<section class="post-excerpt">
<p>Charger les images en fonction de la résolution d'écran de l'utilisateur, avoir des images responsives, faire de la direction artistique... la révolution est en marche ! Belle présentation par Eric Portis.</p>
</section>
</article>
<article class="post tag-design tag-typographie tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-11">11 May 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/typographie/">Typographie</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/creer-un-guide-de-style/">Créer un guide de style</a></h2>
</header>
<section class="post-excerpt">
<p>Les guides de style sont utilisés par les grandes entreprises pour assurer la cohérence de leur site et gagner en efficacité, mais tout designer exigeant peut s'inspirer de cette démarche.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2014-05-09">09 May 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/css-shapes-une-introduction/">CSS Shapes, une introduction</a></h2>
</header>
<section class="post-excerpt">
<p>L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-26">26 Apr 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/api-communication-en-temps-reel/">API, communication en temps réel</a></h2>
</header>
<section class="post-excerpt">
<p>Le serveur ne peut pas faire de requêtes, mais il existe des moyens de savoir où en est notre pizza ! Brian Cooksey nous dit tout sur l'intégration et les webhooks.</p>
</section>
</article>
<article class="post tag-design tag-workflow tag-outils tag-debutant">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-26">26 Apr 2014</time> on <a href="/tag/design/">Design</a>, <a href="/tag/workflow/">Workflow</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/la-console-une-introduction/">La console, une introduction</a></h2>
</header>
<section class="post-excerpt">
<p>Ah, la console ! Terrain de jeu pour certains, écran terrifiant pour d'autres, il devient chaque jour plus indispensable d'en connaître au moins les rudiments. Par John Long, bienfaiteur des designers.</p>
</section>
</article>
<article class="post tag-css tag-svg tag-intermediaire tag-animations">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-23">23 Apr 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/animations/">Animations</a></span>
<h2 class="post-title"><a href="/animer-un-svg-avec-css/">Animer un SVG avec CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-13">13 Apr 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/concevoir-une-api/">Concevoir une API</a></h2>
</header>
<section class="post-excerpt">
<p>On passe aux choses sérieuses… Dans cet article, nous allons parler des composants d'une API en en créant une nous-mêmes. Par l'ami Brian Cooksey, le roi de la pizza pepperoni.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-13">13 Apr 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/combinateurs-et-pseudo-classes-css/">Combinateurs et pseudo-classes CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Nous poursuivons notre introduction aux basiques de CSS avec un article de Steven Bradley sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous aidera à mieux coder.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-06">06 Apr 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/termes-et-definitions-css/">Termes et définitions CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Voici une liste rapide des termes CSS communément employés, un aide-mémoire pratique, une révision utile, et pour ceux qui commencent à apprendre CSS une bonne façon de baliser le chemin</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-05">05 Apr 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/les-pseudo-elements-css-before-et-after/">Pseudo-éléments :before &amp; :after</a></h2>
</header>
<section class="post-excerpt">
<p>Cet article de Louis Lazaris s'adresse à ceux qui ont découvert avec émerveillement les trucs sympas qu'on peut faire avec les pseudo-éléments et veulent mieux connaître cette technique très utilisée.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-03">03 Apr 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/api-authentification/">API, authentification</a></h2>
</header>
<section class="post-excerpt">
<p>Arriver à se parler, c'est bien, il reste à répondre à une question existentielle : comment le serveur sait-il que le client est bien celui qu'il prétend être ? Par Brian Cooksey</p>
</section>
</article>
<article class="post tag-css tag-design tag-intermediaire tag-layout">
<header class="post-header">
<span class="post-meta"><time datetime="2014-04-02">02 Apr 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a></span>
<h2 class="post-title"><a href="/des-colonnes-de-meme-hauteur/">Des colonnes de même hauteur</a></h2>
</header>
<section class="post-excerpt">
<p>Question récurrente : comment faire pour avoir des colonnes de même hauteur dans notre mise en page multi-colonnes ? Kezz Bracey propose une solution astucieuse pour résoudre ce problème vieux comme CSS.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-30">30 Mar 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/api-formats-de-donnees/">API, formats de données</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article, explorons avec Brian Cooksey les données que nous fournissent les API, leurs formats et la façon dont HTTP rend tout cela possible. De plus en plus passionnant.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-30">30 Mar 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/api-les-protocoles/">API, les protocoles</a></h2>
</header>
<section class="post-excerpt">
<p>Dans l'article précédent, Brian Cooksey nous a fait connaître les deux côtés impliqués dans une API, le serveur et le client. Regardons maintenant de quelle manière ils communiquent entre eux.</p>
</section>
</article>
<article class="post tag-api tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-30">30 Mar 2014</time> on <a href="/tag/api/">API</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/api-une-introduction/">API, une introduction</a></h2>
</header>
<section class="post-excerpt">
<p>Vous êtes-vous déjà demandé comment Facebook affiche automatiquement vos photos Instagram ? Brian Cooksey commence ici une série d'articles passionnants sur les API, dans un langage clair, imagé, sans jargon inutile.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-28">28 Mar 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/centrer-une-div-guide-complet/">Centrer un bloc div, guide complet</a></h2>
</header>
<section class="post-excerpt">
<p>Nous avons tous rencontré le problème du centrage de div en CSS. Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-flexbox">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-23">23 Mar 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/utiliser-flexbox/">Utiliser Flexbox</a></h2>
</header>
<section class="post-excerpt">
<p>Flexbox est une technique simple et puissante, mais elle pose encore quelques problèmes de compatibilité. Sean Fioritto répond ici à la question : quand pourrai-je utiliser Flexbox dans le monde réel?</p>
</section>
</article>
<article class="post tag-typographie tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-15">15 Mar 2014</time> on <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/les-free-fonts-aujourdhui/">Les free fonts aujourd&#x27;hui</a></h2>
</header>
<section class="post-excerpt">
<p>Jeremiah Shoaf, le créateur du formidable site Typewolf, fait le point sur les polices gratuites et nous propose ses préférées. On peut trouver de vraies pépites aujourd'hui en open source!</p>
</section>
</article>
<article class="post tag-html tag-javascript tag-avance">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-09">09 Mar 2014</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/avance/">Avancé</a></span>
<h2 class="post-title"><a href="/introduction-aux-custom-elements/">Introduction aux Custom Elements</a></h2>
</header>
<section class="post-excerpt">
<p>Vous avez certainement perçu le vacarme qu'on fait autour des composants web et ce qu'ils vont apporter. Peter Gasston présente ici les éléments personnalisés, un petit guide pour mieux comprendre.</p>
</section>
</article>
<article class="post tag-css tag-design tag-debutant tag-bases-css tag-gradients">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-09">09 Mar 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a>, <a href="/tag/gradients/">Dégradés</a></span>
<h2 class="post-title"><a href="/les-degrades-css/">Les dégradés CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Chris Coyier a mis à jour ses articles d'introduction aux dégradés CSS, linéaires, radiaux, répétés, une bonne occasion de réviser ses classiques en compagnie d'un guide toujours clair et concis.</p>
</section>
</article>
<article class="post tag-css tag-html tag-design tag-responsive-web-design tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2014-03-06">06 Mar 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/strategie-responsive/">Stratégie responsive</a></h2>
</header>
<section class="post-excerpt">
<p>On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire tag-hash-hugogiraudel">
<header class="post-header">
<span class="post-meta"><time datetime="2014-02-09">09 Feb 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/sass-tout-sur-extend/">Sass : tout sur @extend</a></h2>
</header>
<section class="post-excerpt">
<p>Hugo Giraudel, notre grand spécialiste de Sass, est de retour. Il fait le point de façon précise et claire sur ce que personne ne vous avait jamais dit sur @extend.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire tag-hash-hugogiraudel">
<header class="post-header">
<span class="post-meta"><time datetime="2014-02-09">09 Feb 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/sass-mixin-ou-placeholder/">Sass : Mixin ou Placeholder ?</a></h2>
</header>
<section class="post-excerpt">
<p>Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux.</p>
</section>
</article>
<article class="post tag-css tag-html tag-svg tag-debutant tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2014-02-01">01 Feb 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/data-uri/">Data URI</a></h2>
</header>
<section class="post-excerpt">
<p>Saviez-vous que vous n'aviez pas besoin d'utiliser un lien externe vers une image, vous pouvez embarquer les données de l'image directement dans votre document avec le format codé Data URI.</p>
</section>
</article>
<article class="post tag-css tag-design tag-responsive-web-design tag-intermediaire tag-flexbox tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-31">31 Jan 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/design/">Design</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/flexbox/">Flexbox</a></span>
<h2 class="post-title"><a href="/flexbox-guide-complet/">Flexbox, guide complet</a></h2>
</header>
<section class="post-excerpt">
<p>Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.</p>
</section>
</article>
<article class="post tag-css tag-html tag-svg tag-intermediaire tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-28">28 Jan 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/svg/">SVG</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/utiliser-svg/">Utiliser SVG</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article complet et clair, Chris Coyier s'intéresse à la mise en oeuvre concrète de SVG pour votre design. Pas de théorie, cercles, rectangles, non, rien que du concret.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-19">19 Jan 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/ids-et-classes-css/">IDs et Classes CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Parmi les sélecteurs les plus communs, on trouve "id" et "class". Cet article engagé de Louis Lazaris décrit leurs différences et les effets potentiels de l'utilisation de l'un ou l'autre.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-18">18 Jan 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/le-positionnement-css/">Le positionnement CSS</a></h2>
</header>
<section class="post-excerpt">
<p>Une technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété position. Pour apprendre ou bien pour réviser.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-layout tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-18">18 Jan 2014</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/la-difference-entre-block-et-inline/">CSS Block, Inline et Inline-Block</a></h2>
</header>
<section class="post-excerpt">
<p>Le premier d'une série de 3 articles de Louis Lazaris sur des notions de base de CSS. Nous commençons aujourd'hui avec les notions parfois confuses de Block, Inline et Inline-Block.</p>
</section>
</article>
<article class="post tag-web-semantique tag-intermediaire tag-metadata">
<header class="post-header">
<span class="post-meta"><time datetime="2014-01-15">15 Jan 2014</time> on <a href="/tag/web-semantique/">Web sémantique</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/metadata/">Metadata</a></span>
<h2 class="post-title"><a href="/introduction-a-rdfa/">Introduction à RDFa</a></h2>
</header>
<section class="post-excerpt">
<p>Le web est toujours plus sémantique, mais qu'est-ce que cela signifie ? Pourquoi et comment mettre en oeuvre une communication compréhensible par les machines ? Avec RDFa, c'est simple. Par Mark Birbeck.</p>
</section>
</article>
<article class="post tag-typographie tag-tous-niveaux tag-accessibilite">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-31">31 Dec 2013</time> on <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/accessibilite/">Accessibilité</a></span>
<h2 class="post-title"><a href="/dos-donts-de-la-typographie/">Do&#x27;s &amp; Don&#x27;ts de la Typographie</a></h2>
</header>
<section class="post-excerpt">
<p>L'essentiel du contenu disponible sur le web est du texte, il est donc fondamental de comprendre les principes de base d'une bonne typographie. Un rappel en illustrations par Sam Jones.</p>
</section>
</article>
<article class="post tag-html tag-dom tag-javascript tag-debutant tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-29">29 Dec 2013</time> on <a href="/tag/html/">HTML</a>, <a href="/tag/dom/">DOM</a>, <a href="/tag/javascript/">JavaScript</a>, <a href="/tag/debutant/">Débutant</a></span>
<h2 class="post-title"><a href="/quest-ce-que-le-dom/">Qu&#x27;est-ce que le DOM ?</a></h2>
</header>
<section class="post-excerpt">
<p>Un article court et simple pour une première introduction au DOM, le Document Object Model, par Chris Coyier. Ce qu'il est, et ce qu'il n'est pas, dans un langage clair.</p>
</section>
</article>
<article class="post tag-tous-niveaux tag-metadata">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-26">26 Dec 2013</time> on <a href="/tag/tous-niveaux/">Tous Niveaux</a>, <a href="/tag/metadata/">Metadata</a></span>
<h2 class="post-title"><a href="/avenir-du-streaming/">L&#x27;avenir du streaming</a></h2>
</header>
<section class="post-excerpt">
<p>Nous sommes à l'ère du contenu et des métadonnées, et les possibilités d'exploitation de ces données sont infinies. Très peu est fait dans ce sens, comme le remarque Khoi Vinh.</p>
</section>
</article>
<article class="post tag-css tag-contenu tag-responsive-web-design tag-intermediaire tag-layout tag-amelioration-progressive tag-ux">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-25">25 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/contenu/">Contenu</a>, <a href="/tag/responsive-web-design/">Responsive Web Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/amelioration-progressive/">Amélioration Progressive</a>, <a href="/tag/ux/">UX</a></span>
<h2 class="post-title"><a href="/la-choregraphie-du-contenu/">La chorégraphie du contenu</a></h2>
</header>
<section class="post-excerpt">
<p>Les sites responsifs ou adaptatifs modifient l'architecture de leur contenu afin de s'adapter aux dimensions de l'écran. Avec ces excitantes potentialités surgissent des défis tout aussi passionnants. Par Trent Walton.</p>
</section>
</article>
<article class="post tag-css tag-postprocesseurs tag-intermediaire tag-preprocesseurs tag-outils tag-workflow">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-23">23 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/postprocesseurs/">Postprocesseurs</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/preprocesseurs/">Preprocesseurs</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/workflow/">Workflow</a></span>
<h2 class="post-title"><a href="/autoprefixer-un-postprocesseur-pour-les-prefixes-vendeurs/">Autoprefixer, un postprocesseur pour les préfixes vendeurs</a></h2>
</header>
<section class="post-excerpt">
<p>Autoprefixer analyse la syntaxe des fichiers CSS et ajoute des préfixes vendeurs aux règles CSS en utilisant la base de données de Can I Use pour déterminer les préfixes nécessaires.</p>
</section>
</article>
<article class="post tag-design tag-typographie tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-22">22 Dec 2013</time> on <a href="/tag/design/">Design</a>, <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/de-la-typographie-web/">De la Typographie Web</a></h2>
</header>
<section class="post-excerpt">
<p>Être designer demande une compréhension profonde de la typogaphie et de la sélection et de l'association des polices de caractères. Le grand Jason Santa Maria l'explique avec intelligence et sensibilité.</p>
</section>
</article>
<article class="post tag-css tag-html tag-workflow tag-debutant tag-emmet">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-20">20 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/workflow/">Workflow</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/emmet/">Emmet</a></span>
<h2 class="post-title"><a href="/goodbye-zen-coding-hello-emmet/">Goodbye, Zen Coding. Hello, Emmet !</a></h2>
</header>
<section class="post-excerpt">
<p>Emmet, anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps. Une introduction claire, illustrée, complète et passionnante par Zeno Rocha.</p>
</section>
</article>
<article class="post tag-css tag-workflow tag-debutant tag-emmet">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-20">20 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/workflow/">Workflow</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/emmet/">Emmet</a></span>
<h2 class="post-title"><a href="/emmet-un-turbo-dans-votre-css/">Emmet, un turbo dans votre CSS</a></h2>
</header>
<section class="post-excerpt">
<p>En complément de l'article général sur Emmet, Josh Medeski se concentre ici sur son utilisation pour CSS : comment Emmet transforme instantanément de simples abréviations en snippets de code CSS complexes.</p>
</section>
</article>
<article class="post tag-css tag-intermediaire tag-gradients">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-17">17 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/gradients/">Dégradés</a></span>
<h2 class="post-title"><a href="/les-motifs-css3/">Les motifs CSS3</a></h2>
</header>
<section class="post-excerpt">
<p>La galerie de motifs CSS3 de Lea Verou a fait le tour du web. Lea explique ici dans le détail comment ces motifs sont créés, avec la technique des dégradés.</p>
</section>
</article>
<article class="post tag-ux tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-17">17 Dec 2013</time> on <a href="/tag/ux/">UX</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/human-interest/">L&#x27;approche humaine</a></h2>
</header>
<section class="post-excerpt">
<p>Pourquoi ne pas adopter une stratégie similaire à celle de l'amélioration progressive dans notre approche humaine du web ? Il est grand temps d'évoluer. Encore un article inspirant de Trent Walton.</p>
</section>
</article>
<article class="post tag-workflow tag-postprocesseurs tag-outils tag-intermediaire tag-preprocesseurs tag-hash-chriscoyier">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-14">14 Dec 2013</time> on <a href="/tag/workflow/">Workflow</a>, <a href="/tag/postprocesseurs/">Postprocesseurs</a>, <a href="/tag/outils/">Outils</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/preprocesseurs/">Preprocesseurs</a></span>
<h2 class="post-title"><a href="/grunt-pour-ceux-qui-pensent-que-grunt-est-complique/">Grunt pour ceux qui pensent que Grunt est compliqué</a></h2>
</header>
<section class="post-excerpt">
<p>On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier.</p>
</section>
</article>
<article class="post tag-css tag-html tag-design tag-intermediaire">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-11">11 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a>, <a href="/tag/design/">Design</a>, <a href="/tag/intermediaire/">Intermédiaire</a></span>
<h2 class="post-title"><a href="/design-atomique/">Design atomique</a></h2>
</header>
<section class="post-excerpt">
<p>La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.</p>
</section>
</article>
<article class="post tag-css tag-sass tag-intermediaire tag-preprocesseurs">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-11">11 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/sass/">Sass</a>, <a href="/tag/intermediaire/">Intermédiaire</a>, <a href="/tag/preprocesseurs/">Preprocesseurs</a></span>
<h2 class="post-title"><a href="/se-lancer-dans-sass/">Se lancer dans Sass</a></h2>
</header>
<section class="post-excerpt">
<p>Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment.</p>
</section>
</article>
<article class="post tag-css tag-debutant tag-layout tag-bases-css">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-11">11 Dec 2013</time> on <a href="/tag/css/">CSS</a>, <a href="/tag/debutant/">Débutant</a>, <a href="/tag/layout/">Layout</a>, <a href="/tag/bases-css/">Bases CSS</a></span>
<h2 class="post-title"><a href="/box-sizing-pour-les-nuls/">Box-sizing pour les nuls</a></h2>
</header>
<section class="post-excerpt">
<p>Box-sizing est une alternative au modèle de boîte standard, encore trop peu utilisée. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska.</p>
</section>
</article>
<article class="post tag-typographie tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-11">11 Dec 2013</time> on <a href="/tag/typographie/">Typographie</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/le-web-95-de-typographie/">Le web, 95% de typographie</a></h2>
</header>
<section class="post-excerpt">
<p>Un bref rappel par Oliver Reichenstein, fondateur d'Information Architects, de l'importance de la typographie dans le web, ce qu'elle est et ce qu'elle n'est pas. Simple, direct, éclairant et inspirant.</p>
</section>
</article>
<article class="post tag-design tag-tous-niveaux">
<header class="post-header">
<span class="post-meta"><time datetime="2013-12-11">11 Dec 2013</time> on <a href="/tag/design/">Design</a>, <a href="/tag/tous-niveaux/">Tous Niveaux</a></span>
<h2 class="post-title"><a href="/style-vs-design-2/">Style vs Design</a></h2>
</header>
<section class="post-excerpt">
<p>Dans cet article qui n'a pas pris une ride, le grand Jeffrey Zeldman nous rappelle les risques qu'il y a à confondre Style et Design, la surface et la substance.</p>
</section>
</article>
<nav class="pagination" role="navigation">
<span class="page-number">Page 1 of 1</span>
</nav>
</main>
<footer class="site-footer clearfix">
<div class="copyright"><span itemprop="copyrightHolder" itemscope itemtype="https://schema.org/Organization"><span itemprop="name"><a itemprop="url" href="https://la-cascade.io">LA CASCADE</a></span></span> Traductions <span itemprop="license"><a itemprop="url" rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></span></div>
<div class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></div>
</footer>
</div>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>(function(d){d.fn.fitVids=function(e){var c={customSelector:null};if(!document.getElementById("fit-vids-style")){var g=document.head||document.getElementsByTagName("head")[0],f=document.createElement("div");f.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>';g.appendChild(f.childNodes[1])}e&&
d.extend(c,e);return this.each(function(){var b="iframe[src*='player.vimeo.com'] iframe[src*='youtube.com'] iframe[src*='youtube-nocookie.com'] iframe[src*='kickstarter.com'][src*='video.html'] object embed".split(" ");c.customSelector&&b.push(c.customSelector);b=d(this).find(b.join(","));b=b.not("object object");b.each(function(){var a=d(this);if(!("embed"===this.tagName.toLowerCase()&&a.parent("object").length||a.parent(".fluid-width-video-wrapper").length)){var b="object"===this.tagName.toLowerCase()||
a.attr("height")&&!isNaN(parseInt(a.attr("height"),10))?parseInt(a.attr("height"),10):a.height(),c=isNaN(parseInt(a.attr("width"),10))?a.width():parseInt(a.attr("width"),10),b=b/c;a.attr("id")||(c="fitvid"+Math.floor(999999*Math.random()),a.attr("id",c));a.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*b+"%");a.removeAttr("height").removeAttr("width")}})})}})(window.jQuery||window.Zepto);</script>
<script>(function(a,h){a(document).ready(function(){a(".post-content").fitVids();a(".scroll-down").arctic_scroll();a(".menu-button, .nav-cover, .nav-close").on("click",function(f){f.preventDefault();a("body").toggleClass("nav-opened nav-closed")})});a.fn.arctic_scroll=function(f){var g={elem:a(this),speed:500},e=a.extend(g,f);e.elem.click(function(d){d.preventDefault();var b=a(this);d=a("html, body");var c=b.attr("data-offset")?b.attr("data-offset"):!1,b=b.attr("data-position")?b.attr("data-position"):!1;
c?(c=parseInt(c),d.stop(!0,!1).animate({scrollTop:a(this.hash).offset().top+c},e.speed)):b?(c=parseInt(b),d.stop(!0,!1).animate({scrollTop:c},e.speed)):d.stop(!0,!1).animate({scrollTop:a(this.hash).offset().top},e.speed)})}})(jQuery);</script>
</body>
</html>
