[Réglé] Effet Glow sur un texte dans votre page

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.2

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Effet Glow sur un texte dans votre page

Messagepar Morph29 » 07 Mai 2017 à 13:16

Bonjour,

Je fait partager un petit bout de code si ça intéresse quelqu’un :
J'ai voulu mettre un effet glow sur le titre de mon site au passage de la souris.

Dans overall_header.html :

Code: Tout sélectionner
<h6>{SITENAME}</h6>


puis dans colour.css

Code: Tout sélectionner
h6 {
	color: rgba(255, 138, 34, 1); 
}

Je préfère le RGB pour éventuellement des effet de transparence, le dernier chiffre 1 si vous le mettez inférieur entre 0 et 1 vous aurez une transparence plus ou moins importante.

et enfin dans le commun.css
Code: Tout sélectionner
h6 {
	/* Titre de votre forum */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 4em;
	font-size:4em;
        color: #FFFFFF;
   }
   
h6:hover {
         /* effet de glow sur le titre du forum en rouge car #FF0000 */
	text-shadow: 1px 0px 20px #ff0000;
	-webkit-transition: 1s linear 0s;
	-moz-transition: 1s linear 0s;
	-o-transition: 1s linear 0s;
	transition: 1s linear 0s;
	outline: 0 none;
}


Voilà amusez vous !
Morph
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Effet Glow sur un texte dans votre page

Messagepar Mazeltof » 07 Mai 2017 à 15:26

'jour ici,

Merci pour le partage :)

une petite remarque tout de même,
Tu dois conserver une hiérarchie avec les balise de titre H1, H2, H3, etc.
En gros H6 dépend de H5, H5 dépend de H4, H4 dépend de H3, etc.

Et tu peux très bien laisser la balise H1 dans le html et déclarer ta modif css comme ça, par exemple :
Code: Tout sélectionner
.site-description h1 {
	color: rgba(255, 138, 34, 1); 
}

.site-description h1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 4em;
}
   
.site-description h1:hover {
	text-shadow: 1px 0px 20px #ff0000;
	-webkit-transition: 1s linear 0s;
	transition: 1s linear 0s;
	outline: 0 none;
}

:wink:
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2067
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Effet Glow sur un texte dans votre page

Messagepar Morph29 » 07 Mai 2017 à 20:08

super!
je prend bien note et je ne connaissais pas.
Je vais de ce pas modifié mon code.

Merci malzeltoff.
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Effet Glow sur un texte dans votre page

Messagepar cabot » 08 Mai 2017 à 09:13

Votre sujet a été déplacé par un membre de l'équipe.
Origine : créations graphiques
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque


Retourner vers [3.2.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités