Que sont les variables CSS ? Comment les utiliser ?
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 !
Comment Insérer du contenu à votre site en utilisant du CSS ?
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 .
Comment cibler des éléments avec des attributs en CSS ?
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 */
}
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
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
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
- Cliquez sur Intégrer la carte
- Sélectionnez le code Iframe
- Faites un click droit et copier le code d'insertion
Blisk : un excellent navigateur pour développer et tester votre site web sous smartphones et tablettes
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 ...
Comment créer des colonnes avec column-count en CSS ?
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.
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.
Multisites : une mauvaise idée pour la majorité des sites
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/
Quel est le meilleur moment du jour pour envoyer votre newsletter ?
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 comment vos sites se font archivés au fil du temps, & restent toujours consultables par les internautes ...
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 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" ?
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/
statcounter.com : les statistiques, world wide, pays / pays, des navigateurs utilisés par les internautes
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.
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
Les mentions légales d'un site internet
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/
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
|
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
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.