• Déco texte

    Beaucoup ont paramétré le texte des commentaires ou de leurs articles avec la première lettre en taille, style ou couleur différentes par un code permanent, dans le CSS du blog.

    Je préfère utiliser ce genre de code au coup par coup... mais c'est un choix !

    Pour cela, il faut utiliser le sélecteur Première lettre en CSS: ::first-letter {font-size: 200%; color: #8A2BE2;}
    Les sélecteurs sont précédés d'un double deux points.

    Sans paramètre spécifique, la première lettre utilisera la police du texte, selon les attributs que vous lui définirez; pour voir une police externe, il faut enregistrer l'article, publié ou non, car il doit aller chercher sur le net les paramètres de cette police; votre article n'affichera qu'une police par défaut en prévisualisation.

    Le liseré de certains exemples semble désormais être lu par le navigateur Firefox (-webkit-text-stroke: 1px black;) mais il fut parfois réactualiser la page pour qu'il soit bien interprété.

    Vous pouvez aussi donner à cette première lettre une police et un style différent de la suite du texte; voyons quelques exemples:


    Premier exemple avec police Ekla

    <p id="t1">Premier exemple avec police Ekla</p>
    <style><!--
    #t1{text-align:center; font-family:comic sans ms; font-size:14pt;}
    #t1::first-letter {font-weight: bold;color: red; font-size:200%;}
    --></style>


     

    Second exemple avec police Ekla et liseré

    <p id="t2">Second exemple avec police Ekla et liser&eacute;</p>
    <style><!--
    #t2{text-align:center; font-family:comic sans ms; font-size:14pt;-webkit-text-stroke: 1px black;}
    #t2::first-letter {font-weight: bold;color: red; font-size:300%;}
    --></style>


    Nous pouvons donner à cette première lettre, une police externe, qui sera ici de chez Google Fonts car elles sont très simples à mettre en place sur un article ou partie(s) d'article.

    Le principe est de récupérer sur ce site, l'adresse de la police, à placer en CSS et le nom de la police correspondante; c'est un autre sujet sur lequel je pourrais revenir, le cas échéant.


    Police Google Bungee Shade.
    sans liseré.

    <p id="t3">Police Google Bungee Shade.</p>
    <style><!--
    @import 'https://fonts.googleapis.com/css?family=Bungee+Shade';
    #t3{ text-align:center; font-family:comic sans ms; font-size:14pt;}
    #t3::first-letter {font-weight: bold;color: red; font-size:300%; font-family: 'Bungee Shade', cursive;}
    --></style>


    Police Google Bungee Shade.
    avec liseré.

    <p id="t3">Police Google Bungee Shade.</p>
    <style><!--
    @import 'https://fonts.googleapis.com/css?family=Bungee+Shade';
    #t3{text-align:center; font-family:comic sans ms; font-size:14pt;-webkit-text-stroke: 1px black;}
    #t3::first-letter {font-weight: bold;color: lime; font-size:300%; font-family: 'Bungee Shade', cursive;}
    --></style>


    Vous pouvez utiliser plusieurs polices externes dans un même article, en indiquant leur adresse et leur nom dans chaque paragraphe, en début de lignes CSS.


    Police Google Diplomata
    avec ombre ajoutée.

    <p id="t5">Police Google Diplomata avec ombre ajout&eacute;e.</p>
    <style><!--
    @import 'https://fonts.googleapis.com/css?family=Diplomata+SC';
    #t5{text-align:center; font-family:comic sans ms; font-size:14pt;-webkit-text-stroke: 1px black;}
    #t5::first-letter {font-weight: bold;color: lime; font-size:300%; font-family: 'Diplomata SC', cursive; text-shadow:2px 2px 5px black;}
    --></style>


    Police Jacques Francois Shadow

    <p id="t6">Police Jacques Francois Shadow</p>
    <style><!--
    @import 'https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow';
    #t6{ text-align:center; font-family: 'Jacques Francois Shadow', cursive; font-size:14pt; color:black; font-weight: bold;}
    #t6::first-letter {font-weight: bold;color: yellow; font-size:300%; font-family: 'Jacques Francois Shadow', cursive; text-shadow:2px 2px 5px black;}
    --></style>