[RÉGLÉ] Une question de css pour un style avec div.

[Isabelle62]

Bonjour à tous,

je sais que ce forum est consacré à Joomla mais je pose notre question malgré tout.
Elle est relative au css. Nous ne sommes pas spécialistes du tout. Nous avons trouvé une solution mais elle est lourde et complexe. Elle fonctionne bien.

Nous avons créé un nouveau style pour nos articles de blog. Son but est de mettre en avant une phrase importante qui doit être bien visible.

Voici le style :

hr.gp-txt-important03-top {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
color:#333399;
width: 50%;
margin-top: 2.0em;
margin-bottom: 2.0em;
}

hr.gp-txt-important03-bottom {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
color:#333399;
width: 50%;
margin-top: 2.0em;
margin-bottom: 2.0em;
}


.gp-txt-important03 {
font-family: 'Raleway';
font-size: 1.7em;
font-weight: bold;
width: 70%;
margin: auto;
text-align:center;
}

Voici comment nous l'intégrons dans nos pages HTML :

<hr class="gp-txt-important03-top">
<div class="gp-txt-important03">
Ceci est une phrase importante.
</div>
<hr class="gp-txt-important03-bottom">

Comme vous le voyez c'est un peu lourd. Nous pensons qu'il est possible de juste écrire :

<div class="gp-txt-important03">
Ceci est une phrase importante.
</div>

Mais nous n'arrivons pas à trouver la syntaxe.
Si quelqu'un pouvait nous donner la solution ce serai super.

Merci par avance pour votre aide
Isa

[pmleconte]

Bonjour,

Cela doit pouvoir se régler avec des ::before et ::after.

.gp-txt-important03 {
font-family: 'Raleway';
font-size: 1.7em;
font-weight: bold;
width: 70%;
margin: auto;
text-align:center;
}
.gp-txt-important03::before {
content:'';
display:block;
margin-left:auto; /* centrage */
margin-right:auto; /* centrage */
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
color:#333399;
width: 50%;
margin-top: 2.0em;
margin-bottom: 2.0em;
}
.gp-txt-important03::after {
content:'';
display:block;
margin-left:auto; /* centrage */
margin-right:auto; /* centrage */
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
color:#333399;
width: 50%;
margin-top: 2.0em;
margin-bottom: 2.0em;
}

Pascal

[tataye]

cherche des tutos sur le "gradient border-color"
en css, tu n'auras qu'un seul bloc, avec un border-top et un border-bottom , le tout en dégradé.
ce sera le code le plus court

[Isabelle62]

Bonjour à tous les deux,

nous vous remercions pour vos deux messages. C'est très gentil d'avoir répondu aussi vite.

Nous avons adpoté la solution de Pascal. Elle fonctionne parfaitement bien. C'est super et plus simple à utiliser en HTML.

Merci aussi à vous Papaye. Nous avions regardé ce dont vous parlez mais nous n'avons jamais réussi à le mettre en oeuvre. Les tutos sont souvent complexes et couvrent le domaine en général.
Nous voulions quelque chose de simple, d'élégant, de particulier.

Merci à vous deux pour votre aide.
Bonne journée
Isa