CSS Naked Day

CSS Naked Day

En avril ne te découvrir pas d’un fil … et pourtant !

Pour la troisième année consécutive, Dustin Diaz nous invite à montrer notre blog dans son plus simple appareil, c’est-à-dire sans les CSS. C’est l’occasion de voir si votre marquage HTML tient la route sans feuilles de style le 9 avril 2008 .

Je vous invite à y participer afin de montrer la puissance de l’HTML dans le plus simple appareil.

Le but étant de montrer qu’un site peut rester lisible sans tout ce qui va autour comme le CSS !

  • 1 commentaire

CSS et la propriété moz

Je pense que vous avez le même soucis que moi … comment faire des conteneurs CSS avec les coins arrondis ? non ?

Bon si c’est oui :) ! J’ai la solution ! Et la solution c’est la propriété moz !

Voici les propriétées CSS :

#content{
 	-moz-border-radius-topright: 20px;
 	-moz-border-radius-bottomright: 20px;
 	-moz-border-radius-bottomleft: 20px;
 	-moz-border-radius-topleft: 20px;
 	width:100px;
 	background-color:#FDD99B;
 	border-color:#D9BB7A;
 	border-style:solid;
 	border-width:1px 5px 5px 1px;
 	padding:1ex 1ex 1ex 1ex;
 	text-align:justify;
 	vertical-align:middle;
 }


TéléchargementTélécharger la source

Et voila, un joli petit effet à la Ubuntu !

Attention cette propriété est uniquement compatible avec Firefox (ou autre navigateur qui respecte les normes w3c )

  • 5 commentaires

CSS et la propriété focus

Un article retrouvé de mon ancien blog.

Bon, je viens de me rendre compte qu’une propriété CSS nommée focus existait … je sais je suis en retard mais bon mais je me suis souvent demandé comment faisait certains sites pour changer le style de leurs balises CSS au moment ou le focus etait dessus…

input:focus, select:focus, textarea:focus

Même pas besoin de javascript ! Tout ce fait tout seul ! MAGIE :)

Exemple

Style.css

 input, select, textarea {
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
input:focus, select:focus, textarea:focus {
        background-color: #cddefd;
        border:1px solid #248;
         color:#000;
}


TéléchargementTélécharger la source

Et voila !
Si c’est pas beau ça !

  • 1 commentaire
Page 2 sur 2«12