Guide du débutant à CSS3
Depuis l’annonce de 2005, le développement de la feuille de style en cascade de niveau 3, mieux connu sous le nom de CSS3, a été suivi de près par de nombreux concepteurs et développeurs. Nous avons tous hâte de mettre la main sur les nouvelles fonctionnalités de CSS3 - les ombres de texte, les bordures d'images, l'opacité, les arrière-plans multiples, etc., pour n'en nommer que quelques-unes..
À ce jour, tous les sélecteurs de CSS3 ne sont pas encore totalement pris en charge. Mais cela ne signifie pas que nous ne pouvons pas nous amuser à tester de nouvelles fonctionnalités CSS3. Cet article est destiné à tous les concepteurs et développeurs qui sont déjà familiarisés avec CSS 2.1 et qui souhaitent se familiariser avec CSS3.0..
Il s'agit d'une compilation de lectures CSS3 utiles, de codes exemples, de conseils, de didacticiels, de feuilles de triche, etc. N'hésitez pas à les utiliser dans vos projets, assurez-vous simplement qu'ils tombent bien sur des navigateurs incompatibles..
Débuter avec CSS3
Introduction à CSS3
Une introduction officielle (CSS) à CSS et CSS3. Ce document vous donne une idée générale sur le développement de CSS3.
CSS3: Amenez le design au prochain niveau
Avantages de CSS3, avec des explications et des exemples de propriétés et de sélecteurs CSS3.
Plusieurs astuces avec CSS3
Webmonkey vous propose différentes astuces de base en CSS3, notamment des bordures arrondies, des bordures, des ombres portées, des astuces sur les images, etc..
Interview: Six questions avec Eric Meyer sur CSS3
Folks at Six Revision a interviewé Eric Meyer pour lui faire part de ses idées et réponses sur CSS3..
CSS3: amélioration progressive
Comment vous pouvez utiliser des techniques d'amélioration progressives pour utiliser les fonctionnalités CSS3 dans les navigateurs qui les prennent en charge, tout en garantissant que votre code fournira toujours une expérience utilisateur satisfaisante dans les navigateurs plus anciens qui ne prennent pas encore en charge ces fonctionnalités.
CSS3: Contexte et frontières
Frontières arrondies (rayon-rayon)
Un guide pour créer des bordures arrondies avec CSS3 rayon de la frontière propriété.
Bordures arrondies avec image (images de bordure)
Comment utiliser des images dans les bordures avec image de bordure propriété.
CSS3 bordures, arrière-plans et boîtes
Explication détaillée avec des exemples de nouvelles propriétés CSS3 telles que: clip de fond, fond d'origine, pièce jointe, boîte ombre, boîte-décoration-pause, rayon de la frontière et image de bordure.
CSS3: texte
Effet typographique
Créer un effet typographique simple avec CSS3.
Six effets de texte utilisant l'ombre du texte
Les effets de texte incluent: vintage / rétro, néon, encart, anaglyphique, feu et jeu de société.
Belle typographie
Comment utiliser le balisage de base et le transformer en un design typographique attrayant et magnifique au moyen de CSS3 pur.
Rotation du texte
Utilise un sprite d’image et une pincée de CSS pour bien positionner.
Texte de contour
Comment ajouter un contour ou un trait à votre texte à l'aide du CSS3 trait de texte propriété.
Effet de masquage de texte
Effet de masquage de texte interactif utilisant le ombre de texte Propriété CSS.
Lien nudging (animation) avec CSS3
Ditch Javascript et créer un effet de Nudge entièrement avec CSS3.
Style de sélection CSS
Changer le style de sélection de texte avec CSS3.
CSS3: Menu
Contenu à plusieurs colonnes
Utilisation de CSS3 pour créer un ensemble de colonnes sur votre site Web sans avoir à attribuer des calques individuels et (ou) des paragraphes pour chaque colonne.
Infobulles sexy avec seulement CSS
L’utilisation de la norme CSS en évolution peut améliorer certaines infobulles inter-navigateurs..
Plus d'info-bulles:
- Info-bulle pure CSS3
- Info-bulles avec CSS3.
Menu déroulant
Comment créer un menu déroulant à plusieurs niveaux semblable à Apple.com à l'aide de rayon de la frontière, boîte ombre, et ombre de texte.
Zone à onglet CSS3 uniquement
Cliquez sur un onglet, masquez tous les panneaux, affichez celui qui correspond à l'onglet sur lequel vous venez de cliquer - tous avec CSS.
Rubans 3D avec CSS3
Créez de jolis rubans 3D avec uniquement du CSS3.
CSS3: Ombre portée
Ombre portée en image
Présentez plusieurs techniques et certaines des apparences possibles pour supprimer des ombres sans utiliser d'images.
Onglets Lumineux avec Box Shadow
Comment créer des onglets intuitifs et beaux en CSS3 sans image.
CSS3: boutons
Tutoriel: Jolis boutons
Comment créer de beaux boutons CSS3 compatibles cross-browser qui se dégradent gracieusement.
Bulles
Différentes formes d’effet de bulle de dialogue créées avec CSS 2.1 et améliorées avec CSS3.
Boutons Github semblables
Collection de boutons qui montrent ce qui est possible avec CSS3 tout en maintenant le balisage le plus simple possible.
Spinning, Fading Icons avec CSS3 et MooTools
Comment utiliser CSS3 et MooTools pour créer des éléments rotatifs dymaniques.
Superposition d'image
Application pratique de la propriété CSS3 border-image.
Plus
- CSS3 + Mootools. Un exemple d'expérimentation dans mootools. Cela ajoute des propriétés CSS3 au travail sur les cadres MooTools..
- Logo éclatant avec CSS3 et MooTools ou jQuery. Prenez une image statique et faites-en un effet éclatant et animé lorsque vous passez la souris dessus.
- La puissance de HTML 5 et CSS 3. HTML 5 et CSS 3 gagnent rapidement en popularité, Perishable Press est là pour expliquer comment et pourquoi.
- Rayons en rotation avec des animations CSS3 et exemple JavaScript. Effet de rayon simple et subtil à l'arrière d'une image.
- Galerie de photos Polaroid CSS3. Comment créer une pile de photos Polaroid avec un style CSS pur.
- HTML 5 et CSS 3: les techniques que vous allez bientôt utiliser. Procédure pas à pas pour créer un blog à partir de zéro avec HTML5 et CSS3.
Cheatsheets & Références
Aide-mémoire CSS3 (PDF)
Feuille de cheats imprimable avec la liste complète de toutes les propriétés, types de sélecteurs et permet les valeurs de la spécification CSS3 en cours du W3C.
Prise en charge CSS dans Opera 9.5
Liste complète des sélecteurs CSS pris en charge dans Opera 0.5.
Polices disponibles pour l'incorporation @ font-face
Liste complète des polices actuellement sous licence pour @ font-face enchâssement.
Sélecteurs CSS 3 - Expliqué
Un guide et une référence aux sélecteurs CSS3 et ses modèles.
Générateur de règles CSS3 inter-navigateurs
Règles CSS3 que vous pouvez copier et coller sur votre propre feuille de style.
CSS3 Cliquez sur le graphique
Obtenez en un clic des styles CSS3 tels que la taille de la boîte, le rayon de la bordure, l'ombre du texte, etc..
Compatibilité du contenu CSS et du navigateur
Liste complète des tables de sélecteurs CSS et CSS3 avec déclaration de vérification de la compatibilité du navigateur.
