Lorsque vous écrivez du code CSS pour votre site, vous pouvez utiliser les propriétés custom CSS (Variables) pour en accélérer le développement. Vous utiliserez ces variables pour définir des propriétés  (taille, couleur) qui peuvent être appliquées à divers éléments.

Cela vous donne plus de contrôle sur votre code et le design de votre site. En changeant la valeur d'une variable, celle ci prendra le pas sur la valeur de cette propriété partout ou elle est invoquée.

Cet article vous explique comment utiliser les variables CSS et inclut des exemples pratiques.

Alors commençons !

Saviez-vous que vous pouvez ajouter du contenu à votre site en utilisant du CSS ? 

Cela peut paraître fou mais c'est la vérité. Je vais vous montrer commenta ajouter du texte à un site internet en utilisant la propriété CSS content. Nous allons aussi utiliser les pseudos-éléments :before et :after. 

1ère étape. Le code HTML

Pour cet exemple, je vais utiliser le code HTML ci-dessous: 

<div class="content">
    <h2>Texte inséré en HTML (de façon habituelle)</h2>
</div>

Le sélecteur que l'on va utiliser est la class content, plus les pseudos-éléments :before and :after .

Lorsque l'on travail avec du css, les designers cible généralement les éléments à partir de leur id ou de leur class . Toutefois vous pouvez cibler des éléments en n'utilisant pas ces deux attributs.

Il y a beaucoup  d'exemples ou l'on peut souhaiter cibler un élément tout en évitant d' utiliser ces deux sélecteurs les plus courant . 

Dans cet article nous allons vous montrer comment cibler des éléments avec du CSS et des attributs 2 exemples qui vont plus loin que les id et class. 

Cibler un élément avec un attribut et sa valeur exacte 

Dans notre premier exemple, nous souhaitions cibler ce champ  avec du CSS :

<input type="text" name="myfield">

Nous pouvons utiliser l' attribut  type  comme sélecteur. Le CSS ressemble à ceci  :

input[type="text"] {
 /* Votre CSS personnalisé à insérer */
}

Nous pouvons aussi utiliser l 'attribut  name comme sélecteur. La clé est de mettre l'attribut et sa valeur exacte entre les crochets à coté du tag name :

input[name="myfield"] {
 /* Votre CSS personnalisé à insérer */
}

Si vous êtes un nouveau Web Designer, l'une des compétences que vous devez maîtriser  est l'utilisation d’images en background (arrière plan).

Votre design peut nécessiter de remplir complémentent un container CSS avec une image, mais parfois l’image que vous souhaitez intégrer ne remplit que de façon partielle ce container.

Dans ce tutoriel, vous découvrirez 3 exemples d'utilisation, du tag  CSS  background-size  

Youtube, Vimeo et d'autres hébergeurs vidéos permettent d'intégrer facilement leur lecteurs dans votre site internet.

Toutefois, Youtube, Vimeo et autres ne fournissent pas de vidéos responsives par défaut.

Dans ce court tutoriel nous allons voire comment en utilisant quelques lignes de CSS l'on peut  rendre responsives des videos de Youtube, Vimeo ou autres.

 1. Obtenir le code d'insertion Youtube

• Rendez-vous sur Youtube
• Trouvez la vidéo que vous souhaitez  insérer dans votre site
• Cliquez sur Partager > Intégrer, faites un click droit et copiez le code HTML

Les Google Maps sont très faciles à inclure dans un site.

Malheureusement, par défaut, elles ne sont pas responsives. 

Dans ce court tutoriel, je vais vous montrer comment rendre votre Google Map responsive, en utilisant seulement quelques lignes CSS. Cette technique fonctionne avec Joomla, WordPress, Drupal ou n'importe quelle autre plateforme.  

1. Obtenir le code d'insertion de Google Maps

• Rendez-vous sur Google Maps
• Faites un recherche pour trouver la zone de Google Maps que vous souhaitez inclure dans votre site
• Cliquez sur le lien Partager 

 

1. Cliquez sur Intégrer la carte
2. Sélectionnez le code Iframe
3. Faites un click droit et copier le code d'insertion 

Ce jour le navigateur Blisk permet de tester, gratuitement, le rendu de votre site sous : 

• Iphone 4
• Iphone 5
• Iphone 6 plus
• Nokia N9
• Samsung Galaxy S3
• Samsung Galaxy S4
• Google Nexus 4
• Ipad mini
• Ipad Air rétina
• Google Nexus 10

Et bien plus ...

Valentin Garcia est l'auteur de l’article How to Create Columns with column-count in CSS dont la traduction est autorisée par ostraining.com.

Dans un tutoriel précédent, nous avons expliqué qu'il peut être dangereux d'utiliser des largeurs (width) en HTML pour définir la mise en page.

Heureusement, le CSS est suffisamment  puissant pour  imiter des balises HTML désuètes. Par exemple, vous pouvez créer des colonnes en CSS en utilisant la propriété column-count. Ce peut être très utile pour les mises en page d'un site, mais aussi pour diviser des longs textes  en colonnes.

Dans ce tutoriel nous allons voir comment créer des colonnes avec column-count.

Rendez-vous sur http://www.legiscope.com/, saisissez l' adresse de votre site, puis votre adresse mail afin de pouvoir recevoir le rapport d'audit.

Le robot Legiscope qui parcourra votre site est, ce jour,  en version Béta ce qui peut générer quelques imprécisions ou erreur dans leur rapport.

