The Current State of HTML5 Forms · Wufoo The Introduction HTML5 is the newest specification for HTML, the language that web browsers read to display web pages. HTML5 has many new features intended to make creating websites easier and people's experience in using those websites better. Support for HTML5 web form features is improving, but not all web browsers support HTML5 features the same way. The charts below list the most current version of each major browser. About Browser Versions In these charts, a version number like "4" means "the very first release of version 4 of this browser". JavaScript and HTML5 Forms Testing for Support If you intended to write JavaScript to mimic the functionality of HTML5 forms, you may want to first test the current browsers capability and write the JavaScript as a fallback. More accurate feature testing can be done through the excellent JavaScript library Modernizr. // Function to test for attribute support function elSupportsAttr(el, attr) { return attr in document.createElement(el); }
50+ Gorgeous Navigation Menus Ease of navigation is one of the biggest keys to the usability of a website. If visitors can easily find what they are looking for they will be more likely to stay on the website rather than leaving and going to some other site. Effective navigation can help to increase pageviews, improve the user experience, and even increase revenue and profit. As more and more users are accessing sites via mobile devices, responsive web design has continued to increase in popularity. While a few years ago navigational menus were a primary visual element in almost every web design, many responsive websites are now opting for a navigation menu that is much less dominant visually. In this post we’ll showcase 40 different navigation menus of responsive websites. Looking for hosting?
Canvas Tutorial - Introduction Welcome! In this tutorial, we're going to create a breakout clone that you can play in your browser, using javascript and the In order to use this tutorial, you'll need a browser that supports the <canvas> element. Before you read any further, click on the "run code" button on the left to play the game that we'll end up creating. On every page, you'll be able to click the "run code" button to run the code we've developed so far. Every page besides this one has an editor in it containing the javascript code that will be run in the same box as the game as soon as you click the button. In order to make our lives easier, I've included the jQuery framework in every page, which extends javascript in your browser with some useful methods. If you have any comments or questions, feel free to leave a comment on the "comments" tab. next
5 outils en ligne pour webdesigner Utiles et rapides, les outils en ligne donne un véritable coup de pouce aux webdesigners dans les moments de stress. Pour toujours avoir les bonnes ressources sous le coude, je vous invite à lire suite. Sprite Cow Pourquoi s’embêter avec les repères et des sélections dans Photoshop lorsque Sprite Cow vous permet de générer du CSS directement avec vos images ? Subtle Patterns Le site une galerie de motifs à télécharger pour vos designs web. Patternify Le site est un générateur de motifs, simple à utiliser. PrefixMyCSS Avec l’utilisation massive des CSS3, nous autres webdesigners perdons un temps précieux à préfixer nos déclarations pour qu’elles soit utilisables sous Webkit / Firefox et Internet Explorer. CSS3 Generator Très connu, celui-ci est un générateur de code CSS3 comme son nom l’indique. Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) generateur css, outils, Webdesign.
overflow-x, overflow-y (CSS3 properties) W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties. Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE. In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘auto’). According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ .... All browsers seem to further reduce the number of combinations giving different results: In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values: CSS tests home
12 ressources Jquery et CSS3 pour vos photos Les outils modernes du web permettent de sublimer plus que jamais vos photos sur votre site web. Zooms, filtres, sliders, mise en page adaptative…bref autant de ressources pour présenter vos photos en ligne de manière originale. Vintage.js On commence avec Vintage.js, qui permet comme son nom l’indique de donner un effet vintage à vos photos. Effet miniature 3D au survol Une excellente ressource basée sur la propriété CSS3 3D Transform. iView Slider Un slider Jquery certes lourd mais très complet. CSS3 Tilt Shif Effect Ultra à la mode il y a quelques années, l’effet Tilt Shift (miniature) est désormais décliné dans un plug-in Jquery utilisant du CSS3. iPicture Permet d’ajouter dans infobulles dans une image. Effet de survol originaux avec les filtres CSS3 A voir uniquement dans les navigateur Webkit (Safari, Chrome, …) pour le moment. Lenticular Sortez votre smarphone ou tablette pour tester se plug-in assez particulier. Slider plié avec effet 3D FrescoJS Jquery Picture Responsive Photo Grid
Le guide ultime des microformats : références et exemples Bien qu'ils ne fassent pas partie des spécifications HTML du W3C, ils offrent un assortiment utile de conventions de nommage (en utilisant les attributs class, id, rel et rev) qui identifient les points d'intérêt sur une page. Ils permettent de mettre en avant du contenu, tel que les évènements de calendrier, un lien vers l'acceptation de vos licences (dont la GPL) et même des choses plus légères telles que les recettes de cuisine. Si les microformats ne font pas encore partie du standard W3C, les navigateurs Web n'ont pas attendu pour en assurer le support. Les microformats valent vraiment la peine d'y porter un intérêt et de les implémenter dans les sites que vous réalisez. Vous utilisez peut-être déjà les microformats si vous utilisez un CMS tel que WordPress, car ce dernier supporte nativement des formats de données simples, comme l'attribut rel. Si vous êtes nouveau dans l'univers des microformats, vous vous demandez certainement pourquoi vous devriez vous embêter à les utiliser. I-A.
10 outils pour gagner du temps Je ne vous l’apprends pas, en tant que webdesigner nous cherchons continuellement à gagner du temps. Découvrez une sélection de 10 outils pour éviter de perdre quelques précieuses minutes… Historio.us Sauvegardez vos liens en un clic pour avoir toujours ce qu’il faut sous la main. Fillerati Marre du lorem ipsum traditionnel ? Placehold Placez vos images facilement et rapidement. Xrefresh Vraiment super rapide et efficace ! Notesforlater Utile pour garder un lien de site sous la main pour le réutiliser pour un projet futur. Readability Outil en ligne pour estimer la lisibilité d’un texte. Estimator Estimez dans les grandes lignes le coût du développement et du design de votre futur projet web. Entitifier Pratique pour nettoyer du texte qu’un client aurai copier dans votre editeur JS à partir de Word. Minutes Please Contrôlez le temps que vous passez sur un site en entrant simplement son URL. Check My Colours Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) outils, ressources.
HTML5 Please - Use the new and shiny responsibly Les sites web incontournables (février 2012) Vous l’avez attendue la voici ! La sélection des incontournables pour vous servir. Ce mois-ci 26 sites web pour votre soif d’inspiration. Nous sommes toujours dans les tendances actuelles, avec du très gros header, du vintage et j’en passe. Thibaud Portfolio Au Petit Panisse Air Jordan 2012 Hitmo Skive Festival Dylanopet Mortenstrid Aigadc 50 Ride for the brand Pixel Fable Knock Knock Factory The New Design Guidelines Tokyu Agc Recruit Hard Shirtz Vaclavkrvusek Impending Built with momentum Worry Free Labs Quazar Webdesign Souppeddler Studio7Designs Forty Seven Media Austine Astciders Touristeye Puma Black Label Postmates Cette entrée a été publiée dans Webdesign, avec comme mot(s)-clef(s) best webdesign, css3, flash, html5, Webdesign.