Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Codes messages :: Fiches liens
avatar
le Jeu 19 Avr - 11:25

Osomatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Karamatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Choromatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Ichimatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Jyuushimatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Todomatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.



Le code alterne automatiquement l'image à gauche et à droite un bloc sur deux. L'image fait 100 x 100 pixels, elle est automatiquement redimensionnée. Pour changer la couleur du texte dégradé et du bloc dégradé, c'est dans le CSS :

Code:
.family-item:nth-child(2) .family-bloc h2 {
    background: #8b9dd6;
    background: linear-gradient(to bottom, #fff 0%,#8b9dd6 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.family-item:nth-child(2) .family-bloc {
    border-image: linear-gradient(to bottom,#8b9dd6,#fff) 1 100%;
}

La première couleur est un fallback (optionnel) pour les vieux navigateurs qui ne savent pas interpréter les dégradés (si c'est le cas pour votre navigateur, pensez à en changer). Le nth-child(x) est l'ordre d'apparition de l'élément (comprendre ici "nth-child(x)" = "enfant n°x"). On a ici 6 blocs, donc si vous souhaitez en ajouter un avec une couleur différente, il faudra écrire nth-child(7) dans votre CSS.

Vous n'êtes pas obligés de mettre un dégradé pour la couleur, vous pouvez mettre une couleur unie si vous le souhaitez. Pous vous faciliter la vie, un générateur de dégradés : ici.


Code:
<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:900|PT+Sans|Playfair+Display:900');.family * { box-sizing: content-box; }.family {width: 600px;border: 1px solid #e0e0e0;font-family: 'PT Sans', sans-serif;padding: 10px;background: #fcfcfc;position: relative;margin: 0 auto 10px;}.family > div:first-child {border: 1px solid #e3e3e3;padding: 30px;background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png");}.family > div > div {border: 1px solid #dbdbdb;padding: 30px;background: #fff;}.family h1 {margin: 0 0 30px;font-family: 'Playfair Display', serif;border: 1px solid #000;font-family: 'Montserrat', sans-serif;font-size: 25px;text-transform: uppercase;text-align: center;}.family-item {display: flex;margin-bottom: 20px;}.family-item:last-child {margin-bottom: 0px;}.family-item:nth-child(even) {flex-direction: row-reverse;}.family-icon {height: 100px;width: 100px;padding: 5px;border: 1px solid #ccc;margin-right: 20px;}.family-icon img {width: 100px;height: 100px;}.family-item:nth-child(even) .family-icon {margin-right: 0px;margin-left: 20px;}.family-bloc {display: flex;flex-direction: column;height: 100px;align-self: center;border-right: 10px solid violet;padding-right: 10px;border-image: linear-gradient(to bottom,#db6a92,#fff) 1 100%;}.family-item:nth-child(even) .family-bloc {border-left: 10px solid #db6a92;padding-left: 10px;border-right: 0;padding-right: 0;}.family-bloc h2 {line-height: 1.526;font-family: 'Montserrat', sans-serif;margin: 0;font-size: 25px;text-transform: lowercase;font-weight: 900;letter-spacing: -1px;background:#db6a92;background: linear-gradient(to bottom,#fff 0%,#db6a92 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(2) .family-bloc h2 {background: #8b9dd6;background: linear-gradient(to bottom, #fff 0%,#8b9dd6 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(2) .family-bloc {border-image: linear-gradient(to bottom,#8b9dd6,#fff) 1 100%;}.family-item:nth-child(3) .family-bloc h2 {background: #dbe7a6;background: linear-gradient(to bottom, #fff, #dbe7a6 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(3) .family-bloc {border-image: linear-gradient(to bottom,#dbe7a6,#fff) 1 100%;}.family-item:nth-child(4) .family-bloc h2 {background: rgb(219, 106, 146);background: linear-gradient(to bottom, #fff, #9e73c3 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(4) .family-bloc {border-image: linear-gradient(to bottom,#9e73c3,#fff) 1 100%;}.family-item:nth-child(5) .family-bloc h2 {background: #ebcf7b;background: linear-gradient(to bottom, #fff, #ebcf7b 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(5) .family-bloc {border-image: linear-gradient(to bottom,#ebcf7b,#fff) 1 100%;}.family-item:nth-child(6) .family-bloc h2 {background: #bf73b4;background: linear-gradient(to bottom, #fff, #bf73b4 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(6) .family-bloc {border-image: linear-gradient(to bottom,#bf73b4,#fff) 1 100%;}.family-bloc h3 {margin: 5px 0 10px;font-size: 8px;text-transform: uppercase;font-weight: normal;line-height: 11px;color: #aaa;}.family-bloc p {margin: 0;font-size: 10px;line-height: 12px;flex: 1;overflow: auto;text-align: justify;padding-right: 10px;}.family-bloc p::-webkit-scrollbar {width: 2px;}.family-bloc p::-webkit-scrollbar-track {background-color: #efefef;}.family-bloc p::-webkit-scrollbar-thumb {background-color: #ccc;}.family-credit {position: absolute;bottom: -18px;left: 0;}.family-credit a {font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #ccc!important;text-decoration: none!important;}</style>
<div class="family"><div><div><!--
   1ER BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/uRwwsS2.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Osomatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--

2EME BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/pRZg6T1.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Karamatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--

3EME BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/LBYEmoS.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Choromatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--

4EME BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/D1DWl0I.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Ichimatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--

5EME BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/53KcMPr.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Jyuushimatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--

6EME BLOC
--><div class="family-item"><div class="family-icon"><!--
--><img src="https://i.imgur.com/lpGDvcQ.png" /><!--
--></div><div class="family-bloc"><!--
--><h2>Todomatsu matsuno</h2><!--
--><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p><!--
--></div></div><!--
--></div></div><div class="family-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum