styliser le placeholder

Les boules de noël, c’est simple d’utilisation mais ça prend de la place à ranger. Styliser les placeholders, ça ressemble à ça.

styliser le placeholder

le css :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: Italic;
}
::-moz-placeholder { /* Firefox 19+ */
font-style: Italic;
}
:-ms-input-placeholder { /* IE 10+ */
font-style: Italic;
}
:-moz-placeholder { /* Firefox 18- */
font-style: Italic;
}

That’s all for […]

Styliser un select

Un sapin sans boule, c’est comme un select sans style.

Styliser un select, c’est à ta portée

le html :

&ltdiv class= »list1″>
&ltselect >
&ltoption value= »0″>Choisir un type &lt/option>
&ltoption value= »1″>type 1 &lt/option>
&ltoption value= »2″>type 2 &lt/option>
&ltoption value= »3″>type 3 &lt/option>
&lt/select>
&lt/div>

Le css :

.list1 {
width: 260px;
[…]

After et before

Economise les boites pour Noël !

Utiliser :before et :after

Le principe c’est de simplifier le html mais complexifier le css 😉

Au lieu d’écrire :

&ltp>&ltspan class= »icon »>&lt/span>Je mets des icones supers devant et derrière mon texte&ltspan class= »icon icon2″>&lt/span>&lt/p>

J’écris seulement :

&ltp class= »icon »>Je mets des icones supers devant et derrière mon texte&lt/p>

Et j’écris le css de cette manière :

p.icon:before {
content: » »;
position: absolute;
width: 10px;
height: 10px;
background: url(monimage.png) no-repeat left center //etc…
}
p.icon:after {
content: » »;
position: absolute;
width: 10px;
height: 10px;
background: url(monimage.png) no-repeat right […]

selecteur parent et frere

Parfois on se demande comment joindre les deux bouts quand Noël devient trop compliqué.

Sélecteur de parent… et aussi sélecteur de frère

Ils sont indispensables et nous sauvent la vie ces sélecteurs-là !

A:hover > B {}//si B est fils de A
A:hover + B {}//si B est frère directement suivant de A
A:hover ~ B {} //ça c’est le top ! si B est un frère suivant de A)

[…]

afficher une popup au chargement de la page

On aimerait bien que le sapin s’éclaire juste comme ça sans avoir à appuyer sur un bouton !

Et bien c’est pareil pour la popup et c’est pas plus compliqué que ça !

afficher une popup au chargement de la page

voici le html que je vous laisse styliser :

&ltdiv id= »hideshow_rappel » style= »display: none; »>
&ltdiv id= »fade_rappel » class= »fade »>&lt/div>/*ce block là fait tout la fenêtre sauf le menu et est noir avec opacité pour la transparence.*/
&ltdiv class= »popin_block »>
&ltdiv id= »popin_rappel » class= »popin » style= »display: none »>
[…]

Centrer une box verticalement

En ce week-end pas du tout attendu tant nous aimons notre travail, voici une astuce très utile. Nous avons déjà vu comment centrer verticalement un texte. Ici nous faisons la même chose avec une boite.

Centrer une box verticalement par rapport à son conteneur
[…]