Pure CSS Coke Can by Román Cortés. Tendance du webdesign : double scroll | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels - Directement inspirés par les interfaces mobiles, certains sites osent ce que l’on pourrait nommer le « double scroll« … L’utilisation du défilement de page pour créer des effets originaux sur les sites est en vogue depuis maintenant bien 2 ou 3 ans, voir plus. Avec la ligne de flottaison définitivement enterrée, plus de soucis aujourd’hui les gens scrollent. La parallaxe, le scroll « story-telling« , entre autres ont permis d’apporter de la dynamique et de la profondeur dans notre expérience de navigation. Terminé le scroll long et fastidieux, terminé les sites plats et sans intérêt, vive le one-page et le scrolling à gogo ! Comme toutes les tendances, la parallaxe s’est elle aussi essoufflée après avoir lassé les concepteurs web et les internautes.
Une expérience en deux colonnes Découlant directement des ces tendances passées, mixées avec une expérience utilisateur très représentée sur tablette et mobile, voici le double scroll. ACTV/ RCVR de Puma Fade or Eddy Carles Palacio Vespillo. Slider with Sliding Backgrounds. Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view.
Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.
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. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code.
Les défauts des versions précédentes. Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3. Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... </ul></div> Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués.
Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition. Les transformations 3D en CSS3. L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 !
Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Passionné du web, il est le créateur du site CSS3create, dédié à l’expérimentation et à l’apprentissage de CSS3 ainsi que de l’outil PrefixMyCSS, permettant l’ajout automatique des préfixes propriétaires CSS. Pour suivre l’actualité de Vincent sur Twitter : @iamvdo. Introduction Quelles différences entre la 2D et la 3D sur le web? Les rotations Matrice.