background preloader

CSS3 Patterns Gallery

CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

Related:  html/css

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 ? 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.

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit. Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ? Les propriétés CSS3 utilisées ici sont les suivantes : border-radius pour les bords arrondisbox-shadow pour les ombres des blocscontent pour rajouter du contenu au HTMLgradient pour les dégradés des blocsrgba pour avoir des fonds transparentstext-shadow pour les ombres du texte Comprendre les couleurs CSS3 CSS3 fourni plusieurs propriétés pour manipuler les couleurs : hsl, hsla, rgba, opacity. Nous décrivons ici comment les utiliser. Le RGB (red, green, blue) - en français RVB : rouge vert bleu - est le format de codage des couleurs utilisé dans les versions précédentes du CSS.

HTML, les couleurs 6.1 Couleurs RGB En plus de quelques noms prédéfinis (red, blue, green, yellow, etc.) les couleurs informatiques sont définies par leur décomposition en 3 couleurs primaires qui sont rouge (Red), vert (Green) et bleu (Blue) : c'est le système RGB. Toute couleur est alors définie par 3 nombres (entre 0 et 2551 qui définissent chacun la quantité de la couleur primaire correspondante qui doit intervenir. Prefixr, rendez compatible votre CSS sur tous les navigateurs ! La compatibilité du CSS sur tous les navigateurs est un élément clé dans la conception d’un site web. Depuis l’arrivée de CSS3 et de ses nouvelles propriétés, il faut en général entrer trois fois une même propriété afin que chaque navigateur puisse l’interpréter, et l’appliquer. C’est un travail lourd, et très répétitif. Prefixr vous allègera grandement ce travail, puisqu’il localisera les propriétés CSS3 et les rendra compatible à chaque navigateur. Dans votre feuille de style, vous n’aurez désormais plus qu’à taper une seule propriété :

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. Mais c'est en réalité très simple à faire, et nous allons voir comment. Le html Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3 Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Définir des bordures en CSS3 Introduction Grâce au CSS3, les bordures deviennent plus personnalisables et offrent désormais la possibilité d'utiliser des dégradés, des coins arrondis, des ombres et des images. Continuez la lecture de cette page pour découvrir comment mettre en place des bordures en CSS3. Pour commencer, il faut savoir que les spécifications CSS3 n'étant pas terminées, chaque navigateur reconnait certaines propriétés. Les propriétés Firefox commencent par "-moz" et celles de Safari/Chrome commencent par "-webkit". Pour mettre en place des bordures en CSS3, il faut utiliser les propriétés suivante :

Related:  Outils WebResourcesHTML // CSSCSSHTML5CSS3Design pattern libraryPattern und Texturen