bonjour,

je voudrais faire une animation CSS avec un dégradé quand la souris est sur un des objet inverser le dégradé modifier le border-radius ainsi que celle des bordures, sa marche mais sans l'animation. le header est sous include dans une autre page. et j'aimerais savoir s'il est possible de modifier le design des input car je n'y arrive pas.

header.html

	<header>
			<span class="header" id="accueil"><span class="text"><a href="accueil.php">accueil </a> </span></span>
			<span class="header" id="forum"><span class="text"><a href="forum.php">forum </a></span></span>
			<span class="header" id="nous_rejoindre"><span class="text"><a href="nous_rejoindre.php">nous rejoindre </a></span></span>
			<span class="header" id="ts"><span class="text"><a href="ts.php">teamspeak </a></span></span>
			<br><br><br><br>

		</header>

prototype.css

html {
	font-family: arial;
}

header {
	margin-top: -16px;
	margin-left: -8px;
	margin-right: -8px;
	background-color: rgb(40, 40, 40)
}

span.text {
	color: white;
	-webkit-transition: color 1s linear;
       -moz-transition: color 1s linear;
         -o-transition: color 1s linear;
            transition: color 1s linear;
}

span.text:hover {
	color: black;
}

a {
 text-decoration: none;
 color: white;
}

span#accueil {
	color: white;
	margin-left: 85px;
	position: absolute;
	top: 9px;
	padding: 10px;
	background: linear-gradient(to bottom, black, white);
	-webkit-transition: background 0.5s linear;
       -moz-transition: background 0.5s linear;
         -o-transition: background 0.5s linear;
            transition: background 0.5s linear;
}

span#accueil:hover {
	background: linear-gradient(to top, black, white);
}

span#forum {
	margin-left: 239px;
	position: absolute;
	top: 9px;
	padding: 10px;
	background: linear-gradient(to bottom, black, white);
	-webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
            -o-transition: background 0.5s linear;
                transition: background 0.5s linear;
}

span#forum:hover {
	background: linear-gradient(to top, black, white);
}


span#nous_rejoindre {
	margin-left: 385px; 
	position: absolute;
	top: 9px;
	padding:10px;
	background: linear-gradient(to bottom, black, white);
	-webkit-transition: background 0.5s linear;
       -moz-transition: background 0.5s linear;
         -o-transition: background 0.5s linear;
            transition: background 0.5s linear;
}

span#nous_rejoindre:hover {
	background: linear-gradient(to top, black, white);
}


span#ts {
	margin-left: 597px;
	position: absolute;
	top: 9px;
	padding: 10px;
	background: linear-gradient(to bottom, black, white);
	-webkit-transition: background 0.5s linear;
       -moz-transition: background 0.5s linear;
         -o-transition: background 0.5s linear;
            transition: background 0.5s linear;
}

span#ts:hover {
	background: linear-gradient(to top, black, white);
}


span.header {
	font-size: 20px;
	border: 2px solid rgba(255, 255, 255, 1);
	background-color: rgb(80, 80, 80);
	border-radius: 0px;
	-webkit-transition: border 0.5s linear,border-radius 10s linear;
       -moz-transition: border 0.5s linear,border-radius 10s linear;
         -o-transition: border 0.5s linear,border-radius 10s linear;
            transition: border 0.5s linear,border-radius 10s linear;
}

span.header:hover {
	border: 1px solid rgba(120, 120, 120, 0.25);
	border-radius: 8px;
}

merci d'avance

Salut !

Je ne pense pas que tu pourras y arriver de cette manière (juste en faisant une transition de ton background).

Par contre il y a d'autres techniques qui permettent de le faire !

En cherchant sur le net (premier lien), j'ai trouvé ça : http://codepen.io/pinto165/pen/pyBNzX, voir carrément un générateur : https://www.gradient-animator.com

L'astuce est d'agrandir ton background à X pourcent (avec ton dégradé à l'intérieur bien sur), et ensuite d'effectuer une animation en changeant la position de ton background. Ce que donnera l'effet d'un dégradé "animé".

Pour ton soucis de design d'input, tu peux en dire un peu plus ?

-
Edité par j.smith.the.doctor 25 avril 2017 à 16:16:11

ok merci je vais voir pour les dégradé. pour les input je veu pouvoir les redisigner, changer la taille la couleur du text du placeholder des value de leurs background enfin bref ce type d'input

<p>Pseudo : <input type="text" name="login" placeholder="Identifiant"/></p>

		<p>Mot de passe : <input type="password" name="password" placeholder="Mot de passe"/></p>

		<p>Mot de passe confirmation : <input type="password" name="password_verif" placeholder="Mot de passe"/></p>

		<p>Email : <input type="email" name="mail" placeholder="Email"/></p>

		<input type="submit" name="submit" value="Inscription"/>

		<p><span class="connection"><a class="connection" href="accueil_connect.php" title="connexion">Vous avez un compte ?</a></p></span>

Ou est le problème ?

dans ton css, tu sélectionne ton input :

input{

}

et tu lui ajoute du style :

input[type=text]{
font-size: 1.5em;
color: #222;
background: #999;
padding: 10px
}

C'est ce que tu veux, non ?

ok merci sa marche je ne sais pas pourquoi sa ne marchais pas bref, y-a-t-il moyen de colorer les placeholder ?