• Décomposons des codes CSS

    Yo!

    Dans cet article, nous allons décomposer et expliquer trois codes CSS simples: fond de page translucide, angles des images du contenu arrondis et modification de la largeur des champs, modification des pseudos dans une shoutbox.

    Avant cela, un petit rappel de la structure générale d'un code CSS:

    sélecteur {propriétévaleur;}

    Sélecteur = partie du blog sur laquelle l'effet s'appliquera (header, titres, liens...)
    Propriété = paramètre que vous voulez modifier (arrondi des angles, opacité, couleur...)
    Valeur = valeur du paramètre (taille et arrondis en pixels [px]; opacité entre 0 et 1; couleur en hexadécimal ou en RGB -cf. cet article pour savoir ce que c'est, etc.)
    Ces caractères sont indispensables, ils séparent les sélecteurs des propriétés des valeurs pour permettre au navigateur de lire le code.
    La plupart des erreurs de CSS sont dues à un de ces caractères qui manque, qui est dupliqué ou à des fautes de frappe.

     (oui j'ai copié-collé mon intro de rubrique)

    Code pour le fond de page translucide

    #background {background-color: rgba(R,G,B,A);}

    Le sélecteur est #background: il désigne l'ensemble de l'arrière-plan de la page et c'est donc à cet endroit que le code va s'appliquer. Si je ne voulais mettre un fond translucide que par exemple derrière mes titres d'articles, le sélecteur serait #module_titre.
    Vous trouverez en fin d'article le lien vers une liste non exhaustive des sélecteurs utilisés sur Eklablog.

    background-color est la propriété. C'est le paramètre qui sera modifié. Le CSS est la plupart du temps composés de mots anglais aisés à comprendre: littéralement, background color signifie "couleur d'arrière-plan". On ajoute un tiret pour lier les deux mots et c'est joué. Pas mal de noms de propriétés fonctionnent comme ça: font va régler la police d'écriture (font en anglais), background concerne l'arrière plan, transition règle l'animation entre deux états (changement de couleur au survol par exemple), height et width règlent respectivement la hauteur et la largeur... bref, si vous parlez un peu anglais, vous pourrez essayer de deviner les propriétés les plus simples.

    Attention! Les propriétés ne sont pas toujours une traduction littérale vers l'anglais de leur effet.

    Exemple: pour faire tourner un élément, on passera par la "catégorie" de propriétés transform pour lequel on modifiera le paramètre rotate (en deg -pour degrés), ce qui donnera:

    sélecteur {transform: rotate(Xdeg); }
    où X est la valeur (chiffrée) à modifier. Elle peut être positive ou négative et je ne lui connais pas de limites.

    Pour faire passer un élément au noir et blanc, on utilisera la catégorie filter où on utilisera "grayscale".
    Il existe pas mal d'autres exceptions.

    rgba(R,G,B,A) s'écrit tout attaché. Il est la valeur, c'est à dire ici la couleur et l'opacité du background.
    R = red > quantité de rouge
    G = green > quantité de vert
    B = blue > quantité de bleu
    A = opacité (transparence)

    R, G et B sont compris entre 0 et 255. A est compris entre 0 et 1. C'est très important.
    Il est également possible d'exprimer ces valeurs en %.

    Code pour les angles arrondis du contenu

    #content img {border-radius: Xpx Xpx Xpx Xpx;}

    Ici, le sélecteur est #content img. Vous connaissiez, je pense, le  #content, qui gère le contenu de la page -ici ce qu'il reste une fois qu'on a enlevé le header, le footer et les menus. On ajoute la précision img au sélecteur pour spécifier que le code s'applique aux images.
    Bien sûr, la précision img peut s'ajouter à n'importe quel élément pouvant contenir des images, comme le menu ou le header par exemple.

    On utilise la propriété border-radius, qui sert à définir l'arrondi des angles. 0 n'arrondira pas l'angle, et plus la valeur est grande plus l'arrondi sera fort (en fait, c'est le diamètre du cercle selon lequel on arrondit l'angle qui grandit).

    Les valeurs sont au nombre de 4, une pour chaque coin, et dans cet ordre: haut gauche; haut droit; bas droite; bas gauche. Mettre une seule valeur de X la comptera pour les quatre angles.
    Fun fact: si vous avez un élément carré et que vous mettez en border-radius la longueur d'un des côtés dudit élément, il sera rond. o/

    Code de la modification des pseudos dans la shoutbox

    .menu_shoutbox strong {propriété: valeur;}

    Ici, le sélecteur est .menu_shoutbox, pour la shoutbox. En passant, pour ceux ou celles qui ne sauraient pas, la shoutbox est la petite boîte disponible dans un menu et dans laquelle on peut poster des messages. D'aucuns l'appellent le "chat" mais elle est moins développée qu'un vrai chat en temps réel, donc je ne sais pas si cette appellation est légitime.

    On ajoute strong parce que les pseudos dans la shoutbox sont en gras et qu'en HTML et en CSS, le gras est codé par l'attribut strong. En HTML, il s'agit d'un couple de balises qui sont donc appelées par le sélecteur strong.
    Strong tout seul sélectionne tous les éléments en gras de la page, ici il s'agit d'un couplage de sélecteur: élément sous-élément, comme par exemple pour les titres du menu de gauche: #menu1 .module_menu_titre.

    Ensuite, comme il s'agit d'un élément texte, on pourrait penser qu'on ne peut mettre que des propriétés affectant le texte: font-X (size, family...), color etc. Mais cet élément se trouve dans une boîte qui a bien des bordures, un background, des dimensions etc. donc vous pouvez mettre les propriétés que vous voulez, par exemple sur ce screen vous pouvez voir les pseudos de la shoutbox avec un background de couleur différente.

    PS: liste non exhaustive de sélecteurs Ekla


  • Commentaires

    1
    Mardi 9 Août 2016 à 10:20

    Un article très intéressant ^^, il faudrait qu'un jour je me mette sérieusement au CSS. Ça va faire un an que je suis sur cette plateforme et à part deux trois trucs, je ne m'y connais pas des masses. Je sens que je repasserai souvent sur cet article, merci :).

      • Mardi 9 Août 2016 à 22:20

        Merci à toi, c'est un plaisir :3

        *je savais que cet article servirait à quelqu'un*

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :