Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Une division, des paragraphes pour le contenu, et un lien pour l'action, nous n'aurons besoin de rien de plus ici. Styles de base Les styles proposés ici ont été mis à jour récemment pour correspondre au support navigateur. Passons à notre code CSS. Et voilà !
2500 free resources for designers Every designer loves free stuff. So here we bring together 2500 brilliant freebies, covering everything from typography to 3D design, in one mammoth list. We'll update this feature regularly, adding more resources as we find them, so amazingly that number will increase over the coming months and years... You really WILL want to bookmark this page! Graphic design and illustration freebies Web design freebies Free cheat sheet so you can brand your social media pages with easeGet 500 web design books - they're totally free and available nowDesign your new Twitter header with this free PSD130 CSS and JavaScript tutorials to power up your skills50 superb WordPress tutorials10 top WordPress resourcesHow to build an app: 45 great tutorials 3D design freebies Typography freebies Photoshop freebies 300+ free vector shapes for Photoshop45 free Photoshop brushes every creative must have! Have you spotted a free design resource?
Des statistiques graphiques grâce aux CSS Fans des statistiques en tout genre, mais plutôt fainéants en ce qui concerne leur réalisation picturale, voici une solution basée sur les feuilles de style CSS pour mettre en valeur de façon élégante et simple diverses données à présenter. Avertissement Cette technique exploitant CSS est à la frontière entre présentation et génération d'un pseudo-contenu, elle rencontre cependant des limites : D'accessibilité : elle peut, selon le contexte où se trouvent les données chiffrées, invalider le critère d'accessibilité WCAG1.0 de niveau AAA 14.2 qui préconise l'utilisation d'images de contenu en complément du contenu textuel afin d'en faciliter la compréhension. D'ergonomie : le graphique généré en CSS ne sera, par exemple, pas copiable avec la même facilité qu'une image HTML. Il peut donc être nécessaire, selon le contexte, d'utiliser une image HTML de préférence à cette technique CSS. Le code HTML Pour ce faire, voici un exemple de structure HTML : Mise en forme CSS Réalisation de la barre
Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs). Comment s'y retrouver?
Un design fluide avec trois «colonnes», grâce au positionnement flottant Beaucoup de sites web présentent une mise en page sur trois colonnes, avec une colonne centrale de contenu et des colonnes latérales. Ce tutoriel très complet montre comment on peut utiliser les flottants pour réaliser ce type de mise en page, en largeur fixe ou fluide. Navigation Que cherchons-nous à réaliser ? La plupart des sites web actuels utilisent une mise en page en « colonnes », c'est à dire avec des blocs horizontalement côte-à-côte. Dans ce tutoriel, nous nous pencherons sur le cas d'une mise en page en trois colonnes. Un des moyens pour obtenir ce résultat est d'utiliser un tableau (élément HTML table), avec trois cellules. L'utilisation d'un tableau de mise en page est par contre un moyen qui offre peu de souplesse pour la mise en page, et qui pousse souvent à abuser des tableaux pour réaliser une mise en page complète, avec des conséquences souvent néfastes sur l'accessibilité des contenus d'un site. Mise en place des trois « colonnes » Trois blocs de contenu en HTML
display: inline-block et les espaces indésirables - Alsacreations La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.
Adapter une légende à la largeur de l'image Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité. Je rappelle notre énigme: nous souhaitons créer un bloc d'illustration composé d'une image de largeur variable et d'un texte de légende le longueur variable. La réponse réside dans l'utilisation d'un rendu de type «tableau». — Hein? — Allons, pas d'affolement! L'astuce est la suivante: le comportement que nous souhaitons obtenir correspond à une propriété des tableaux. Pour utiliser un rendu de tableau, donc, deux solutions: Un bloc d'illustration simple Lapsana apogonoides, © Junichiro Aoyama
Sitemap: Conseils & outil pour générer un Sitemap XML Qu'est-ce qu'un sitemap ? Un sitemap est un fichier qui contient une liste enrichie d'URLs internes à un site web. Ce fichier est au format XML. Il permet de fournir aux principaux moteurs de recherche des informations sur les URLs d'un site web qu'ils ne pourraient pas découvrir par eux-mêmes. Pour bien comprendre à quoi sert un sitemap, il faut comprendre la manière dont fonctionnent les robots d'indexation des moteurs de recherche (appelés aussi Web spiders ou crawlers ou Bots) tels que Google, Yahoo ou Bing. Voici leurs actions lorsqu'ils analysent un site tel que www.monsite.com : ils commencent par télécharger et analyser le fichier (s'il existe). On peut alors tirer le constat suivant: si une URL d'un site web n'est pas accessible par sa racine ou récursivement dans ses descendants, alors un robot ne peut pas la trouver magiquement. 3 types d'entrées dans une sitemap : les liens, les vidéos et les images Les URLs internes dans un sitemap
Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript Exemples concrets