Toutefois l'intérêt de leur audit est de produire un sommaire intelligible des améliorations que vous devez apporter à votre site pour être en pleine conformité avec la loi française afin de vous prémunir d'éventuelles sanctions pénales et/ou financières.

Dans cet article Ostraining nous dévoile pourquoi le "Multisites", c'est à dire l'administration de plusieurs sites à partir d'une seule installation d'un CMS, est en général un mauvaise idée pour la plus part des sites.

Consultez cet article (en anglais) : http://www.ostraining.com/blog/general/multisites-bad-idea/

Dans cet article, la souris verte, nous révèle :

• à quelle moment de la journée  les emails sont les plus lus
• ce que l'on peut faire pour augmenter le taux d'ouverture de sa newsletter

Consultez cet article : http://www.la-souris-verte.com/blog/quel-est-meilleur-moment-pour-envoyer-newsletter

La WayBack Machine, ou Internet Archive, archive non seulement tous les sites web, mais en conserve aussi leurs différentes versions au cours du temps.

Ce jour elle a archivée plus de 368 milliards de pages web.

En la consultant vous pouvez par exemple, pour votre propre site, retrouver l'évolution de son design, ou de son contenu, au fil des années.

Testez la : http://archive.org/web/

Comment indiquer à la Way BackMachine de ne pas archiver mon site mais aussi de le "désarchiver" ?

Optimiser le poids de vos images peut améliorer considérablement le temps de téléchargement de votre site.

Ce tutoriel couvre les point suivants :

• Quel format d'image pour quelle utilisation ?
• Quel format d'image à utiliser pour les JPG, baseline ou progressive ?
• Considérations sur le poids & la compression
• Que faire pour la haute résolution et les écrans retinas ?
• Outils gratuits pour optimiser vos images sous Windows
• Recommendations générales & récapitulation

Consultez ce tutoriel (en anglais) : http://www.ostraining.com/blog/webdesign/optimizing-website-images/

statcounter.com : les statistiques, world wide, pays / pays:  des navigateurs, résolutions d'écran, système d'exploitations et bien d'autres critères utilisés par les internautes

Pour découvrir ces statistiques gratuites utilisez sur cette page http://gs.statcounter.com/ le menu déroulant browser, choissez votre pays, et la période que vous souhaitez considérer.

The more products Apple releases, the more widespread Retina displays become.
So far we have Retina capable iPhones, iPods, iPads and MacBooks of various sizes, which together make up a pretty substantial audience.
Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens...

Consulter la suite de cet article sur cette page : http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Les mentions légales d'un site internet pour une personne physique ou morale, déclaration à la CNIL http://blog.com3elles.com/2013/07/19/les-mentions-legales-dun-site-internet/

Lors de la création d'un site internet, pour choisir la palette de couleur de votre site, utilisez le Créateur de nuanciers et le Cercle Chromatique Accessible.

Le Créateur de nuancier de couleurs d'Eric Meyer

Choisissez un format de valeur de couleur, puis entrez deux valeurs de couleur (valides CSS) dans le format que vous avez choisi, ensuite choisissez le nombre de nuances. La palette vous montrera à la fois les couleurs que vous avez choisies, le nombre de nuances, ainsi que les valeurs de ces couleurs. En cliquant sur l'un des carrés de "l'arc en ciel" vous complétez automatiquement la valeur du champ de couleur sélectionnée. Toutes les valeurs sont arrondies au nombre entier le plus proche. En Changeant le format des couleurs vous transformerez toutes les valeurs de couleur existantes. "Effacer" retire les valeurs de couleurs mais ne change pas le format des couleurs. Si vous souhaitez utiliser Le Créateur de nuancier "offline", visualisez le code source et sauvez le sur votre ordinateur.

Le Créateur de nuanciers ("The Color Blender") a été créé par Eric Meyer sous une licence Creative Commons Attribution-ShareAlike 1.0 .

Le Cercle Chromatique Accessible de Giacomo Mazzocato

Environ une personne sur vingt souffre d'une forme ou d'une autre de daltonisme. Il est donc judicieux de vérifier que vos choix de couleurs leur soient "visibles".

Giacomo Mazzocato a développé "Le Cercle Chromatique Accessible" qui vous permettra de visualiser les couleurs comme certains daltoniens (deuteranopes, protanopes et tritanopes).

A noter que le "Cercle Chromatique accessible" offre maintenant deux choix d'algorithme comme critère de sélection de couleur : celui du WCAG2 (Web Content Acessibility Guidelines 2.0, recommandé) ou celui du WCAG1. Un bon comparatif entre ces deux guides pour l'accessibilité du web est disponible sur Wikipédia : WCAG.

Environ une personne sur vingt souffre d'une forme ou d'une autre de daltonisme. Il est donc judicieux de vérifier que vos choix de couleurs leur soient "visible".
Giacomo Mazzocato a développé "Le Cercle Chromatique Accessible" qui vous permettra de visualiser les couleurs comme certain daltoniens (deuteranopes, protanopes et tritanopes).
A noter que le "Cercle Chromatique accessible" offre maintenant deux choix d'algorithme comme critère de sélection de couleur : celui du WCAG2 (Web Content Acessibility Guidelines 2.0, recommandé) ou celui du WCAG1. Un bon comparatif entre ces deux guides pour l'accessibilité du web est disponible sur Wikipédia: WCAG.