background preloader

20 tutoriaux CSS3 pour vous préparer au futur du web

20 tutoriaux CSS3 pour vous préparer au futur du web
Le web design évolue constamment, au grès des modes et des technologies. Les graphistes et designers doivent non seulement garder un oeil sur les nouvelles tendances mais aussi sur les dernières technologies comme jQuery, HTML5 et CSS3, qui permettent d’exprimer une plus grande créativité tout enrichissant l’expérience de l’utilisateur. Ces 20 tutoriaux CSS3 vous permettront d’apprendre à coder de superbes éléments web interactifs. Ajoutez ces sites à vos favoris, et prenez votre temps… N’hésitez pas à partagez de billet avec vos collègues / amis ! Ces 20 tutoriaux CSS3 ont été référencés sur web design ledger par Tomas Laurinavicius. Construisez rapidement une page annonce (teaser) en CSS3 Avec ce tutoriel, vous apprendrez à créer une page annonce en utilisant uniquement CSS. Créer un menu déroulant avec CSS3 Avec ce tutoriel relativement simple, vous apprendrez à coder un menu déroulant en CSS3 pour un résultat simple, propre et professionnel. Accordéon avec CSS3 Tableaux de prix en CSS3

http://www.marevueweb.com/inspiration-design-graphique/20-tutoriaux-css3-pour-vous-preparer-au-futur-du-web/

Related:  CSS3CSSDev Web

Fenêtre modale 100% CSS TI1 Projet final | fenêtre modale Il est possible de créer une fenêtre modale uniquement à l'aide de CSS. La technique décrite ici utilise la pseudo-classe :target issue des CSS3. Le résultat est compatible avec les navigateurs actuels, mais ne fonctionne pas sous IE <9 et Firefox <4. Remarquez que l'apparition de la fenêtre modale étant basée sur un appel d'ancre HTML, elle modifie l'URL de la page courante par l'ajout d'un « hashtag ». Cela n'occasionne généralement pas de problème sauf dans le cas où une application web installée dans la même page utilise aussi cette astuce.

CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations.

Les effets graphiques (très) avancés en CSS Vincent De Oliveira · Kiwiparty 2012 t.co/Vw9tDej Vincent De Oliveira Les effets (presque) courants Quoi de plus? Ajout d'une police en css - ajouter votre font via CSS Programmation web / CSS / ajout police non stadard a une page web Pour ajouter un font pour afficher sur un site web si un internaute n'a pas la police il existe une solution assez simple qui est compatible avec les différents navigateurs. Étapes :Trouver d'abord une police au format ttf, si vous avez uniquement la version .otf de la police vous pouver la convertir via le site web suivant :

:before Cet article nécessite une relecture technique. Résumé :before crée un pseudo-élément qui sera le premier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément, en utilisant la propriété CSS content. C'est un élément de type en-ligne par défaut. Mise en page et CSS Introduction à la mise en page par les CSS Les CSS permettent de gérer deux aspects relativement distincts de la présentation de vos pages : La présentation des textes, en jouant sur la taille, la couleur, l'interligne, le type de caractère, la graisse, etc.La mise en page, en gérant la disposition des principaux élements (en-tête, menu, pied de page, etc.) et de leurs contenus.

Bonnes pratiques pour les déclarations @font-face Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Malheureusement, les constructeurs ainsi que les fondeurs ne parvinrent pas à se mettre d’accord à l’époque sur un format de fonte et le haut débit n’étant pas encore généralisé, cette technologie ne fut que peu ou pas utilisée. En conséquence, lors de l’écriture de la norme CSS 2.1, cette fonctionnalité fut purement et simplement supprimée.

21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Dégradés CSS - Apprendre le CSS Les dégradés font partie du CSS Image Values and Replaced Content Module Level 3 actuellement en CR (Candidate Recommandation). Les dégradés permettent de créer une image qui représente une transition douce d’une couleur à une autre. Les types de dégradés Il existe 4 types de dégradés, qui sont les suivants : linear-gradient permet de créer un dégradé linéaire. radial-gradient permet de créer un dégradé radial. repeating-linear-gradient permet de créer un dégradé linéaire avec répétition. repeating-radial-gradient permet de créer un dégradé radial avec répétition. La syntaxe du W3C

Comment utiliser une fonte «non-standard» sur un site Web Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur. Quand @font-face tombe à l'eau

2 effets CSS3 assez saisissants Je vais aujourd’hui vous montrer comment réaliser deux effets assez intéressants en CSS3. Le premier est une sorte de fade in / fade out et le deuxième est une lueur externe avec l’attribut box-shadow À ce jour, les transitions en css ne sont pas encore au point sur la plupart des navigateurs mais le fait d’utiliser ces effets ne perturbera en aucun cas la navigation dans votre site. Et pour les navigateurs sur lesquels elles marchent (Safari et Chrome) la navigation sera encore plus agréable. Donc pour voir les effets dans de meilleures conditions, utilisez Chrome ou Safari. Comment fonctionne la propriété CSS z-index La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement. Mais l'utilisation de cette propriété comporte quelques pièges. Il y a deux informations principales à retenir : 1.

CSS 3 transform : rotation et échelle Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate). Ces effets peuvent s’appliquer à toute balise. Ici j’ai choisis une liste d’images mais j’aurai très bien pu prendre un menu, un paragraphe, etc… Voici une démonstration du résultat : (c’est toujours pareil, les propriétés CSS3 ne sont pas reconnus par tous les navigateurs et donc je vous conseil de vous munir d’un navigateur récent tel que Chrome 12, Firefox 4, Safari 5 ou bien Internet Explorer 9) Et à présent voici le code à utiliser :

Related: