background preloader

Html/css

Facebook Twitter

CSS Débutant : Tutoriels CSS. Boutons CSS Le bouton élegant qui change d'aspect au passage de la souris est très utilisé sur les pages web.

CSS Débutant : Tutoriels CSS

Longtemps, la majorité de ces boutons étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS la légèreté et la simplicité est de mise pour créer de beaux boutons. Plusieurs images de fond 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. Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun. Coins arrondis Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques. Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide.

Zoom d'image Vignettes (Thumbnails) Tableaux à bordures fines Et bien si ! Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web. The W3C Markup Validation Service. The W3C CSS Validation Service.

Can I use... Support tables for HTML5, CSS3, etc. Eric Meyer: CSS. CSS Work Books by Eric Including Smashing CSS, CSS: The Definitive Guide, Third Edition, CSS Pocket Reference, and Cascading Style Sheets 2.0 Programmer’s Reference, among several others.

Eric Meyer: CSS

Articles by Eric Local copies of CSS articles, as well as other writing I've done. Inline model document A terse, but hopefully complete, description of how the CSS inline box model really works. Color equivalents table All 147 SVG-derived color keywords permitted in CSS3 in a sortable table showing the keywords with their equivalents in both hexadecimal notations, both (non-alpha) RGB notations, and non-alpha HSL. CSS Module Timelines A visualization of the activity of the CSS Working Group by plotting draft publication dates and W3C statuses over time. CSS Module Editors Leaderboard A bit of a goof wherein I score the editors of various CSS modules and present the results as a leaderboard. CSS Tests A fairly large collection of test files I’ve accumulated over the years.

W3C CSS2 Test Suite Prototyping Offsite. Life at the bleeding edge (of web standards) Bien utiliser les sprites CSS. Centrer en CSS. Changer une image au survol. Lorsque l'on fait un site, on est parfois confronté à un besoin : Celui de gérer le changement d'une image au survol de la souris.

Changer une image au survol

C'est souvent le cas avec des menus. Si la technique des sprites CSS (à propos desquels j'ai écrit ce tutoriel et qui ne sera donc pas détaillée ici) est utile dans certains cas, elle est fortement déconseillée dans le cas d'une image cliquable. Nous allons donc voir une solution alternative intéressante. Le problème posé Pourquoi ne pas utiliser les sprites ? Les sprites sont très utiles pour gérer les images de fond ; mais dès lors qu'une image véhicule une information (image cliquable, portrait d'un auteur, schéma explicatif, etc.) et n'est plus seulement décorative, il est nécessaire que cette image soit présente dans le HTML (balise <img />).

Aligner trois colonnes proprement. C'est un problème auquel se confrontent régulièrement les intégrateurs : créer un design en trois colonnes - habituellement, deux menus latéraux (appelés "sidebar") et une colonne centrale pour le contenu du site.

Aligner trois colonnes proprement

Mais c'est en réalité très simple à faire, et nous allons voir comment. Le html La première chose, c'est d'abord de placer les trois colonnes dans un conteneur, que nous appellerons ici "page". Ensuite, il faut mettre les éléments flottants (les sidebar donc) avant le corps central. Comme toujours, essayez d'ajouter un peu de contenu pour pouvoir voir les effets ; utilisez par exemple le générateur de lipsum. Un site qui prend toute la hauteur disponible. Lorsqu'on crée un design dont la particularité est que le pied de page soit toujours au bas de l'écran, on se heurte à un petit soucis de conception : comment définir une hauteur minimale à la fenêtre ?

Un site qui prend toute la hauteur disponible

Nous allons voir une solution possible. Tout d'abord, comprenons bien de quoi l'on parle dans ce tutoriel, et pour cela, nous allons d'abord illustrer le problème. Lorsqu'un site possède une hauteur totale plus grande que l'écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu'au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou "footer" en anglais, est alors fixé naturellement au bas de la page et de l'écran. Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l'écran, alors le pied-de-page, toujours placé au bas de la page, n'atteint pas le bas de l'écran. Si certains design ne sont pas gênés par cette éventualité, ce n'est pas le cas de tous. Nous allons maintenant voir comment faire ceci. Le html. CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.

Animations – FrogWeb. CSS3 Patterns Gallery. Wave (294 B)✖by Paul Salentiny Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+.

CSS3 Patterns Gallery

However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Css / Css3.