Effets (grisé) transparent au survol HTML 5 ,CSS3
Résolu
larose6996
Messages postés
30
Date d'inscription
Statut
Membre
Dernière intervention
-
larose6996 -
larose6996 -
Bonjour,
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
A voir également:
- Effets (grisé) transparent au survol HTML 5 ,CSS3
- Editeur html - Télécharger - HTML
- Croix grise snap - Forum Snapchat
- Html br ✓ - Forum Webmastering
- Savoir si je suis bloqué par une personne sur snap chat ✓ - Forum Snapchat
- Espace html - Astuces et Solutions
30 réponses
Ou est ce que tu as appris la maitrise HTML 5 et CSS3 ?
moi j'ai appris les base sur le siteduzero.com
moi j'ai appris les base sur le siteduzero.com
tu vois sur la 2nd photo
pic.twitter.com/v1Pa6lVJGw
en faite j'ai la possibilité de clicker sur la photo ou sur le petit trait noir.
Quand je clicke sur le petit trait noir sa me fait un petit cadre en pointillé et m'envoi aussi sur la page correspondante
pic.twitter.com/v1Pa6lVJGw
en faite j'ai la possibilité de clicker sur la photo ou sur le petit trait noir.
Quand je clicke sur le petit trait noir sa me fait un petit cadre en pointillé et m'envoi aussi sur la page correspondante
Salut,
je viens de le faire en css et en javascript, en plus tu aura le choix.
le nouveau html :
le nouveau css :
si tu veux avec JavaScript tu rajoute en bas de page juste avant </body>
si tu veux en css tu rajoute à ton css :
Le petit coin je me suis pas prit la tête j'en ai mis un gros, mais tu pourra mettre ce que tu veux.
tu peu le télécharger ici pour les essais : http://pour-ccm.zz.mu/coin.png
si tu veux voir avec javascript c'est là :
http://pour-ccm.zz.mu/indexx.html
si tu veux voir en css c'est là :
http://pour-ccm.zz.mu/indexxx.html
pour le faire et bien voir l'effet j'ai retirer les liens tu les block correspondant, il faudra les remettre.
Bonne chance
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
je viens de le faire en css et en javascript, en plus tu aura le choix.
le nouveau html :
<body>
<div id="content">
<a href="Société.html" >
<div class="block">
<div class="opac">
<p>
texte image 1
</p>
</div>
<img src="Société.jpg" class="société tof" alt="société" />
</div></a>
<a href="Monde.html" >
<div class="block">
<div class="opac">
<p>
texte image 2
</p>
</div>
<img src="Monde.jpg" class="monde tof" alt="monde" />
</div></a>
<a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 3
</p>
</div>
<img src="Politique.jpg" class="Politique tof" alt="politique" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block">
<div class="opac">
<p>
texte image 4
</p>
</div>
<img src="Economie.jpg" class="economie tof" alt="economie" />
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 5
</p>
</div>
<img src="surfeur.png" class="surfeur tof" alt="surfeur1" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 6
</p>
</div>
<img src="high-tech.jpg" class="high-tech tof" alt="high-tech" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block"><img src="coin.png" class="coin" alt="" />
<div class="opac">
<p>
texte image 7
</p>
</div>
<img src="cinema.jpg" class="cinema tof" alt="cinema" /><span class="bord"></span>
</div></a><a href="#" >
<div class="block">
<div class="opac">
<p>
texte image 8
</p>
</div>
<img src="people.jpg" class="people tof" alt="people" />
</div></a>
</div>
</body>
le nouveau css :
<style type="text/css">
#content {
width: 960px;
margin: auto;
position: relative;
}
.block {
width: 230px;
height: 210px;
position: relative;
display: inline-block;
border: 0px;
}
img.tof {
width: 210px;
height: 180px;
position: absolute;
top: 16px;
left: 10px;
}
.opac {
width: 210px;
height: 180px;
position: absolute;
top: 16px;
left: 10px;
background-color: white;
opacity: 0.8;
z-index: 10;
display: none;
}
p {
text-align: center;
font-size: 1.5em;
margin-top: 80px;
}
.block:hover > .opac {
display: inline;
}
a, a:hover, a:visited {
color: black;
}
a div.block img {
border: 0;
}
.bord {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
}
.coin {
position: absolute;
bottom: -19px;
right: -25px;
width: 50px;
height: 50px;
}
si tu veux avec JavaScript tu rajoute en bas de page juste avant </body>
<script type="text/javascript">
var img = document.getElementsByClassName("coin");
var len = img.length;
for (var i = 0; i < len; i++) {
img[i].onmousedown = function() {
this.parentNode.childNodes[5].style.border = "1px dotted black";
}
img[i].onmouseup = function() {
this.parentNode.childNodes[5].style.border = "none";
}
img[i].onmouseout = function() {
this.parentNode.childNodes[5].style.border = "none";
}
}
</script>
si tu veux en css tu rajoute à ton css :
.coin:active ~ span.bord{
border: 1px dotted black;
}
Le petit coin je me suis pas prit la tête j'en ai mis un gros, mais tu pourra mettre ce que tu veux.
tu peu le télécharger ici pour les essais : http://pour-ccm.zz.mu/coin.png
si tu veux voir avec javascript c'est là :
http://pour-ccm.zz.mu/indexx.html
si tu veux voir en css c'est là :
http://pour-ccm.zz.mu/indexxx.html
pour le faire et bien voir l'effet j'ai retirer les liens tu les block correspondant, il faudra les remettre.
Bonne chance
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
AILLE...
en faite je viens de me rendre compte de ma boulette...
J'ai du super mal m'exprimer ( et en effet c'est le cas...), il y a une gros méprise
on ne sait pas compris...
Mais c'est de ma faute, je suis désolé.
J'ai pas encore tester ta programmation mais de ce que j'ai vu j'ai l'impression que tu as conservé les "petits traits noirs" c'est ça ?
Parce que en faite moi je voulais les supprimer...
Si c'est ça je suis désolé...
en faite je viens de me rendre compte de ma boulette...
J'ai du super mal m'exprimer ( et en effet c'est le cas...), il y a une gros méprise
on ne sait pas compris...
Mais c'est de ma faute, je suis désolé.
J'ai pas encore tester ta programmation mais de ce que j'ai vu j'ai l'impression que tu as conservé les "petits traits noirs" c'est ça ?
Parce que en faite moi je voulais les supprimer...
Si c'est ça je suis désolé...
salut, oui je les ai conservés, explique moi ce que tu veux exactement, je crois que hier j'étais fatigué et j'ai pas compris.
non non c'est de ma faute mon message n'était pas clair.
Sur cette photo il y a 4 petits traits (comme des artefacts, des parasites)
pic.twitter.com/v1Pa6lVJGw
...et je voudrais tout simplement qu'il n'apparaissent plus
pour que le rendu soit plus esthétique...
Sur cette photo il y a 4 petits traits (comme des artefacts, des parasites)
pic.twitter.com/v1Pa6lVJGw
...et je voudrais tout simplement qu'il n'apparaissent plus
pour que le rendu soit plus esthétique...
Oula je me suis compliqué la vie, j'ai cru que tu voulais que je rajoute un petit angle noir qui lorsque l'on clique dessus fasse un tour en pointillé. pfff je suis bête...pas grave.
voici la solution :
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
voici la solution :
a, a:hover, a:visited{
color: black;
text-decoration: none;
}
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
heu, si tu veux un truc qui ponde le code tout seul, tu peux utiliser un wysiwyg.
c'est un logiciel quui fait le code pour toi.
Mais sache que le code est mauvais. Mais quel est le problème ? le problème est que Google pénalise les erreurs de code (html) et retire des places dans le classement. ton site sera fait facilement mais ne sera pas visible facilement. Toute fois tu peux t'en servir et une fois fini tu passe au validateur et améliore le html.
validateur : http://validator.w3.org/
dreamweawer (gratuit 1 mois ) : https://www.clubic.com/telecharger-fiche10239-dreamweaver-cs6.html
blugriffon : http://www.bluegriffon.org/
il y en as d'autres...
si tu pense que ton problème est résolu, passe en résolu
a +
c'est un logiciel quui fait le code pour toi.
Mais sache que le code est mauvais. Mais quel est le problème ? le problème est que Google pénalise les erreurs de code (html) et retire des places dans le classement. ton site sera fait facilement mais ne sera pas visible facilement. Toute fois tu peux t'en servir et une fois fini tu passe au validateur et améliore le html.
validateur : http://validator.w3.org/
dreamweawer (gratuit 1 mois ) : https://www.clubic.com/telecharger-fiche10239-dreamweaver-cs6.html
blugriffon : http://www.bluegriffon.org/
il y en as d'autres...
si tu pense que ton problème est résolu, passe en résolu
a +