Effets (grisé) transparent au survol HTML 5 ,CSS3
Résolu/Fermé
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
-
6 oct. 2013 à 13:40
larose6996 - 15 oct. 2013 à 12:29
larose6996 - 15 oct. 2013 à 12:29
A voir également:
- Effets (grisé) transparent au survol HTML 5 ,CSS3
- Editeur html - Télécharger - HTML
- Espace en html - Astuces et Solutions
- Br html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- Tableau de combinaison loto 5/90 - Forum Excel
30 réponses
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
Modifié par larose6996 le 12/10/2013 à 23:57
Modifié par larose6996 le 12/10/2013 à 23:57
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
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
12 oct. 2013 à 23:58
12 oct. 2013 à 23:58
donc t'es à la fac ?
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
12 oct. 2013 à 23:59
12 oct. 2013 à 23:59
moi je suis en 3ème année de bio sur Paris...
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
13 oct. 2013 à 00:14
13 oct. 2013 à 00:14
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
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
13 oct. 2013 à 00:17
13 oct. 2013 à 00:17
pas de problème t'en fait dejà trop je suis un cancre...
si t'as un jour une question en biologie tu sais ou je suis
si t'as un jour une question en biologie tu sais ou je suis
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
Modifié par larose6996 le 13/10/2013 à 00:17
Modifié par larose6996 le 13/10/2013 à 00:17
bonne nuit et encore merci
c'est cool !
c'est cool !
larose6996
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
13 oct. 2013 à 00:18
13 oct. 2013 à 00:18
à demain soir... vers 23h
Utilisateur anonyme
Modifié par lobotoFix le 13/10/2013 à 08:18
Modifié par lobotoFix le 13/10/2013 à 08:18
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é...
Utilisateur anonyme
13 oct. 2013 à 10:37
13 oct. 2013 à 10:37
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...
Utilisateur anonyme
Modifié par lobotoFix le 13/10/2013 à 11:14
Modifié par lobotoFix le 13/10/2013 à 11:14
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|[׺°"~'"°º×
Là je mange et je te dis sa plus tard.
Encore Merci !!!
Encore Merci !!!
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 +
