J'aurais besoin d'un code pour mes DDN officielles du trône d'Amphitrite. Il devra avoir l'apparence d'un parchemin qu'on peut coller à un tableau (inutile de faire trop compliqué). Il peut y avoir un cadre déroulant à l'intérieur pour éviter que le texte ne déborde. J'aimerai aussi une police type manuscrite pour garder le côté annonce faite à la main.
Merci d'avance !
Comme promis sur Discord, voici le petit code que je t'ai préparé :
- Code:
<!-- DEBUT DU CSS --><style>/**
Ci-dessous lien Google Font
**/@import url("https://fonts.googleapis.com/css2?family=Pacifico&family=Patrick+Hand&display=swap");/**
Ci-dessous début des variables modifiables
**/:root{ /**
Ci-dessous police de titre
**/ --titre: "Pacifico", cursive; /**
Ci-dessous police de texte
**/ --texte: "Patrick Hand", cursive;/**
Ci-dessous couleur du texte
**/ --couleur: #000; /**
Ci-dessous le reste du CSS
**/}.ddn-oswald{box-sizing: border-box; width: 100%; max-width: 700px; height: 830px; background: url("https://cdn.discordapp.com/attachments/826829167558524928/856883201090912256/fdfd98c4-8634-4810-8c23-e4d6d5317f75.png") top center no-repeat; margin: 0 auto; padding: 130px 160px; font: 400 22px/1.4 var(--texte); color: var(--couleur);}.ddn-oswald article{overflow-y: auto; height: 100%; padding: 0 10px; scrollbar-width: thin;}.ddn-oswald article::-webkit-scrollbar{width: 8px;}.ddn-oswald h2{display: inherit; margin: 10px 0 20px; position: inherit; padding: inherit; text-shadow: none; text-align: center; font: 1.5em/1.4 var(--titre); text-transform: inherit; letter-spacing: inherit;}</style><!--
--><main class="ddn-oswald"><article><!--
Ci-dessous le titre de la DDN
--><h2>Un joli titre un peu long parce qu'il faut tester quand on met plus de texte</h2><!--
Ci-dessous le texte
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, ducimus soluta inventore voluptas eius saepe. Sed, dicta facere? Incidunt rem autem sed rerum. Eius, doloribus molestias. Nam ducimus ab incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores mollitia eius corporis eaque distinctio ipsam nulla libero quibusdam doloribus nesciunt unde aliquid reiciendis, in blanditiis dolorem fuga. Beatae, est. Illo, obcaecati doloribus ullam cum eveniet quisquam ex sit consectetur nobis officiis autem, eligendi assumenda consequuntur voluptate non possimus tenetur libero molestias et quos! Ullam placeat cupiditate et qui repellendus.Eius suscipit cum quae minima atque, facilis molestiae porro. A sapiente iure, repellat vitae tempora, autem id consequatur explicabo est ea facilis incidunt assumenda voluptate dolorum voluptates qui nemo nulla? Dolor similique, culpa nesciunt illo sunt officia odio porro molestias earum deserunt veritatis accusantium et officiis necessitatibus aliquid dignissimos fugiat soluta. Provident blanditiis iste eveniet rem iusto assumenda impedit mollitia.Asperiores debitis inventore, nobis aspernatur minima provident maxime iste molestias recusandae a nisi dicta esse deserunt dolorum ex nesciunt nostrum omnis repellat corrupti, hic excepturi. Quam saepe maxime laborum molestiae.<!--
--></article></main>
Je t'ai laissé la possibilité de mettre deux polices différentes et de choisir la couleur du texte. Je suis évidemment ouverte aux modifications ! N'hésite pas non plus à me poser des questions si tu es perdu sur l'utilisation de ce code.
Demande à clôturer
|
|