background preloader

Parallaxe (sans JavaScript)

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. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!

http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript

Related:  CSSHTML/CSSCSSCSS

Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree.

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible.

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. CSS3 Parallax without JavaScript This demo is a nod to the Stop Wars' Mission that I invite you to discover. The remainder of this text is Schnapsum… Lorem Salu bissame ! Wie geht's les samis ? Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît.Voss ? Une Carola et du Melfor ?

Des infobulles en CSS3 Si une icône ou un bouton ne permet pas de mettre suffisamment de texte (ou ne permet pas d'en mettre du tout) ou s'il nécessite des informations supplémentaires, alors vous aurez certainement besoin d'une infobulle pour cela. Pourquoi ? Tout simplement parce qu'il est prouvé que les infobulles permettent d'améliorer l'ergonomie de votre site. Ceci étant dit, cet article va vous montrer comment créer vos propres infobulles uniquement en CSS3 : sans image et sans JavaScript. Cet article est la traduction de CSS3 tooltips publié sur Red Team Design. 5 commentaires

6 Effets de Rollover avec jQuery et CSS3 » Le blog de Fredods Quelques Effets de Rollover avec jQuery et CSS3 Aujourd’hui je vais vous montrez quelques effets de « mouse over » intéressants utilisant jQuery et CSS3. Les effets de « mouse over », rollover, pour peu qu’il soit bien géré sont très attirant pour vos visiteurs qui prendront plaisir à la navigation sur votre site, l’expérience utilisateur en sera bien meilleur. Voici la liste de 6 effets jQuery des plus impressionnants avec différent style. À Noter : Ces effets marcheront uniquement sur les navigateurs qui supportent ces fonctions, donc pensez à faire les mises à jour de vos navigateurs si ils sont obsolètes. Direction-Aware Hover Effect

CSS3 – Effet de feuilles superposées Il y a quelques jours de cela je répondais à un petit tweet d’un confrère pour donner une astuce sur la création d’un effet graphique de feuilles superposées en CSS3. Le défi était de ne pas multiplier les éléments HTML pour réaliser cet effet. C’est chose faite. Jetons un œil sur la technique utilisée. Tweet et réponse :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é. Les marges en CSS avec margin et padding Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures. Quand on a dit ça, on pourrait croire que ça suffit tant ça paraît simple. En fait, ce n'est pas tout à fait vrai...

Menu déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Ressources et Tutoriels : transitions et animations en CSS3 Je le prédis comme une grosse tendance pour 2013 : l’adoption et l’utilisation massive d’animations en CSS3 pour agrémenter l’expérience utilisateur et apporter de l’originalité au design. Les possibilités d’animation offertes par le CSS3 poussent l’interaction plus loin, et cela relativement facilement. Voici une liste de liens regroupant chacun plusieurs tutoriels et ressources à télécharger gratuitement tirant profit de ces nouvelles possibilités. Plus besoin de Flash pour réaliser de petites animations et effets divers.

HTML5 : l’élément progress, avancement d’une tâche - Veille technologique L’élément progress en HTML5 permet de visualiser l’avancement d’une tâche. C’est un élément encore assez méconnu mais qui peut être pratique dans quelques cas où vous avez besoin de permettre à l’utilisateur de visualiser une évolution ou un stade précis dans un processus. Voyons comment l’intégrer et styler cet élément. Quelques exemples d’utilisation Avant de nous lancer dans du code, voici quelques idées ou exemples d’intégration d’un tel élément dans votre code.

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.

Related:  Effet Parallaxeffet paralaxWeb design / devParallaxblogs, graphismes codes et templatesDoriane Mouhéantony77