Vendredi 28 juillet 2006

Un curseur personnalisé pour IE et FireFox

Beaucoup utilisent les curseurs de souris personnalisés sur leurs pages et la plupart du temps, ceux-ci ne sont visibles que pour les versions récentes d'Internet Explorer.
Ce court article vous donne l'astuce qui permettra à vos visiteurs de profiter de votre curseur personnalisé et ce même avec d'autres navigateurs, tels que FireFox ou Opera.
Il suffit juste dans votre feuille de style CSS de définir le curseur de la souris de cette façon:
cursor: url(url_du_curseur), default;

Il semble en effet que le moteur de rendu des navigateurs Gekko (dont fait partie FireFox) ait un bug dans la gestion des curseurs personnalisés. Le fait d'ajouter le mot default en fin de ligne débloque la fonctionnalité (pour un curseur par de pointage par défaut). Vous pouvez bien évidemment remplacer ce mot-clé par un de ceux proposés dans la spécification CSS2 du W3C.

Ceci ne fonctionne qu'avec les curseurs fixes (au format .cur).
Passez la souris ici pour un exemple de curseur fixe (.cur)
par Francisek publié dans : CSS et Design
ajouter un commentaire    commentaires (4)    recommander
Mercredi 5 juillet 2006

Mise à jour du générateur de texte dégradé

Petite mise à jour dans le générateur de texte en couleurs dégradées. J'y ai ajouté un sélecteur de couleurs pour en faciliter l'utilisation.
Voir l'article: Un joli texte dégradé
par Francisek publié dans : News
ajouter un commentaire    commentaires (5)    recommander
Vendredi 23 juin 2006

Amusons nous avec les bordures

En HTML/CSS, on peut aisément habiller des blocs avec des bordures de couleur grâce aux propriétés CSS de la famille border, mais ces bordures exclusiviment de forme rectiligne horizontale ou verticale. Exclusivement? Pas tout à fait, car si on examine de plus près les styles de bordure inset / outset, on s'aperçoit que la petite partie à l'intersection de deux bordures est oblique.
Nous pouvons donc exploiter cette particularité afin de dessiner des formes obliques.
L'utilité de cette technique est bien limitée puisqu'elle ne s'appliquera pratiquement jamais à un design.
C'est donc pour le fun, que je vous livre quelques essais.

Les carreaux

Nous pouvons, par une alternance de blocs à bordure solide correctement définie, obtenir un joli pavé carrelé:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Comment est-ce réalisé ? Nous créons un cadre avec une largeur et une hauteur définies en pixels (ici 300) dans lequel non insérons des blocs carrés flottants sans overflow de 50px de coté avec un style alterné. Le style de chaque bloc se contente de définir deux bordures perpendiculaires.
Le code HTML de ce carrelage:
<style type="text/css">
.b1,.b2,.b3,.b4{
overflow:hidden;
width:0;
height:0;
float:left;
}
.b1{
border-left:solid #ffc 50px;
border-top:solid #000 50px;
}
.b2{
border-left:solid #000 50px;
border-bottom:solid #ffc 50px;
}
.b3{
border-left:solid #ffc 50px;
border-bottom:solid #000 50px;
}
.b4{
border-left:solid #000 50px;
border-top:solid #ffc 50px;
}
* html .b1, * html .b2, * html .b3, * html .b4 {width:50px;height:50px;w\idth:0;he\ight:0;}
</style>
<div style="width:300px;height:300px;background-color:#fff;margin:1em auto;border:outset 5px;">
    <div style="" class="b1"></div>
    <div style="" class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>

    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>

    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b1"></div>
    <div class="b2"></div>

    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b3"></div>
    <div class="b4"></div>
</div>

Des vagues

Nous pouvons, en changeant simplement le CSS, obtenir un effet de vagues, comme dans l'exemple suivant:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Absolument inutile, ce point méconnu du CSS nécessitait d'être souligné !!
(NB : Comme toujours, IE n'apprécie pas qu'on exploite le CSS trop intensément et donne un résultat médiocre, surtout lors de l'utilisation de bordures non solides).
par Francisek publié dans : CSS et Design
ajouter un commentaire    commentaires (4)    recommander

Articles Chauds

Les articles de ce blog les plus lus ce mois:

La newsletter

Inscription à la newsletter

Recherche

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus