Les 5 mythes et vérités de HTML5 Les mythes Avec HTML5, mon site sera plus beau HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu. Cela signifie donc que rien ne change par rapport aux précédentes versions de HTML : il vous faudra toujours jongler avec habileté entre CSS, les images issues de la maquette graphique, éventuellement des effets en JavaScript, du SVG, voire Canvas, pour construire le côté visuel d'un document ou d'une page web. Avec HTML5, mon site sera plus dynamique et réactif Là aussi, les mêmes arguments de conception entrent en jeu : sans JavaScript et l'API DOM, l'interactivité reste coite. HTML5 apporte donc des fonctionnalités, mais pas de "rapidité" au sens strict du terme. Avec HTML5, je devrai tout réapprendre depuis zéro Avec HTML5, je suis dans le Cloud Et si vous changez le doctype par <! Les vérités HTML5 est vaste
Fullscreen Slit Slider with jQuery and CSS3 A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Let’s start with the HTML. The Markup Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The CSS
HTeuMeuLeu : HTML5, CSS3, et le quotidien du web pour un intégrateur ! Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS In the beginning of our CSS we will import a reset.css: The JavaScript
Dynamic Drive CSS Library- CSS Triangle Arrow DIVs CSS Triangle Arrow DIVs Author: Dynamic Drive An subtle characteristic of CSS that's been exploited to do something interesting is CSS borders and using it to create pure CSS triangles. These triangles have the advantage of being extremely lightweight (no image used) and scalable to boot. The technique works using the fact that the 4 CSS borders of an element meet at an angle; when the dimensions of the element is set to 0, the 4 borders collapse and touch one another, creating the appearance of 4 triangles: Here's the CSS used to create the above DIV: Style: Markup: To display just a specific triangle then, you would set the border-color of all but the desired border side to transparent. The following adds a CSS based triangle to a DIV to produce a speech bubble look that can be used to show comments, quotes etc. Demo: This is a test The CSS: Code Info Rate this code: Date Posted: 03/22/2011 Revision History: None Usage Terms: Click here Your Comments (6) Comment Pages 1 of 1 pages
Little Boxes Menu with jQuery Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image. Let’s get […] View demoDownload source Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. Let’s get started! The Markup The HTML will be made up of a main container with div elements inside. <div id="littleBoxes" class="littleBoxes"><div class="boxlink bg1" style="top:0px;left:0px;"><a href="">About</a><div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The positioning values are calculated from the width and height of the boxes which is 90px plus its border (2px) and some margin (1px). Let’s have a look at the style. The CSS Now, let’s add the magic:
Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). Illustration pour le scroll Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. Illustration pour le positionnement de la souris En pratique Démonstration
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS
La boîte à outils ultime pour le responsive design Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables… Le responsive design est relativement récent et les choses bougent très vite. A peine a-t-on pris connaissance d’une technique qu’il faut déjà apprendre une nouvelle chose ou maîtriser le dernier outil sorti. Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites. L’article original recense de nombreux outils gratuits qu’on peut trouver sur le web et vous trouverez ci-dessous ma sélection parmi tous ceux présentés dans celui-ci, plus quelques ajouts. Avant de commencer : 1. 2. Vous ne voyez pas très bien comment votre site pourrait réagir au redimensionnement de la fenêtre ou sur un appareil mobile ? 3. 1. 2. 3. 4. 1. 2. 1. 2.
Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery