Accéder au contenu principal

Que sont les variables CSS ? Comment les utiliser ?

CSS Variables

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 !

Lire la suite

Comment Insérer du contenu à votre site en utilisant du CSS ?

les sélecteurs css pour customiser le design de votre siteSaviez-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 .

Lire la suite

Comment cibler des éléments avec des attributs en CSS ?

Sélecteur CSS pour définir le design de votre site.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 */
}

Lire la suite

Comment utiliser des images en background avec du CSS ?

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  

Lire la suite

Comment ajouter des videos Youtube & Vimeo responsives à n'importe quel site ?

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

responsives videos

Lire la suite

Comment créer une Google Map responsive pour n'importe quel site ?

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 

 google maps responsive 1

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

Lire la suite

Comment créer des colonnes avec column-count en CSS ?

Largeur de colonnes en utilisant column-count

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.

Lire la suite

Comment savoir si votre site est conforme aux exigences de la loi française ?

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.

Lire la suite

La WayBack Machine : ou comment vos sites se font archivés au fil du temps, & restent toujours consultables par les internautes ...

logo way back machineLa 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 916 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 : https://web.archive.org/  

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

Lire la suite

Optimiser ses images pour améliorer la vitesse de téléchargement de son site

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/

How to Create Retina Graphics for your Web Designs

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

Palette de couleur

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.

Le cercle chromatique accessible de Giacomo Mazzocato

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 "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.