background preloader

CSS

Facebook Twitter

Zoomer une image avec les CSS - CSS Debutant. Zoomer une image, à l'aide des CSS2, lors de son 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 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 zoomer une image 100% CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des « portes coulissantes ». Sommaire Première technique Fonctionne avec : FireFox MSIE 7 + Mozilla / SeaMonkey Opéra 7 + Safari Attributs utilisés : img:hover Code (x)html L'image est déclarée dans le code html sans valeurs de tailles (ni width, ni height) : Code CSS Pour éviter tout saut, ou recouvrement, du texte sous-jacent lors du zoom, on peut déclarer cette image dans un cadre (ici appelé zoom) de hauteur égale à la photo zoomée (ici 400px).

Zone de test Haut Seconde technique Tous les navigateurs graphiques Astuces Variante. 10 techniques avancées et secrets de CSS2. A l'heure où les anciennes versions d'Internet Explorer disparaissent, il devient plus que temps de s'ouvrir aux secrets d'un langage malheureusement trop peu connu : CSS2, ou plus précisément CSS2.1. De larges parties de CSS2 ont été occultées en raison des faiblesses d'IE6 puis d'IE7. Le marché actuel nous offre enfin la possibilité, au cas par cas, de négliger ces anciennes versions du navigateur de Microsoft. Les possibilités offertes par CSS2 sont bien plus vastes que vous ne l'imaginez… Un monde sans Internet Explorer 6 Selon les statistiques européennes, le vénérable ancêtre IE6 ne représenterait aujourd'hui que 2% du marché. Min-width, max-width, min-height, max-height Les propriétés de minima et maxima, reconnues dès IE7, facilitent la vie et évitent l'usage de JavaScript dans de nombreux cas de figure : :first-child La pseudo-classe CSS2 :first-child offre la possibilité de cibler uniquement le premier élémént au sein de son parent.

:hover Sélecteur d'enfants (A > B) 30 Pure CSS Alternatives to Javascript. With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all. The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking.

What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used. Having said all that, we are in no way saying that these techniques are in anyway better than there Javascript equivalent, just an optional alternative and as a proof of concept. In this article we have concentrated on showing as many varied CSS techniques that cover the full spectrum of web site interactivity, thus we have intentionally minimized the number of pure CSS navigation methods, of which there are literally hundreds.

CSS Image Map CSS Image MapDemo Pure CSS Timeline. CSS3 Generator. The Shapes of CSS. CSS-Tricks. CSS3 . Info - All you ever needed to know about CSS3. CSS Animation | CSS 3.0 Animation | Animation | Animation Generator. Hacks CSS. CSS3 Generator. Texte onduler generator.