Il s'agit d'une astuce en CSS assez simple que vous pouvez utiliser pour styler les tags de vos posts de blog, habituellement placés en bas des posts.
Les tags en CSS utilisent au moins deux astuces CSS : les triangles en CSS et les cercles en CSS.
Dans cette article, je vais vous montrer comment créer un masque de contenu incliné en CSS. L'idée est plutôt simple et utilise la propriété CSS transform (la rotation pour être plus précis). Bien sûr, cet effet est uniquement fonctionnel sur les navigateurs supportant la rotation CSS.
Avec le CSS3, on peut faire des choses qui nécessitaient autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple, comment rendre une image ronde ? Il existe deux méthodes : tout d'abord une technique qui ne fonctionne que sous Chrome et Safari, et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9).
Ajouté le 24/12/2010 à 08:50 (0 commentaires)
Appliquer un effet de zoom sur une image avec les CSS par Developpez.com
Appliquer un effet de zoom sur une image, à l'aide de CSS2, lors du survol de la souris peut se faire très facilement. Il suffit de combiner le pseudo-élément :hover à la balise img (image).
Hélas, tant que Microsoft Internet Explorer 6 (MSIE6) existera, il faudra utiliser d'autres moyens pour le même résultat. En effet, il n'implémente :hover que pour les liens.
Ce tutoriel décrit deux méthodes pour appliquer un effet de zoom sur une image 100% en CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des "portes coulissantes".
Les sélecteurs permettent par le biais d'une "requête CSS" d'atteindre un ensemble de noeud dans un document HTML et de lui donner un style.
Ces "requêtes" sont des règles de reconnaissance de motifs qui déterminent les règles de style qui s'appliquent aux éléments du DOM.
En CSS3, il y a donc des nouveautés au niveau des sélecteurs afin d'atteindre des noeuds dans le DOM de manière encore plus précise.
Cet article a pour but de présenter la nouvelle gestion des couleurs en CSS3.
Ajouté le 09/10/2010 à 18:03 (0 commentaires)
Tout ce que vous devez savoir sur la déclaration !important par Developpez.com
Je suis récemment tombé sur quelques articles parlant de la déclaration CSS !important et ils étaient confus sur ce que faisait cette déclaration et sur la manière dont elle pouvait être utilisée, comme on pouvait le constater dans les commentaires des lecteurs de ces articles.
J'ai donc pensé faire des recherches sur le seul prolongement du schéma CSS propriété/valeur et faire un article complet sur cette déclaration qui passerait en revue les informations essentielles que les développeurs devraient connaître avant de réfléchir sur son usage dans leurs feuilles de styles.
Cet article va expliquer ce que c'est, comment la déclarer, donner quelques éléments pratiques pour l'utiliser et détailler les inconvénients qui doivent être pris en compte avant de l'implémenter.
Ajouté le 18/08/2010 à 18:03 (0 commentaires)
Plusieurs images de fond grâce aux CSS par Developpez.com
Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Mais on ne peut qu'en mettre une seule...
Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun.
Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons graphiques étaient animés par un JavaScript ou pire (car plus lourd) par un applet java.
Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons.
Des listes à puces avec des images sont plus attrayantes que les styles donnés par défaut (disc, circle, square). Pour cela, inutile d'incorporer une image à chaque item dans le code (X)HTML. Il y a beaucoup plus simple !
Grâce aux CSS, on peut automatiser facilement la mise en image des listes à puces.