background preloader

CSS3 & HTML5 Experiments That Will Blow Your Mind - 47 Examples

CSS3 & HTML5 Experiments That Will Blow Your Mind - 47 Examples
While I was checking out various CSS3 and HTML5 experiments I also looked at the first ones that appeared for these new web technologies and they weren’t at all impressive, at the moment. Back then, though, they were insanely awesome. They were something that we have never seen before. I hope that in the near future, the experiments that are in this article, or most of them, will be something that anyone can think of and do on a daily basis for their clients. At the moment, unfortunately, some of these remain at the state of being called experiments, mostly because they aren’t supported by all the browsers. CSS3D Clouds Madmanimation cubic-bezier Clock Windows7 Start Menus CSS3 animations CSS3 Animation: Why not Zoidberg? Tilt shift text 3D City Every second one hour of video is uploaded to Youtube CSS3 patterns Wave Morphing cubes Experimental CSS3 Animations CSS Zoetrope Homer Animatable DOM Tree Animated Web Banners With CSS3 Typography Rain Animated icons vlog.it Fractals Creative CSS3 Animation Menus Related:  CSS

CSS Transitions, Transforms and Animation Tutorial New Technologies and 21st Century Skills 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). Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Survol de l'utilisation des transitions et des animations Avant toute chose, débutons par un survol de l'utilisation des transitions et des animations. Transitions:

How to make a professional logo design, web logo design, internet branding The Golden Arches. The Swoosh. The Shell. You’d think this would be simple and easy to make/design a logo, but it ain’t. FUN & SERIOUS or COOL & SOPHISTICATED… Depending on how you approach it, your logo design will create a mood. There’s a serious danger heading off into one extreme over another when designing logos. That being said: Research is key. First, you should ask your client a bazillion questions. Second, find out their taste. BRANDING vs. That logo you designed is great, but – so what?! In this case, Resume Bear wanted to not only have it on their website, letterhead, and business cards. It also tells us: The Logo Must Be Legible. SEPARATION of BEAR and RESUME… Resume Bear started out with a big, brown, passive bear holding a piece of paper in its mouth as if it just caught a trout. An easy question to ask yourself, as a designer, is What’s The Focus? But how do you make a job seeker, or employer, who just reads the name of the company that Resume Bear is not about camping?

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 Un effet des plus sympa sur une mosaïques d’images, la première image que vous survolerez va définir la manière dont la prochaine miniature va interagir au survol de cette dernière.Plusieurs effets sont possibles : Normal, Delay et Inverse. Demo | Source | GitHub jQuery.popeye Demo | Source | Plugin WordPress Fading Magnifying Effect Demo | Source Demo | Source

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. Je n’ai qu’une chose à vous dire : pensez aux contraintes classiques d’utilisabilité et d’ergonomie… et amusez-vous ! Ci-dessous voici les 5 liens en questions qui comportent chacun une sélection de ressources, tutoriels ou encore d’exemples d’expérimentations HTML/CSS3 : 18 tutoriels d’effets d’animation et de transition avec CSS3 12 Effets de rollover d’images impressionnants et gratuits à télécharger 20 tutoriels HTML5/CSS3 à voir 16 expérimentations HTML5 et CSS3

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS3 Lightbox Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos

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. <!

Related: