background preloader

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

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 J’utilise aussi les pseudo-classes CSS3 suivantes : :after pour rajouter du texte HTML à la suite d’un élément:last-child pour sélectionner le dernier enfant d’un élément:target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML. Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).

http://bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript

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+. Osez HTML5 et CSS3 ! - Alsacréations Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens

Transitions CSS3 - Alsacr?ations Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage.

Fluid CSS3 Slideshow with Parallax Effect In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source Apprendre le HTML5 – Tutoriel complet Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5. Chaque chapitre est rédigé de façon concise et compréhensible par tous. Ils sont divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances. Chaque point détaillé est inclus dans un exemple concret et certains sont accompagné de démo consultable en ligne. L’ensemble du cours – en constante évolution - est accessibles à tous quelque soit votre niveau :

Buildez vos slides en HTML5 avec Deck.js Deck.js est une excellente bibliothèque JavaScript pour monter vos presentations (slides) en HTML5 . Deck.js utilise des techniques CSS3 et Javascript et presente des effets de transitions assez « smooth ». La librairie fournit des modeles de themes standard pour accélerer le développement de vos slides. Deck.js a été testé avec jQuery 1.6 + et fonctionne dans IE7 +, Chrome , FF, Safari et Opera. Exigences: 1,6 + jQuery Démo: Licence: MIT, la licence GPL

CSS Buttons with Pseudo-elements In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. View demo Download source Hola, amigos. Html5, Aide mémoire ou mémo Nous vous avons concocté un mémo ou aide mémoiree pour le HTML5. Finis les oublis et les pertes de temps dû aux recherches. Avec notre Mémo Html5 visualisez d’un seul coup d’œil l’ensemble des balises, attribut et évènement. 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 ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height.

HTML 5 Tutorial Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple :

Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps. la démonstration

Génerateur de DIV arrondies

Related: