Les fondamentaux du Responsive Web Design I. Introduction▲ Prenons deux exemples simples. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. II. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : une grille d'affichage qui soit flexible :autrement dit, un gabarit qui ne dépende pas d'une résolution minimale, maximale ; des médias flexibles :à savoir, faire en sorte que mes images, vidéos (si besoin), ne débordent pas du cadre de notre grille d'affichage/gabarit ; un ensemble de règles CSS basé sur Media Queries : le principe : mettre des conditions sur l'affichage afin d'afficher/masquer, voire changer le rendu de notre application Web. Il est heureusement possible de s'adapter pour y parvenir. III. IV. V. VI. <! Horreur ! <!
12 Fun CSS Text Shadows You Can Copy and Paste Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Basic Shadow The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9, is zilch. Syntax The syntax for creating a simple text-shadow is shown below. text-shadow: horizontal-offset vertical-offset blur color; Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity. text-shadow: 2px 4px 3px rgba(0,0,0,0.3); Why rgba? Quick and Dirty Letterpress Hard Shadow Double Shadow
Installer un espace membres sur son blog Wordpress en 5 mn chrono e vous en parlais hier, quand on veut vraiment décoller avec son blog, il faut plus qu’un ebook de 10 pages, un formulaire Aweber et une liste d’emails pour ça : Il faut que chacun de vos visiteurs puisse s’inscrire sur votre blog pour en devenir membre. Ainsi, ce n’est plus un pauvre ebook en cadeau qui donnera envie à vos visiteurs de s’abonner chez vous, c’est TOUTES les ressources de votre blog qui serviront à faire exploser votre liste de membres ciblés et véritablement intéressés par ce que vous proposez. Mais peut-être que vous pensez que c’est compliqué à mettre en place tout ça ? Pas du tout ! Et ce n’est pas une expression : Ca prend VRAIMENT 5 minutes ! Comment ? Grâce à une fonction de WordPress et à un plugin gratuit que je vous propose d’installer sur votre blog. Vous allez ainsi pouvoir créer votre espace membres en quelques clics. Le tout directement à partir de votre blog. Mais avant de vous parler de ce plugin, rappelons ce qu’est un espace membres. Par exemple, sur ce blog : 1.
Amélioration progressive : Modernizr et sélecteurs CSS avancés A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués. En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Modernizr : le bazooka JavaScript :root pour IE9 et supérieurs
Centrer un float en CSS | Cloud Connected Une zone – la galerie – doit être constituée de un ou plusieurs éléments – les boites – centrés à l’interieur et sur une seule ligne. En HTML « à la papy » c’est très facile à faire : la galerie est une cellule d’un tableau avec la propriété align="center", et le contenu est un tableau d’une seule ligne dont le nombre de cellules varie de 1 à 5 (le nombre maximum de boites pour tenir sur une seule ligne). Mais comment faire ça en CSS ? Problématique L’effet recherché ressemble à ça : L'effet recherché Ma première idée, pour placer les boîtes est d’utiliser le positionnement float avec un hr et la propriété clear : both; comme expliqué dans ce très bon article sur OpenWeb. Au niveau code ça donne : <div class="galerie"><div class="boîte">boîte 1</div><div class="boîte">boîte 2</div><div class="boîte">boîte 3</div><div class="boîte">boîte 4</div><div class="boîte">boîte 5</div><hr class="clear" /></div> Appliquons le style suivant : Ça donne : Exemple 1.1 Avec 3 boîtes uniquement : Exemple 1.2
Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.
Mode d’emploi NextGEN Gallery | Ajwan Créé le 20 octobre 2012 Dernière mise à jour : 5 mai 2013 Ce mode d’emploi est destiné aux personnes pour qui j’ai réalisé un site WordPress, afin qu’elles puissent gérer leurs galeries d’images avec facilité. Il est néanmoins accessible à toute autre personne intéressée par le sujet. Infos pour ces dernières : Ce mode d’emploi suppose que vous ou votre web designer avez ajouté dans WordPress les extensions (plugins) NextGEN Gallery , Collapsing Categories et éventuellement NextGEN Scroll Gallery Prérequis : savoir manier un site WordPress en tant qu’”éditeur”. A. A1. L’ensemble de vos images se composera probablement de plusieurs galeries (= plusieurs groupes d’images). Pour les sites que je construis, j’ai prévu une galerie “idéale” (en tout cas à mes yeux, après avoir exploré des centaines de galeries sur le web). Voir un exemple(Dans l’exemple, cliquez sur les liens pour bien voir l’arborescence des galeries) A2. A2.1.Réfléchir avant d’agir Réduire le poids des images B. N.B. B1.
Utiliser CSS3 aujourd'hui, outils et ressources Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer. Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public. De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. Voyons quelques uns de ces outils en ligne en vogue actuellement : CSS3pie.com CSS3please.com CSS3.info
Tutoriel Flottement CSS Float Et Superposition Z-index Le positionnement nous offre encore d'autres possibilités afin d'organiser notre page. Après avoir vu le positionnement absolu, fixe et relatif dans le tutoriel précédent, voyons maintenant le positionnement flottant. Les flottants Maintenant nous allons apprendre comment faire flotter des objets. Vous avez par exemple une page pour présenter des personnes et vous voulez mettre leur photo d'identité. Sans faire flotter l'image vous auriez quelque chose comme ceci : Il y a donc un espace blanc à côté de la photo. Code CSS : Puis qu'on parle de journaux, ça nous fait penser aux lettrines. Effet de superposition Z index Toujours sur les manipulations du positionnement, on veut maintenant avoir des effets de superposition pour des blocs qui se chevauchent. Pour cela, nous devons utiliser la propriété z-index. Code XHTML : Le numéro 1 (z-index=1) qui est en rouge est écrasé par le numéro 2 (z-index=2), en vert, le numéro 2 par le 3 (z-index=3) et ainsi de suite. Une question ? A propos de l'auteur
Devin R. Olsen - Pure CSS Menu & Infinite Sub Menus This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in: IE7, IE8, FireFox, Safari Opera This pure CSS menu with infinite sub menus technique only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS. The CSS The HTML <ul id="nav"><li>Menu 1 <ul class="nav first"><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4 <ul class="nav"><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li></ul></li></ul></li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li></ul>
How to Create a WordPress Child Theme Have you ever spent countless hours customizing your site, only to lose all of your hard work after updating the theme? Creating a child theme allows you to make changes to your site without touching your original theme’s code, making it easier to update your site without the threat of wiping out changes when you update. A child theme inherits the functionality of its parent and you can turn off your child theme and fall back on the parent any time you want. In today’s Weekend WordPress Project we’re going to look at how to set up a child theme. Getting Started In this example, we’re going to create a child theme for the Twenty Thirteen default WordPress theme. 1. It’s important to name the folder without any space in the name, and it’s common practive to use the name of the parent theme folder with “-child” added on the end. So for this example, we’ll be calling our folder “twentythirteen-child”. 2. The style sheet must start with the following lines: 3. 4. Modifying Your Theme’s CSS
scottjehl/Respond La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>