Coucou !

On se retrouve encore une fois pour une signa LS Cette fois ci, on se retrouve pour un code plus simple que d'habitude, mais comme j'étais relativement contente du résultat, je me suis dis que certains devraient aimer aussi

Bazzart archivant les LS sans réponses, n'hésitez pas à lâcher un petit mot pour montrer votre soutien même si le code est libre d'accès

Et la dernière petite nouvelle, la seconde version, avec deux images ! En vérité, cette version a été réalisée par ma bonne amie @NyxBanana qui est partie de mon code juste au dessus.



On se retrouve en dessous pour le code et les notes de personnalisation, comme d'habitude

N'oubliez pas de créditer XynPapple

Version 1 :

Code:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet"><style>.PplbWrap{width:130px;height:130px;margin:35px auto}.PplWrap{width:130px;height:130px;transform:rotate(-45deg);overflow:hidden;border:1px solid #fafafa;box-shadow:0 0 14px 0 rgba(41,41,41,.28)}.PplCorp{width:186px;height:186px;margin:-28px;transform:rotate(45deg);font-family:'Playfair Display',serif;color:#fafafa;text-align:center;line-height:186px;font-size:40px;text-shadow: 0px 0px 21px rgba(48, 48, 48, 0.9);}</style><div class="PplbWrap"><div class="PplWrap"><div class="PplCorp" style="background: url(https://78.media.tumblr.com/876b6325c8ba4a2263247e3c9bf3c36f/tumblr_okjp3ov1pd1w3mjmlo1_400.gif); background-size: cover;">vintage</div></div></div>

Version2 :

Code:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet"><style>.PplbWrap{width:265px;height:186px;margin:35px auto;position:relative}.PplWrap{width:130px;height:130px;transform:rotate(-45deg);overflow:hidden;border:1px solid #fafafa;display:inline-block}.PplCorp{width:186px;height:186px;margin:-28px;transform:rotate(45deg);font-family:'Playfair Display',serif;font-weight:900;color:#fafafa;text-align:center;line-height:186px;font-size:40px;text-shadow: 0px 0px 21px rgba(48, 48, 48, 0.9);}</style><div class="PplbWrap"><div class="PplWrap"><div class="PplCorp" style="background: url(https://78.media.tumblr.com/f736f6dee94574bac9c4f92ccbfb3a37/tumblr_p5t0548wHb1qfinneo5_400.gif); background-size: cover; background-position: center;">we are</div></div><div class="PplWrap" style="position:absolute;bottom:0"><div class="PplCorp" style="background: url(https://78.media.tumblr.com/c5ab106b7aef538f2a56db5585769c9b/tumblr_p9u68b81dr1xnh30qo1_540.gif); background-size: cover; background-position: center;">alive</div></div></div>

NOTES:
Cette signature est plutôt simple a personnaliser pour le coup. Mais elle fonctionne beaucoup mieux avec des gif en noir et blanc que des images en couleur par contre.
-Si votre gif est en couleur et que vous souhaitez la mettre en noir et blanc, il suffit de rajouter la ligne suivante dans .PplCorp

Code:

filter: grayscale(1);-webkit-filter: grayscale(1);

-pour modifier le gif, ça se passe dans PplCorp même. Si vous ne trouvez pas, un ctrl+f sur .gif devrait suffire à mettre la main dessus.
-la typo peut naturellement être changée dans .PplCorp. n'oubliez juste pas de l’appeler via google fonts
-évitez dans la mesure de possible de tripoter aux valeurs width et height, tout comme au margin.

C'est tout joli ! Bravo

nice

merci

merci

J'adore

J'adore, merci à toi ! ♥

J'aime cette simplicité, merci du partage

Merci !

J'adore

merci

Trop jolie ! Merci

Superbe

Merci.