Pages

vendredi 27 septembre 2013

CSS - La couleur et le fond - Couleur du texte

Passons maintenant au vaste sujet de la couleur.
Comment cela, « vaste » ?
Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color. Nous allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs.

Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in english, of course).
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - Couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui,<body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - Images de fond

Dans les exemples qui suivent, je vais modifier l'image de fond de la page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond derrière les titres, paragraphes, etc.

Appliquer une image de fond

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :
Plus d'infos »
Publié par à 0 commentaires

CSS - La couleur et le fond - La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.

La propriété opacity

La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).
  • Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
  • Avec une valeur de 0, l'élément sera totalement transparent.
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Bordures standard

Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures : border-width, border-color, border-style…
Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Bordures arrondies

Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3 est arrivé, il est enfin possible d'en créer facilement !
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
Plus d'infos »
Publié par à 0 commentaires

CSS - Les bordures et les ombres - Les ombres

Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page !
Nous allons ici découvrir deux types d'ombres :
  • les ombres des boîtes ;
  • les ombres du texte.
Plus d'infos »
Publié par à 0 commentaires
Inscription à : Articles (Atom)