Guide du débutant à CSS3
Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.
Depuis l'annonce de 2005, le développement du niveau 3 de Cascading Style Sheet ou mieux connu sous le nom de CSS3 a été étroitement surveillé et suivi par de nombreux concepteurs et développeurs. Nous sommes tous impatients de mettre la main sur les nouvelles fonctionnalités de CSS3 - les ombres de texte, les bordures avec des images, l'opacité, plusieurs arrière-plans, etc., pour n'en nommer que quelques-unes.
À ce jour, tous les sélecteurs de CSS3 ne sont pas encore entièrement pris en charge. Mais cela ne signifie pas que nous ne pouvons pas nous amuser à tester de nouvelles choses CSS3. Ce post est dédié à tous les concepteurs et développeurs qui sont déjà familiers avec CSS 2.1 et veulent se salir les mains sur CSS3.0.
C'est une compilation de lectures CSS3, de codes d'échantillons, de conseils, de tutoriels, de triches et bien plus encore. N'hésitez pas à les utiliser dans vos projets, assurez-vous qu'il tombe gracieusement sur les navigateurs incompatibles.
Premiers pas avec CSS3
Introduction à CSS3
Un (roadmap) introduction officielle à CSS et CSS3. Ce document vous donne une idée globale sur le développement de CSS3.
CSS3: Amène le design au niveau suivantLes avantages de CSS3, avec des explications et des exemples de propriétés CSS3 et des sélecteurs.
Plusieurs astuces avec CSS3Webmonkey vous propose plusieurs astuces de base dans CSS3, notamment des bordures arrondies, des bordures, des ombres portées, des astuces d'images et bien plus encore.
Interview: Six questions avec Eric Meyer sur CSS3Folks at Six Revision a interviewé Eric Meyer avec des idées et des réponses précieuses sur CSS3.
CSS3: Amélioration progressiveComment utiliser des techniques d'amélioration gracieuses (ou progressives) pour utiliser les fonctionnalités CSS3 dans les navigateurs qui les prennent en charge, tout en garantissant que votre code offrira une expérience utilisateur satisfaisante dans les anciens navigateurs qui ne prennent pas encore en charge ces fonctionnalités.
CSS3: Arrière-plan et borduresBordures arrondies (border-radius)
Un guide pour créer une bordure arrondie avec la propriété border-radius
de CSS3.
Comment utiliser les images dans les bordures avec border-image
propriété border-image
.
Explication détaillée avec des exemples de nouvelles propriétés CSS3 telles que: background-clip
, background-origin
, background-attachment
, box-shadow
, box-decoration-break
, border-radius
et border-image
.
Effet typographique
Créez un effet de typographie simple avec CSS3.
Six effets de texte en utilisant l'ombre du texteLes effets de texte comprennent: vintage / rétro, néon, encart, anaglyphique, feu et jeu de société.
Belle typographieComment prendre le balisage de base et le transformer en un design typographique attrayant et beau à travers CSS3 pur.
Rotation de texteUtilise un sprite d'image et une pincée de CSS pour que les choses soient bien positionnées.
Texte de contourComment ajouter un contour ou un trait à votre texte à l'aide de la propriété CSS3 text-stroke
.
Effet de masquage de texte interactif à l'aide de la propriété CSS text-shadow
.
Ditch Javascript et créer un effet de nudge entièrement avec CSS3.
Style de sélection CSSChanger le style de sélection de texte avec CSS3.
CSS3: MenuContenu à plusieurs colonnes
Utilisation de CSS3 pour créer un ensemble de colonnes sur votre site Web sans avoir à affecter des couches individuelles et (ou) des paragraphes pour chaque colonne.
Des info-bulles sexy avec juste CSSComment utiliser le standard CSS évolutif peut améliorer de jolies infobulles cross-browser.
Plus d'info-bulles:- Info-bulle Pure CSS3
- Infobulles avec CSS3.
Menu déroulant
Comment créer un menu déroulant multi-niveaux Apple.com à l'aide de border-radius
, box-shadow
et text-shadow
.
Cliquez sur un onglet, masquer tous les panneaux, montrez celui correspondant à l'onglet sur lequel vous avez cliqué - le tout avec CSS.
Rubans 3D avec CSS3Créez de jolis rubans 3D avec seulement CSS3.
CSS3: Ombre portéeOmbre portée dans l'image
Présentez plusieurs techniques et certaines des apparences possibles pour laisser tomber des ombres sans utiliser d'images.
Glow Tabs avec Box ShadowComment créer des onglets intuitifs et magnifiques en CSS3 sans image.
CSS3: BoutonsTutoriel: Jolis boutons
Comment créer de superbes boutons CSS3 compatibles avec les navigateurs, qui se dégradent facilement.
BullesDifférentes formes d'effet de bulle de discours créé avec CSS 2.1 et amélioré avec CSS3.
Boutons semblables à GithubCollection de boutons qui montrent ce qui est possible en utilisant CSS3 tout en conservant le balisage le plus simple possible.
Spinning, Fading Icons avec CSS3 et MooToolsComment utiliser CSS3 et MooTools pour créer des éléments rotatifs dymaniques.
Superposition d'imageApplication 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 dans le travail de base MooTools.
- Exploding Logo avec CSS3 et MooTools ou jQuery. Prenez l'image statique et faites-en un effet animé et explosif sur la souris.
- 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.
- Spinning Rays avec des animations CSS3 et JavaScript Exemple. Effet de rotation de rayon simple et subtil à l'arrière d'une image.
- CSS3 Polaroid Galerie de photos. Comment créer une super pile de photos Polaroid avec un style CSS pur.
- HTML 5 et CSS 3: Les techniques que vous utiliserez bientôt. Une procédure pas à pas pour créer un blog à partir de HTML5 et de CSS3.
Cheatsheets et références
CSS3 Cheat Sheet (PDF)
Cheatsheet imprimable avec la liste complète de toutes les propriétés, les types de sélecteur et permet des valeurs dans la spécification CSS3 en cours à partir du W3C.
Support CSS dans Opera 9.5
Liste complète des sélecteurs CSS pris en charge dans Opera 0.5.
Polices disponibles pour @ font-faceListe complète des polices actuellement sous licence pour l'incorporation @font-face
.
Un guide et une référence aux sélecteurs CSS3 et ses modèles.
Générateur de règles CSS3 inter-navigateursRègles CSS3 que vous pouvez copier et coller sur votre propre feuille de style.
CSS3 Cliquer tableau
Obtenez des styles CSS3 comme la taille de la boîte, le rayon de la bordure, l'ombre du texte, et plus encore en un clic.
Contenu CSS et compatibilité du navigateurListe complète des tables de sélecteur CSS et CSS3 avec déclaration pour la vérification de la compatibilité du navigateur.
Bloguer pour vous-même. Blogging du personnel: Lequel devriez-vous choisir?
Fini le temps où "weblog" ou "blog" pour faire court était essentiellement un terme sophistiqué pour "journal en ligne". Aujourd'hui, vous auriez du mal à trouver une grande entreprise ou une petite entreprise qui n'a pas de blog à des fins promotionnelles et d'engagement .Cett
YouTube VR est désormais disponible pour les smartphones compatibles Daydream
Avec le Daydream View maintenant disponible à l'achat, Google a décidé de lancer YouTube VR pour tous ceux qui possèdent un smartphone compatible Daydream et le casque VR de Google .La première chose que vous remarquerez à propos de YouTube VR est l'interface utilisateur que Google a conçue en pensant à VR. Bien q