28172 sujets

CSS et mise en forme, CSS3

Titre + border

upload/1656863868-84762-capturadeecraa2022-07-03aas17.png Bonjour à tous,

Je souhaite faire un titre comme dans l'image. Quelqu'un pourra me donner un coup de main ?

Merci beaucoup et bonne continuation.
Modifié par Sotam (03 Jul 2022 - 17:58)
Salut,

Un premier post... pas de code... Normalement je n'interviens plus sur ce type de topic...

... mais le challenge me plaisait, alors voilà : CodePen, Emphasized title.

Sans doute pas la solution la plus optimale, mais elle fait le taf et c'est responsive of course.
Modifié par Olivier C (05 Jul 2022 - 04:54)
Bonjour,

Désolé je suis novice dans le forum. Vrai que c'est plus simple et ESSENTIEL d'envoyer le code dans mon message. Donc voici mon code Smiley smile

Merci déjà pour vous réponses !

HTML
<section class="cuirs-peaux pagewidth">
                <div class="text-cuirs-peaux">
                    <h2 class="titre">Cuirs<br><span class="sous-titre">et peaux</span></h2>
                    <p><span class="text-bold">La Fédération Française des Cuirs et Peaux<br></span>est constituée d'entreprises qui représentent plus de 90% du commerce français des cuirs et peaux bruts, et gèrent la matière cuir d'environ 200 abattoirs répartis sur le territoire français. Ces sociétés sont : Négociants collecteurs, Groupes d'Abattages, Experts, Courtiers assermentés.</p>
                    <a href="#"><button class="button-style-blue grow" type="button">En savoir plus</button></a>
                </div>


CSS
.titre{
    font-family: 'ralewaybold';
    font-size: 3.5rem;
    color: #1e4758;
    line-height: 2.5rem;
}

.sous-titre{
    font-family: 'ralewaysemibold_italic';
    font-size: 2.8rem;
    color: #d3ae99;
    font-weight: 100;
    letter-spacing: 4;
}



Voilà, le titre et sous-titre sont en forme mais c'est le contour le problème. J'arrive que à faire un simple contour au tour. Je comprends bien qu'il faut utiliser ::before et ::after mais je ne vois pas comment arriver à ce résultat à 100% .

En espérant votre aide Smiley smile merci beaucoup et une bonne soirée !
Modifié par Sotam (05 Jul 2022 - 00:24)
Modérateur
Bonsoir,

j'avais fait ceci en attendant de voir ton code (basé sur grid) https://codepen.io/gc-nomade/pen/abYvmYM

Cela donnerait ceci avec ton code : https://codepen.io/gc-nomade/pen/vYRNeGy (bon , ce n'est pas le code le plus court ni le plus élegant ... )

les réglages se font sur 
h2:before {
  width: 25vw; /* taille de la partie vide à gauche */
}
h2:after {
min-width: 1.5em;/* taille de la derniere colonne/bordure haute à droite */
}


Cdt
Hello tout le monde,

Uau c'est incroyable toutes ces réponses, vraiment TOP ! Je rêve un jour être si forte en code, mais je pense que la route va être longue, tellement de choses à apprendre ^^mais c'est un énorme plaisir, et avec persistance j'espère réussir.

En tout cas merci de toutes ces réponses. Je vais surtout essayer de comprendre chaque une car pour l'instant il y a pas mal de choses que je ne connais pas encore !

Merci en tout cas, c'est TOP !
Sujet clos
Aller à