Aide à la finalisation d'une belle en-tête sans ligne droite

Bonjour
Bon je galère depuis quelques semaines pour réaliser un en-tête/menu original en étant obligé (à priori) de partir sur un code html déjà généré par joomla

J'aurais notamment souhaité avoir sur le bas du menu, un arrondi comme sous la mise en avant du texte "vcsdsdsd" avec si possible un petit dégradé avec la même variable var(--cassiopeia-color-primary);
https://cochanger.eu/autres/cochanger-eu

Est-ce que quelqu'un ayant de meilleure compétence webdesign que moi, pourrait m'aider à améliorer cet en-tête/menu !?
Modifié par HDcms (01 Jun 2022 - 17:39)

A la ligne 41 de cochanger-cat-art.css, ajouter la classe .container-header:after aux deux autres classes déjà présentes :

/* accroche */
.container-header:after
, .accroche:after
, .encadre:after {
  /* les règles... */
}

Personnellement je mets deux fois les points aux pseudo éléments comme préconisé pour les diférencier des pseudos classes d'états -> ::after

Bonjour
Ok merci
En progression !
J'ai déjà vu ::after , que j'ai donc mis, mais sans bien comprendre la différentiation puisque cela fonctionne.

Sinon pour la règle, je n'arrive pas à trouver comment faire une progression à partir de la couleur de base du site et non du gris !

Actuellement j'ai

.container-header::after
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 1rem;
	width:100%;
	background-image: radial-gradient(farthest-side at top center, var(--cassiopeia-color-primary), #888, #fff);
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;	
}

Bonjour
Pas d'avis/correction sur ce que j'ai mis?
@+

Bonsoir,

Peut-etre qu'en reprenant les deux gradient ? et en reduisant celui de l'arrondi pour qu'il soit moins marqué :

background-image: radial-gradient(farthest-side at top center,transparent , #8888 , #fff ),linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
background-size: 100% 50%;/* ou hauteur a 0.5rem au lieu de 1rem ? */
background-position: bottom;

autre possibilité , passer le gris opaque en un orange sombre opaque ?

Cdt
Modifié par gcyrillus (07 Jun 2022 - 19:18)

gcyrillus a écrit :
Bonsoir,

Peut-etre qu'en reprenant les deux gradient ? et en reduisant celui de l'arrondi pour qu'il soit moins marqué :

background-image: radial-gradient(farthest-side at top center,transparent , #8888 , #fff ),linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
background-size: 100% 50%;/* ou hauteur a 0.5rem au lieu de 1rem ? */
background-position: bottom;

autre possibilité , passer le gris opaque en un orange sombre opaque ?

Cdt

Tiens le webmaster* d'alsacreations.com (*ça se dit encore webmaster ?) !
Il faudrait que le filigrane ("CSS" ici) des pavés de code il reste fixe dedans et qu'il ne défile pas horizontalement avec le code...
Ca me chiffonne

Le survol des items du menu "frétillent" (se décalent) toujours au survol.
Tu aurais le CSS d'origine et lisible du :hover de ces items ? (nav-item:hover ou a:hover je présume) C'est compliqué à trouver en minifié.

Bonjour
Merci à vous pour ces suggestions.
1/ couleur, dégradé et arrondu
Cela s'améliore (pas mieux en passant hauteur a 0.5rem au lieu de 1rem)
Mais justement ce que j'aurai aimé ces arrondis plus prononcé.
Bon finalement, je pense que c'est trop difficile.
Est-ce possible d'avoir le css ou solution avec une seule couleur pour l'en tête et un "grand" arrondi en dessous ?

2/ frétillement insupportable au survol item de menu !
Là aussi je ne sais plus quoi faire.
Je n'ai pas trouvé dans le fichier principal pour nav-item:hover
Pour l'autre, j'ai du mal à comprendre, je mets donc ce que j'ai trouvé qui peut peut-être interféré ?

@media (max-width: 991.98px) {
  .container-header .mod-menu > li.active > a, .container-header .mod-menu > li.active > span,
.container-header .mod-menu > li > a:hover {
    text-decoration: underline;
  }
}
.container-header .mod-list li a:hover {
  text-decoration: none;
}
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before, .container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before {
  right: 0;
  left: 0;
  background: white;
}
@media (min-width: 992px) {
  .container-header .metismenu > li.level-1.active > a, .container-header .metismenu > li.level-1.active > button,
.container-header .metismenu > li.level-1 > a:hover,
.container-header .metismenu > li.level-1 > button:hover {
    text-decoration: none;
  }
}

Re
Bon mon fil dérive, je vais probablement ouvrir un autre fil sur ce truc qui frétille au survol car tellement désagréable
Mais si je pars sur
1/ couleur, dégradé et arrondi
Mais justement ce que j'aurai aimé ces arrondis plus prononcés.
Bon finalement, je pense que c'est trop difficile.
Quel css ou solution pour avoir une seule couleur pour l'en tête et un "grand" arrondi en dessous ?
Modifié par HDcms (09 Jun 2022 - 19:49)

Bonsoir,
Si tu as une image à montrer pour l'arrondi que tu souhaites, cela serait utile à ton soucis. Un gradient n'est peut-être pas le plus opportun.
Cdt
Modifié par gcyrillus (09 Jun 2022 - 22:58)

Bonjour
@gcyrillus
Merci pour ta proposition. Effectivement, je me rabattrai sur celà en dernier recours, même si je me demande si cela passera partout.
Après en fait, l'effet est déjà intéressant. Je suis étonné qu'il n'y ait pas d'autre solution CSS, que le gradient, pour faire un arrondi d'une seule couleur ?
@+