Overblog
Suivre ce blog Administration + Créer mon blog

over blog

Lien survolé avec effet majuscules - roll over link - Css.

Publié le par Coquelikosafrane


Pour les débutants dans le petit monde de la bloggosphère que nous sommes ; on peut améliorer la visualisation des liens .

En effet, on peut faire que lorsque le visiteur passe la souris au-dessus d'un lien , les lettres du link écrites habituellement en minuscules deviennent en majuscules .

Il suffit de rajouter dans son css la ligne de code suivant :

a:hover{text-transform:uppercase;} : met tous les caractères en majuscules .

a:hover{text-transform:lowercase;} : met tous les caractères en minuscules .

a:hover{text-transform:capitalize;} : Met le premier caractère en majuscules .


On peut aussi lui affilier des coloris .....

Par exemple avec le code suivant :

a:hover { text-transform:uppercase;text-decoration:none; color:#9E9E9E}



 

 

Publié dans Over blog

Partager cet article
Repost0

Taper du texte avec un effet de barre en html .

Publié le par Coquelikosafrane



Pour barrer du texte il suffit de passer en mode html et de taper la ligne suivant :

La commande est "s" .
 

<s>Texte barré doit être tapé ici.</s>

Ce qui donne : 



Le texte  barré doit être tapé ici .

http://smileys.sur-la-toile.com/repository/Fantastique/emoticones-msn-licorne.gif

Publié dans Over blog

Partager cet article
Repost0

Changer la taille de la police en html.

Publié le par Coquelikosafrane


Pour mettre en valeur un élément d'une phrase ou bien encore pour au contraire juste mettre une information en diminuant son imortance visuelle, il suffit de changer la taille des caractères, de la police de son texte des articles.

Il faut passer en mode html et inscrir avant son texte une commande du style: <span style="font-size: 5pt;"> et à la suite de son texte fermer la commande avec </span>

Ce qui nous permet d'obtenir :

Taille 2 .



Taille 12 .



Taille 22 .










Publié dans Over blog

Partager cet article
Repost0

Couleur des liens en html .

Publié le par Coquelikosafrane


Pour répondre à Casse-Bonbec ; le fait que les liens hypertexte soient à l'encre "sympathique" est sympa; discret mais aussi parfois gênant pour la visibilité du texte pour les lecteurs.

Pour changer la couleur des liens; sur les blogs il suffit de passer en mode Css et d'atteindre la ligne suivante:

a      { text-decoration:underline; color:#......}

On remplace ensuite les ...... de la couleur par le code html ou non de la couleur désirée.



   


Publié dans Over blog

Partager cet article
Repost0

Proposer de mettre votre blog dans les favoris (OB).

Publié le par Coquelikosafrane


Pour favoriser la régularité de ses visiteurs il peut être aisé de leur faciliter la vie en leur proposant de rajouter  votre blog dans leurs favoris.

Ajoutez Coquelikosafrane à vos favoris 
 



<a href="javascript:window.external.AddFavorite('http://coquelikosafrane.over-blog.com/','Mon premier blog et mes 

premiers essais sous Gimp et en html.
')"><strong>Ajoutez Coquelikosafrane &agrave; vos favoris 

</strong></a>&nbsp;<br />



Explications du scripts:

L'adresse de votre blog


Votre message personnel

La phrase que vous voulez voir paraître











 

 

Publié dans Over blog

Partager cet article
Repost0

Le texte s'arrête à l'approche de la souris

Publié le par Coquelikosafrane



Une petite ligne de texte html pour faire un effet sympathique sur ses articles :




Le texte s'arrête à l'approche de la souris.

<marquee scrollamount="5" scrolldelay="7" onmouseover="this.stop();" onmouseout="this.start();"> Le texte s'arrête à l'approche de la souris. </marquee>


 

Publié dans Over blog

Partager cet article
Repost0

Rendre les png transparents en mode css.

Publié le par Coquelikosafrane


Il arrive que lorsque l'on change de design de blog, les images en png et le tour des images deviennent colorés.

Pour corriger ce problème il suffit de passer en mode css et d'écrire le mot "transparent " à la place des valeurs couleurs comme ci-dessous :





Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit






   


Publié dans Over blog

Partager cet article
Repost0

Lien survolé qui change de couleur - color of hover link .

Publié le par Coquelikosafrane


Il peut être sympa de changer la couleur d'un lien survolé pour permettre une plus grande lisibilté aux visiteurs .

Il suffit de rajouter une petite ligne dans le css :

a:hover {
color:gold;}

Cette ligne permettra que le lien s'écrive en couleur choisie , par exemple ici, en jaune .



  

Pour connaître les différents codes couleurs : clic ici pour rejoindre un de mes articles .

Publié dans Over blog

Partager cet article
Repost0

Couleurs complémentaires sur une image en html .

Publié le par Coquelikosafrane


En html , on peut ajouter un petit effet sur une de ses images ; pour celà il suffit de rajouter une petite ligne de code :


L'image de départ :




image 



Le résultat :


image


Le code à rajouter :

<img border="0" width="140" src="Adresse de l'image  hébergée. " alt="image" height="140" style="filter:Invert()">

Les Width et Height sont les valeurs de longueur et hauteur de l'image , il suffit de changer le 140 en nombre de pixels de l'image . Pour les connaître , il faut faire un clic droit sur l'images et regarder dans ses propriétés .

Le script va afficher les couleurs complémentaires de l'image .


Ce qui donne pour mon exemple :


<img border="0" width="140" src="http://idata.over-blog.com/1/12/72/17//tuxcanada.png" alt="image" height="140" style="filter:Invert()">




Publié dans Over blog

Partager cet article
Repost0

Points noirs autour d'une image survolée .

Publié le par Coquelikosafrane


Un autre effet:




Le code :


<style type="text/css"><!--
a:hover {border:0px }

a:hover img {border:25px black dotted}
--></style>
<a href="http://www.aides.org/" target="_blank"><img key="5bf733809afb7d51e5be375a7f9cc4c2" width="200" src="http://idata.over-blog.com/1/12/72/17//sida6mq7b1gz.gif" height="200" class="CtreTexte"></a> </center></p>
<center></center>
<p><br><br><strong><span style="text-decoration: underline;">Le code :</span></strong> <br><br><span style="font-size: 8pt;"><em>&lt;style type="text/css"&gt;&lt;!--<br>a:hover {border:0px }</em></span></p>
<p><span style="font-size: 8pt;"><em>a:hover img {border:25px black dotted}<br>--&gt;&lt;/style&gt;<br>&lt;a href="http://www.aides.org/" target="_blank"&gt;&lt;img key="5bf733809afb7d51e5be375a7f9cc4c2" width="200" src="http://idata.over-blog.com/1/12/72/17//sida6mq7b1gz.gif" height="200"
class="CtreTexte"&gt;&lt;/a&gt;</em></span></p>

La taille et la couleur des tirets se trouvent dans la ligne : a:hover img {border:25px black dotted} ;

il suffit de changer le nombre de pixels, px; et la forme en dashed, dotted, solid ...







 

 

 

 

 

 


Publié dans Over blog

Partager cet article
Repost0

Texte venant de droite et qui s'efface en html - hiding text .

Publié le par Coquelikosafrane


Un petit effet :

Coucou à toi, visiteur ! !


Le script :


<marquee behavior="alternate"><marquee width="150">Texte personnalisé .<marquee></marquee></center></br>
 
On peut personnaliser le code width ; par exemple :


Coucou à toi, visiteur ! !


Publié dans Over blog

Partager cet article
Repost0

Une image en tête d'article qui change au passage de la souris.

Publié le par Coquelikosafrane



Un petit rappel pour Finou .

Ca vous intéresse de mettre une jolie petite image en tête de vos articles qui en plus peut être ou non changée lors du passage de la souris ??



.titreArticle{
...
background: url(adresse de votre icône ou clipart hébergé) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
.titreArticle:hover {
background: url((adresse de votre icône ou clipart hébergé) ) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}





Par exemple :

.titreArticle{
...
background: url(
http://serv1.upload4you.free.fr/2007/07/1183812531.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}
.titreArticle:hover {
background: url(
http://serv1.upload4you.free.fr/2007/07/1183812574.gif) no-repeat scroll top left ;
padding-left: 60px;
padding-bottom : 45px;
padding-top : 20px;
}

 

Publié dans Over blog

Partager cet article
Repost0

Highlight et opposite highlight text .

Publié le par Coquelikosafrane


2 petits effets de texte bien sympa :

Le script  N° 1 - Hihglight text  :


<marquee behavior="alternate" width="10%">>></marquee>Texte personnalisé !<marquee behavior="alternate" width="10%"><<</marquee></a>


Mon script actuel :

 <marquee behavior="alternate" width="10%">>></marquee>Bonjour à toi visiteur !<marquee behavior="alternate" width="10%"><<</marquee></a>
    

Ce qui donne :
    
>>Bonjour à toi visiteur !<<







Le script N°2 - opposite highlight text  :

Le script : 

<marquee scrollAmount="3" width="10%"><<<<</marquee>Texte personnalisé !<marquee direction="right" scrollAmount="3" width="10%">>>>></marquee></a>
    


Mon script actuel :

 <marquee scrollAmount="3" width="10%"><<<<</marquee>Bonjour à toi visiteur !<marquee direction="right" scrollAmount="3" width="10%">>>>></marquee></a>


     

    
<<<<Bonjour à toi visiteur !>>>>



Tout est personnalisable, il n' y a plus qu'à essayer les différents paramètres.


<<<<Bonjour à toi visiteur !>>>>




Publié dans Over blog

Partager cet article
Repost0

Protéger ses images en html.

Publié le par Coquelikosafrane


Les sites et blogs sont à foison avec chacun leurs propres articles et surtout leurs propres images et photos chères à nos coeurs .


Il peut parfois être utile de protéger ses images .

Alors quoi de mieux qu'un simple code en html ??

En fait , le truc c'est que l'image est en fait composée de deux dont une , invisible qui sera elle copiée ou enregistrer si le visiteur fait une de ces actions-là .

Essayons avec celle-là :




Impecc !

Isnt'it ??


Le script :


<div style="WIDTH: 380px; HEIGHT: 150px; position: relative">
<img style=" WIDTH: 380px; HEIGHT: 150px;" src="lien d'hébergement de l'image tout le temps visible commençant par http://"/>
<img style="FILTER: alpha(opacity=0); -moz-opacity : 0.0 ; opacity : 0.0 ; LEFT: 0px;
POSITION: absolute; WIDTH: 380px; TOP: 0px; HEIGHT: 150px ;" src="lien de l'image invisible qui ne se voit que lorsque l'image est enregistrée" />
</div>

Les positions WIDTH et HEIGHT correspondent à la dimension de l'image tout le temps vislble .

Lors de l'écriture du script , bien les compléter correctement.


Width = largeur

Height = hauteur .


Une petite dernière avec un super souvenir de l'an dernier !! :




Essayer de l'enregistrer ou de la copier pour voir !




Publié dans Over blog

Partager cet article
Repost0

High Tech Text en html.

Publié le par Coquelikosafrane



2 petits effets de texte bien sympa :

Le script  N° 1 :


<marquee width="4%" behavior="alternate" scrollamount="3"><span style="font-family: Webdings;">4</span></marquee><marquee width="2%" scrollamount="1">| | |</marquee>Texte personnalisé .<marquee width="2%" direction="right" scrollamount="1">| | |</marquee><marquee width="4%" behavior="alternate" direction="right" scrollamount="3"><span style="font-family: Webdings;">3</span></marquee>



Mon script actuel :

<marquee width="4%" behavior="alternate" scrollamount="3"><span style="font-family: Webdings;">4</span></marquee><marquee width="2%" scrollamount="1">| | |</marquee>Bonjour &agrave; toi visiteur !<marquee width="2%" direction="right" scrollamount="1">| | |</marquee><marquee width="4%" behavior="alternate" direction="right" scrollamount="3"><span style="font-family: Webdings;">3</span></marquee>  : 


  4| | |Bonjour à toi visiteur ! | | |3



Tout est personnalisable, il n' y a plus qu'à essayer les différents paramètres.


4| | |Bonjour à toi visiteur !| | |3





 


Un autre script :

 <MARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"><font face=Webdings>3</font></MARQUEE><MARQUEE scrollAmount=1 direction=left width="2%">| | |</MARQUEE>Texte personnalisable .<MARQUEE scrollAmount=1 direction=right width="2%">| | |</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"><font face=Webdings>4</font></MARQUEE>
    

 3| | |Bonjour à toi visiteur !| | |4



 

Publié dans Over blog

Partager cet article
Repost0

<< < 1 2 3 4 5 6 7 8 > >>