50+ techniques CSS3 géniales pour de meilleurs designs
CSS3 prend de l'ampleur malgré le fait que la norme n'a même pas été finalisée.
Il existe des centaines de tutoriels pour apprendre aux concepteurs à l'utiliser, mais malheureusement, beaucoup d'entre eux couvrent le même terrain.
Et certains des didacticiels enseignent aux concepteurs de faire des choses qu'ils pourraient ne pas considérer comme utiles, bien que les techniques puissent généralement être adaptées pour s'adapter parfaitement à un projet.
Vous trouverez ci-dessous plus de cinquante didacticiels CSS3. Beaucoup sont strictement basés sur CSS et HTML, tandis que d'autres incorporent également du JavaScript.
Si vous avez une technique préférée ou un tutoriel qui n'est pas inclus ci-dessous, partagez-le dans les commentaires!
Utilisation de CSS3 pour une illustration sans image
Diverses nouvelles méthodes de CSS3 permettent de créer un certain nombre de graphiques très complexes en utilisant des CSS et des images pures. Voici quelques exemples parmi les meilleurs.
Pure CSS Illustration iPhone
Un mélange de bordures, de transformations et de dégradés pour créer une image animée d'un iPhone.
Création du logo du navigateur Opera dans CSS3
Une illustration propre du logo Opera rendu en utilisant les techniques CSS3.
Notre système solaire avec CSS3
Un rendu élégant du système solaire avec des effets d'animation.
Effet d'horloge analogique
Créez une horloge analogique cool en utilisant uniquement CSS3 et jquery.
Expériences d'ombre
Ce tutoriel montre comment utiliser les ombres CSS pour créer divers effets, y compris un graphique de la face cachée de la lune, un tableau périodique ombré et même un «philtre d'amour» psychédélique.
Création d'images de style Polaroid avec juste CSS
Ce tutoriel utilise les effets CSS2 et CSS3 pour ajouter un style Polaroid à une simple liste d'images.
CSS3 Texte, mise en page et effets de couleur
CSS3 peut être utilisé pour beaucoup d'animations et de graphismes différents, mais il est également idéal pour les effets de mise en page, de texte et de couleur auxquels vous auriez pu avoir recours auparavant.
Utilisation de colonnes CSS3
Coder un module CSS3 multi-colonnes propre.
Implémentation CSS3 générale
Un aperçu des avantages de CSS3.
Liens de style avec CSS3
Quatre manières différentes de styliser différents types de liens avec CSS3
CSS3 Accordéon Vertical
Les dégradés et les transitions font de ce menu d’accordéon une liste ordonnée sur les anciens navigateurs.
Super CSS3 Badges publicitaires
Des boutons dégradés de couleur avec une ombre portée qui fonctionnent sur des arrière-plans clairs ou foncés et ne nécessitent aucune image!
Boutons de style Photoshop avec CSS3
Une comparaison côte à côte de la façon de créer des boutons CSS3 sans images et avec Photoshop.
Css Effet Texte Dégradé
Instructions pour créer un effet de texte unique en appliquant une texture à un texte. Vous pouvez utiliser des dégradés ou des motifs pour créer des effets de texte.
Quelques alternatives CSS3 aux effets JavaScript
7 façons de remplacer les effets JavaScript couramment utilisés par CSS3 pour que votre site soit prêt pour l'avenir.
Effet de texte CSS3 en relief
Création d'un effet de texte en relief sans piratage du navigateur Photoshop.
Comprendre les valeurs de couleur CSS3
Tout sur les nouvelles options de couleur disponibles avec CSS3.
Créer des effets riches avec CSS3
Les transitions et transformations CSS peuvent être combinées pour créer divers effets.
Faire un effet CSS3 Bokeh
La possibilité d'utiliser des dégradés et de la transparence avec CSS3 rend cet effet classique possible.
Colonnes CSS3
Un bon tutoriel vidéo sur le concept d'utilisation des colonnes CSS3 pour la mise en page.
Listes fantaisie avec CSS3
Cool style liste à puces en utilisant CSS3 pour faire des coches fantaisie.
Infoboxes Imaginables Très Slick Avec CSS3
Les techniques rendues possibles par CSS3 rendent ces boîtes vraiment pop.
Bulles
Les pseudo-éléments de contour-rayon et de transformation rendent ces formes possibles.
Effets de transition d'image de style flash
Une manière intelligente d'utiliser l'effet d'animation CSS.
Recréer l'écran de mise à jour de Tumblr avec CSS3
Un effet de conception CSS3 qui se dégrade bien pour les navigateurs plus anciens.
Subtile typographie CSS3 que vous jurez a été faite dans Photoshop
Ce tutoriel vidéo de 13 minutes vous montrera comment créer un bel effet typographique 3D subtil avec CSS3.
Rotation de texte avec CSS
Voici une technique légèrement plus ancienne qui montre comment créer un texte compatible avec les différents navigateurs et pivoté pour s'aligner sur un axe vertical.
Créer un effet de typographie avec CSS Text-Shadow
Ce tutoriel Line25 vous montrera comment utiliser les ombres de texte pour créer un effet de style typographique sur le texte de votre site Web.
Superbe Galerie CSS3 Lightbox avec jQuery
Ce code crée une galerie d'images de style Polaroid avec une option de partage par glisser-déposer.
Superbes superpositions
Ce tutoriel de Zurb montre comment créer des superpositions d’image à l’aide des propriétés de bordure CSS3, qui peuvent ensuite être utilisées pour afficher des informations supplémentaires sur une image lorsque celle-ci est survolée.
Étiquettes de formulaire en ligne impressionnantes
Ce tutoriel vous montre comment créer des étiquettes de formulaire en ligne qui ne disparaissent pas lorsque vos visiteurs commencent à taper.
CSS3 Effets 3D
Cube CSS3 animé
Un cube animé 3D unique utilisant des transformations 3D stylisées avec CSS. Le cube peut être pivoté à l'aide des touches fléchées pour afficher les informations affichées sur chaque face.
CSS3 3D Rubans
Approfondissez votre conception en utilisant ces rubans de CD CSS3 faciles à utiliser.
Affiche 3D animée Scroller
Affichage d'affiches de films avec des légendes en utilisant un effet de perspective 3D stupéfiant dans CSS3.
3D CSS3 Coke Can
Faire glisser une barre de défilement fait que ce Coke virtuel peut se déplacer d'avant en arrière.
Ombres CSS
Styliser créativement les ombres en les détachant de l'élément.
Animation CSS3
Un rendu d'animation de la baleine d'échec de Twitter avec CSS3
Un utilisateur très élégant de CSS3 qui se dégrade étonnamment bien dans les navigateurs plus anciens.
Fond de Starfield Parallax
Les stars se déplacent de gauche à droite derrière votre contenu avec ce look classique de voyage dans l'espace.
Affichage et masquage du contenu avec CSS3
Développer et contracter des plateaux et des arborescences de menus sans JavaScript.
Un onglet de suivi flottant avec CSS3
Mettez vos icônes de navigation ou de contact à portée de main grâce à cette méthode utile.
Fenêtres modales CSS3
Un couple de fenêtres modales communes générées à l'aide d'effets CSS3 et de transformations.
Spinners utilisant uniquement CSS3
Créer des animations de chargement en utilisant uniquement CSS3 et pas de gifs animés!
Affichage d'icônes sociales à l'aide de CSS3
Un effet de fondu sympa pour afficher vos icônes sociales à l'aide de CSS3 pur.
Animation de bande dessinée CSS3
Créer une animation Flash-style en utilisant uniquement CSS3 et jquery.
Un paysage animé utilisant CSS3
Montagnes et nuages et eau tous animés avec CSS3.
De jolies légendes de défilement animées
Les transitions CSS3 vous permettent de faire des choses étonnantes avec des légendes de texte. Voici un exemple.
Un menu de vignettes élastiques
Une série d'images qui s'étendent et se rétractent lorsqu'elles survolent.
Cartes d'index dynamique empilées
Un effet d'animation fantastique qui pourrait être appliqué à de nombreux designs.
Une horloge colorée avec CSS & jQuery
Ce tutoriel montre comment créer une horloge colorée vraiment géniale en utilisant CSS et jQuery, composée de trois cercles de chargement distincts affichant les heures, les minutes et les secondes.
Pure CSS3 At-At Walker
Ceci est un exemple impressionnant qui utilise CSS3 (pas de JavaScript, pas de Flash) pour créer un At-At Walker animé de Star Wars. Le seul inconvénient est qu'il est actuellement uniquement visible dans les navigateurs Webkit (Safari et Chrome).
Créer un curseur de contenu jQuery à l'aide de CSS pur
Apprenez à créer un curseur purement CSS de style jQuery avec ce tutoriel.
Menu déroulant CSS3
Ce didacticiel de WebDesignerWall montre comment créer un menu déroulant CSS3 compatible avec tous les navigateurs et qui fonctionne également dans les navigateurs qui ne prennent pas en charge CSS3 (même si leur style est limité).
Écrit exclusivement pour WDD par Cameron Chapman .
Si vous connaissez d'autres didacticiels CSS3 de haute qualité qui n'ont pas été abordés ci-dessus et que vous souhaitez partager, veuillez le faire dans les commentaires!