-25%
Le deal à ne pas rater :
PC portable GIGABYTE AERO 16 15.6” Ultra HD 120Hz RAM 16 Go
1499 € 1999 €
Voir le deal

Outils de style pour qui qui veut

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Anonymous
Invité
Invité
Jeu 24 Mar - 17:19 (#)

Bon, c'est pas vraiment une galerie, mais je me suis dit que c'était le meilleur endroit pour partager les connaissances que j'ai récupérées quand j'ai voulu faire ma fiche de présentation.
Je vais essayer d'organiser ça correctement, avec ce que ça, puis le code, puis des explications.

Je ne revendique aucun droit particulier sur ces constructions, faites-en ce que bon vous semble, les idées doivent foisonner et proliférer !
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 17:41 (#)

Une lettre manuscrite :


Lorem Ipsum,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue ante lacus, fermentum posuere metus euismod et. Nunc ut suscipit tellus, nec vestibulum magna. Etiam vel urna sed ante egestas viverra. Duis mattis tortor elit, dictum porta eros ultricies a. Quisque euismod dui nisi, finibus rutrum velit laoreet sed. Aliquam mauris tellus, tincidunt id euismod sed, congue aliquam felis. Nulla ullamcorper, sem id consectetur pharetra, ante magna dapibus est, in facilisis ipsum leo eget ligula. Maecenas nec sapien odio. Vivamus pretium, nunc in iaculis ultricies, tortor ex iaculis est, et vestibulum velit quam pellentesque massa. Duis fermentum libero vel nulla tincidunt, quis fermentum enim cursus. Donec in ex non sem semper egestas sit amet ut purus. Curabitur rutrum mauris quis posuere cursus. Vivamus commodo sed dui nec commodo.

Donec tortor nunc, tempor ac risus ac, pretium scelerisque ipsum. Donec leo libero, lacinia non tincidunt ac, dapibus dignissim leo. Ut congue purus id diam accumsan blandit. Cras sem est, cursus vel augue et, bibendum viverra lectus. Nulla bibendum, purus eu facilisis scelerisque, sem mauris semper metus, sed eleifend felis mauris a leo. Duis feugiat eget nibh at sodales. Cras tempus, orci id vestibulum facilisis, orci sem ultricies ligula, eget feugiat nisl purus nec dolor. Quisque ac magna sed metus posuere consequat at vitae ipsum. Phasellus augue nulla, consectetur et justo et, laoreet lacinia orci. Vestibulum sollicitudin tincidunt arcu, non accumsan est convallis sed. Nam a tortor vitae augue luctus vehicula. Morbi vel tincidunt velit, quis feugiat lorem. Suspendisse vitae lorem pharetra, sollicitudin leo non, fermentum tortor.

Pellentesque elementum ut felis vitae volutpat. Praesent ligula nisl, vehicula eu iaculis vitae, congue vel neque. Curabitur aliquet eget nisi et ullamcorper. Sed euismod condimentum turpis, ut varius leo tempus in. Maecenas ultricies nulla turpis, nec posuere mauris convallis in. Nulla suscipit bibendum ligula, sit amet volutpat ipsum vestibulum vel. In tincidunt pulvinar odio, vel gravida nisl tempor vitae. Fusce consequat lectus id dolor efficitur fringilla. Pellentesque lacinia velit quam, eget malesuada lorem mollis et. Fusce viverra lacus id nisi iaculis, ut blandit nunc tristique. Praesent placerat venenatis orci, a commodo est euismod sed. Quisque pharetra, erat a egestas tempor, erat risus euismod dui, nec tempus justo ipsum eget lacus. Curabitur libero ante, euismod nec lorem sed, euismod fermentum erat. Aenean condimentum tellus magna, ac congue diam iaculis ut. Nunc tincidunt placerat tincidunt. Praesent purus turpis, ullamcorper tempus ex et, fringilla fermentum massa.

Suspendisse ultrices, ipsum at molestie eleifend,
Sed nec mauris elit.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 17:43 (#)

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" rel="stylesheet"><center><div class="sbjt-body"><div style="height: 700px; overflow-y: scroll; margin: 25px 0px 0px 25px;"><div style="font-family: 'La Belle Aurore', cursive; font-size: 18px; margin-right: 20px">

[justify]Taper le texte de votre lettre ici ![/justify]
[right]Ajouter la signature ici ![/right]
</div></div></div></center>
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 17:48 (#)

Là, c'est assez simple, tout tient en 2 artifices :
1. Un cadre qui reste sur une proportion proche d'une feuille de papier A4 (c'est le div avec une hauteur de 700, et les marges qui vont bien)
2. Un changement de police de caractères. Là, j'ai pris La Belle Aurore, qui appartient à Google. Attention, si vous voulez changer, il faut le faire à deux endroits : dans le div style mais aussi dans le link  au début, qui dit où trouver la police en question.

Pour plus de polices de caractères, vous pouvez aller là : https://fonts.google.com/
Choisissez une police, puis cliquez sur "select this style"
Un panneau apparaît à droite et vous propose le "link" à ajouter en début de message pour faire l'import, et le "style" à mettre dans le div où il y aura le texte.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:00 (#)

Un diplôme :


Outils de style pour qui qui veut Luo82VJD_o
Outils de style pour qui qui veut X66eYtJT_o

Outils de style pour qui qui veut MRbTstUc_o

Université Nationale
d'Irlande de Galway

Après délibération, le Jury octroie à
M. Michael Adamson
le titre de Docteur en Théologie et Anthropologie avec mention honorable, pour faire valoir ce que de droit.
Outils de style pour qui qui veut BpVP6kuI_o


Le Président du Jury
Dr Patrick Kelly


Patrick Kelly

Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:05 (#)

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<div style="margin: 0px 75px 0px"><div style="background-color: white; border:1px solid black; height: 510px; max-width: 360;"><div style="margin: 10px 20px 20px;"><div style="width: 100%; display: table;"><div style="display: table-row"><div style="height: 80px; width: 155px; display: table-cell;" align="center">[img(48px,80px)]https://images2.imgbox.com/9b/d2/Luo82VJD_o.png[/img]</div><div style="height: 80px;display: table-cell;"><div style="height: 80px; display: flex; justify-content: center; align-items: center;">[img]https://images2.imgbox.com/de/40/X66eYtJT_o.png[/img]</div></div></div></div>
[center][img(168px,75px)]https://images2.imgbox.com/3e/18/mRbTstUc_o.gif[/img]
<div style="font-family: 'Monsieur La Doulaise', cursive; font-size: 22px;"><br>Université Nationale
d'Irlande de Galway</div>
<div style="font-family: 'Monsieur La Doulaise', cursive; font-size: 18px;">Après délibération, le Jury octroie à
M. Michael Adamson
le titre de Docteur en Théologie et Anthropologie avec mention honorable, pour faire valoir ce que de droit.</div>[/center]
<div style="width: 100%; display: table;"><div style="display: table-row"><div style="width: 115px; display: table-cell;" align="center"><div style="height: 160px; display: flex; justify-content: center; align-items: center;">[img(64px,64px)]https://images2.imgbox.com/0b/46/bpVP6kuI_o.png[/img]</div></div><div style="display: table-cell; vertical-align: top;">
<div style="font-family: 'Monsieur La Doulaise', cursive; font-size: 18px;">
[right]Le Président du Jury
Dr Patrick Kelly[/right]
</div><br><div style="font-family: 'La Belle Aurore', cursive; font-size: 26px;">
[right]Patrick Kelly[/right]
</div></div></div></div>
</div></div></div>
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:08 (#)

J'ai laissé le texte initial et les images pour qu'on puisse comprendre ce qui est positionné où, car ça a été une horreur à faire avec des tableaux, et des flex pour pouvoir centrer verticalement car des gens ont décidé que centrer verticalement, ça ne devait pas être possible sur internet...

Pensez à héberger les images sur un site dédié et à éviter le hotlink, c'est rarement apprécié, et régulièrement bloqué.

Pour la police, il me fallait un truc hyper pompeux, comme les universités aiment bien en faire, j'ai pris Monsieur La Doulaise, qui remplit tout à fait ce rôle, avec des arabesques de partout, jusqu'à ce que ça devienne illisible.

Si vous voulez changer la taille des cases dans le tableau, c'est simple, la partie de gauche a une taille fixe, et la partie de droite s'ajuste pour compléter l'espace disponible.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:13 (#)

Un email :



Date:
12 juil. 2009
CC:
.
CCi:
.
Sujet:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue ante lacus, fermentum posuere metus euismod et. Nunc ut suscipit tellus, nec vestibulum magna. Etiam vel urna sed ante egestas viverra. Duis mattis tortor elit, dictum porta eros ultricies a. Quisque euismod dui nisi, finibus rutrum velit laoreet sed. Aliquam mauris tellus, tincidunt id euismod sed, congue aliquam felis. Nulla ullamcorper, sem id consectetur pharetra, ante magna dapibus est, in facilisis ipsum leo eget ligula. Maecenas nec sapien odio. Vivamus pretium, nunc in iaculis ultricies, tortor ex iaculis est, et vestibulum velit quam pellentesque massa. Duis fermentum libero vel nulla tincidunt, quis fermentum enim cursus. Donec in ex non sem semper egestas sit amet ut purus. Curabitur rutrum mauris quis posuere cursus. Vivamus commodo sed dui nec commodo.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:17 (#)

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@200&display=swap" rel="stylesheet">
<div style="font-family: 'Alumni Sans', sans-serif; font-size: 18px;">
<div style="width: 100%; display: table;margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">Date:</div><div style="display: table-cell;"><div style="border:0px solid black;">METTRE LA DATE ICI</div></div></div></div><div style="width: 100%; display: table;margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">De:</div><div style="display: table-cell;"><div style="border:0px solid black;">METTRE L'EXPEDITEUR ICI</div></div></div></div><div style="width: 100%; display: table; margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">A:</div><div style="display: table-cell;"><div style="border:1px solid black;">METTRE LE OU LES DESTINATAIRES ICI</div></div></div></div><div style="width: 100%; display: table; margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">CC:</div><div style="display: table-cell;"><div style="border:1px solid black;">METTRE LES PERSONNES EN COPIE DE MAIL ICI[color=#ffffff].[/color]</div></div></div></div><div style="width: 100%; display: table; margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">CCi:</div><div style="display: table-cell;"><div style="border:1px solid black;">METTRE LES PERSONNES EN COPIE CACHEE ICI[color=#ffffff].[/color]</div></div></div></div><div style="width: 100%; display: table; margin-bottom: 5px;"><div style="display: table-row"><div style="width: 35px; display: table-cell;" align="left">Sujet:</div><div style="display: table-cell;"><div style="border:1px solid black;">METTRE LE SUJET DE MAIL ICI</div></div></div></div><div style="border:1px solid black;"><div style="margin: 0px 5px;">METTRE LE CORPS DU MAIL ICI.
</div></div></div>
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:19 (#)

Ici, l'idée, c'est de mettre des boîtes partout pour faire interface utilisateur de boîte mail des années 2000.
A noter que j'ai mis des petits points blancs à la fin de CC et CCi, c'est pour permettre d'avoir quand-même du texte dans le cas où il n'y aura pas personne indiquée dans ce champ. Sans texte, la boîte est vide, et a tendance à faire n'importe quoi.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:23 (#)

Un article de journal :


LES PROCESSIONS DOMINICALES,
UN NOUVEAU SPORT LOCAL.
Si vous étiez dans les rues de Mooringsport dimanche dernier, vous avez certainement aperçu une longue procession chantant et priant sur son passage. Cette initiave du Père Adamson a attiré de nombreux curieux qui sont sortis de chez eux pour regarder l'événement en se demandant ce que cela pouvait être. "On a cru à un débarquement de réfugiés, mais on reconnu nos voisins, alors ça ne pouvait pas être ça." nous confie une habitante. "Depuis la révélation, il se passe tellement de choses bizarres qu'on ne se pose même plus de questions." nous indique un passant. Mais personne ne semble savoir de quoi il s'agit exactement. La confusion chamboule de notre petite ville.
Nous avons mené notre enquête auprès de l'instigateur de cette marche. Le Père Adamson nous explique qu'il "s'agit avant tout de renouer avec des traditions qui ont été perdues dans les dernières générations et de recréer un lien social sous la forme d'une activité accessible à tous et à toutes". La procession relie les trois églises de la ville et mêle donc des croyants de confessions différentes. Selon lui, la période est compliquée pour
pour beaucoup de citoyens et le tissu social est plus distendu que jamais. En organisant cette marche hebdomadaire, il espère bien montrer aux citoyens de Mooringsport qu'ils ne sont pas isolés et que l'église est toujours un soutien très présent, que l'on soit croyant ou non. "Nous invitons toute personne qui le souhaite à nous rejoindre. Cette procession est déjà œcuménique, et se veut aussi inclusive et ouverte à tous et à toutes".
Mais certaines personnes restent plutôt méfiantes. "Je ne sais pas, je ne vois pas en quoi marcher va changer quoi que ce soit, et de toute façon, le dimanche, je fais un barbecue chez mon cousin, c'est notre habitude depuis des années, et on ne va pas changer ça" nous explique un autre habitant.
Le Père Adamson ne compte pas en rester là, il nous a indiqué vouloir contacter les paroisses des villes alentours pour organiser des processions similaires. Notre petite Mooringsport serait-elle une lanceuse de tendances dans le monde religion ? Seul l'avenir nous le dira.
- Kathreen James
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:28 (#)

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap" rel="stylesheet"><div style="background-color: white;"><div style="margin: 25px"><div style="font-family: 'Old Standard TT', serif; font-size: 20px;margin-top: 5px;">
[center]METTRE LE TITRE ICI[/center]
</div><div style="height: 10px; display: flex; justify-content: center; align-items: center;"><div style="width: 50%; border:1px solid black;"></div></div><div style="font-family: 'Old Standard TT', serif; font-size: 12px;"><div style="width: 100%; display: table; margin-bottom: 5px;"><div style="display: table-row"><div style="width: 50%; display: table-cell;"><div style="margin: 5px 5px 5px 0px">METTRE LE TEXTE DE LA COLONNE DE GAUCHE ICI[color=#ffffff]METTRE LE PREMIER MOT DE LA COLONNE DE DROITE ICI AUSSI POUR L'AJUSTEMENT[/color]</div></div><div style="display: table-cell;"><div style="margin: 5px 0px 5px 5px">METTRE LE TEXTE DE LA COLONNE DE DROITE ICI AVEC SON PREMIER MOT À NOUVEAU
</div></div></div></div></div></div></div>
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:35 (#)

Ok, là, c'est juste deux colonnes, un fond blanc, des marges.
Seul truc relou, c'est qu'on ne peut pas forcer l'ajustement du texte en largeur s'il n'y a pas un retour à la ligne à cause du mot de trop.
C'est pour ça que dans le code, le premier mot de la colonne de droite doit aussi être en blanc dans la colonne de gauche, à la fin.

En pratique, ce que je fais, c'est que je coupe plus ou moins mon texte en deux (55% des lettres à gauche et le reste à droite). Je poste mon message, et je regarde ce qui déborde à gauche. Je reprends la ligne de trop, et je la déplace au début de la colonne de droite, puis je recopie le premier mot de la colonne de droite en blanc à la fin de la colonne de gauche. Ca fait le taf, même s'il existe probablement une meilleure façon de faire.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:42 (#)

Un échange de SMS :

Vous vous occupez de nos amis ce soir ?
Je vous ai envoyé l'adresse par mail
Je l'ai bien reçue
Oui, on termine les préparatifs
Tenez-moi au courant
Ok, départ dans quelques minutes, normalement
Retard pour le départ
J'espère que nos amis ne vont pas lever le camp
Peu de risques
On m'a assuré qu'ils seraient occupés encore une bonne heure
Plus que nécessaire
On part
Je ne pourrai pas répondre en conduisant
Tenez-moi au courant
Arrivés
On commence
Trop calme à mon goût
Profitez-en
Ca pourrait devenir plus animé très bientôt
Alors ?
Qu'est-ce qui se passe ?
Répondez-moi, s'il-vous-plait
C'est bon, fausse alerte
C'est terminé
Ca prend très rapidement
ROutils de style pour qui qui veut 1f487 ut Outils de style pour qui qui veut 1f335
??
Je ne comprends pas ce dernier message
Pardon, mauvaise manipulation
On s'assure que c'est stable et on part
Comment vont nos "amis" ?
Mouvement de panique
Mais personne ne sort
Ne traînez pas trop dans le coin
10 min pour être sûrs
C'est bon, le gros des troupes quitte les lieux
Félicitations
Quelle est la suite ?
Relève toutes les 6h
Pour observation constante
et colmatage de brèches si besoin
Pendant combien de temps ?
72h devraient suffire
Les flammes vont vider les stocks d'eau
On peut survivre 3 jours sans eau
Survivre oui
être capable d'agir, non
on entrera nettoyer à la fin
Essayez d'être discrets
On ne doit pas être vus
Comme toujours
On va retourner en masse sur les lieux
pour un rituel particulier
afin de "marquer" nos amis
Dans quel but ?
Ils semblent essayer de creuser des brèches
avec ce marquage
il sera possible de retrouver des fuyards potentiels
Alors ? Ca fait 3 jours
Des nouvelles ?
Bâtiment fouillé
Pas de survivant
Parfait
On en reparle de vive voix
Mais des marques subsistent
Soit des fuyards, soit une interférence
Il faut régler ça
On en reparle de vive voix.
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 18:57 (#)

Alors, déjà, le cadre du téléphone lui-même :

Code:
<div style="font-family: helvetica; display: flex ; flex-direction: column; align-items: center;"><div style="background: white"><div style="width: 300px; height:480px; border: solid 1px #EEE; display: flex; flex-direction: column; padding: 10px; overflow-y: scroll;">METTRE LE CONTENU DES MESSAGES ICI</div></div></div>

Le contenu va être composé de blocs. Soit des blocs de messages reçus soit des blocs de messages envoyés. Un bloc, ce sont plusieurs messages envoyés rapidement que le téléphone va regrouper. Entre deux blocs, il y aura un espace pour montrer le temps qui s'écoule. Si vous avez envie, vous pouvez rajouter une notion de temps à cet endroit, en petit. Moi, j'avais pas le courage.

Bloc messages reçus :
Code:
<div style="align-items: flex-start; margin-top: 30px; display: flex; flex-direction: column;">METTRE LES MESSAGES RECUS ICI</div>

Ensuite, les messages reçus sont différents selon qu'ils sont seul (message avec bords ronds partout), ou s'ils sont en début de bloc (bord rond en haut seulement), en milieu de bloc (bords moins ronds en haut et en bas), ou en fin de bloc (bord rond en bas seulement).

Message reçu tout seul dans son bloc :
Code:
<div style="margin-right: 25%; background-color: #eee; position: relative;border-radius: 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block;">METTRE LE TEXTE ICI</div>

Message reçu en début de bloc :
Code:
<div style="margin-right: 25%; background-color: #eee; position: relative;border-radius: 20px 20px 20px 5px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block;">METTRE LE TEXTE ICI</div>

Message reçu en milieu de bloc :
Code:
<div style="margin-right: 25%; background-color: #eee; position: relative;border-radius: 5px 20px 20px 5px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block;">METTRE LE TEXTE ICI</div>

Message reçu en fin de bloc :
Code:
<div style="margin-right: 25%; background-color: #eee; position: relative;border-radius: 5px 20px 20px 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block;">METTRE LE TEXTE ICI</div>

De la même façon, pour les messages envoyés :

Bloc messages envoyés :
Code:
<div style="align-items: flex-end; margin-top: 30px; display: flex; flex-direction: column;">METTRE LES MESSAGES ENVOYES ICI</div>

Message envoyé tout seul dans son bloc :
Code:
<div style="border-radius: 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block; color: white; margin-left: 25%; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; position: relative;">METTRE LE TEXTE ICI</div>

Message reçu en début de bloc :
Code:
<div style="border-radius: 20px 20px 5px 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block; color: white; margin-left: 25%; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; position: relative;">METTRE LE TEXTE ICI</div>

Message reçu en milieu de bloc :
Code:
<div style="border-radius: 20px 5px 5px 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block; color: white; margin-left: 25%; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; position: relative;">METTRE LE TEXTE ICI</div>

Message reçu en fin de bloc :
Code:
<div style="border-radius: 20px 5px 20px 20px; padding: 8px 15px; margin-top: 1px; margin-bottom: 1px; display: inline-block; color: white; margin-left: 25%; background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%); background-attachment: fixed; position: relative;">METTRE LE TEXTE ICI</div>
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Jeu 24 Mar - 19:01 (#)

Voilà, si vous regardez dans le détail, vous remarquerez que les blocs reçus et envoyés servent juste à dire qu'il faut sauter 30 pixel avant, et qu'il faut soit tout aligner à gauche, soit tout aligner à droite.

Ensuite, la différence entre les messages seuls, au début, au milieu ou en fin de bloc, c'est juste le border-radius. C'est le truc qui dit qu'il faut faire des ronds sur les coins. On donne le rayon du cercle à tracer. Donc plus le nombre est grand, plus ça va faire un bord arrondi, alors que plus il est petit, plus le bord se rapprochera d'un rectangle. Il décrit les coins dans le sens des aiguilles d'une montre, en commençant par en haut à gauche.

Les div pour les messages envoyés sont un peu plus long car il y a cet effet de gradient de couleur de fond, que vous pouvez modifier si vous voulez d'ailleurs.
Revenir en haut Aller en bas
Contenu sponsorisé
(#)

Revenir en haut Aller en bas
Page 1 sur 1
 Sujets similaires
-
» Requiem pour un chat [Jer]
» Ascenseur pour l'échafaud | Elinor & Heidi
» (M) Jenaro Silva - Vampire, nettoyeur pour l'Essaim (Réservé)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
-
Sauter vers: