Osez HTML5 et CSS3 ! Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.
Apple-like Slideshow Gallery via Ad Packs Apple-like GallerySlideshow View the original tutorial » This is a tutorialzine demo. View the original tutorial to read and download the source files. The gallery features artwork from rambocre, pickupjojo and codenamebender Ultimate CSS Gradient Generator - ColorZilla.com background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Le Kit du parfait Webdesigner #1 - webdesign Votre navigateur ne prend pas en charge Javascript, vous ne pourrez profiter de toutes les fonctionnalités de ce site web. Magazine Webdesign, Inspiration et tutoriels 9222Membres2043Articles9519Commentaires0Devenez fan8431Suivez-nous ! A la uneCatégoriesDossiers+ Le Kit du parfait Webdesigner #1 par Fabien Berthouxle 28/05/2010 Couleurs, Typographies, Architecture d'un site, Effets de styles, Boutons, Dégradés Web 2.0, Icônes, vous trouverez toutes les ressources nécessaires pour développer et créer vos webdesign. L'architecture ( WireFrame ) Grille de construction Créer son architecture en ligne Pencil Pidoco Protoshare Iplotz Mockflow Balsamiq Jgraph Hotgloo A connaître Wireframes.linowski Aller plus loin : Des WireFrame à imprimer 35 ressources de WireFrame 50 packs UI et Webdesign gratuits La Couleur Colorschemedesigner 0to255 Imageshack Colourlovers Kuler Colormunki Ilotresor Colorblender Colorotate Comment bien choisir ses couleurs pour céer une charte graphique 17 outils pour trouver ses couleurs La Typographie
CSS3 Transitions And Transforms From Scratch There are some amazing examples of CSS transforms and transitions, and whilst you may be blown away by them, there's a good chance that you're also overwhelmed and a bit intimidated! This tutorial will take you back to the very basics. We're going to create some fundamental CSS3 transitional movements, step by step. A Quick Note on Browser Support: Support across browsers is already pretty reasonable. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1, and Internet Explorer 9.0 have you covered where transforms are concerned. The Axes and Grid To help understand the movement easily we'll be working on an axis grid (which you'll probably recognize from basic math). The only (crucial) difference is that on our axis the -y value is above the x axis, whilst it would ordinarily be below it. Note: I'm going to assume that you're already familiar with HTML and CSS file structure. 1: Horizontal Movement Moving to the Right We've assigned three classes to the image: View Demo Moving to the Left View Demo
Extensions et Bookmarklets #1: Présentation - ressources Premier article d'une série sur les extensions et bookmarklets. Aujourd'hui, présentation et quelques exemples. Tout le monde connaît les extensions que l'on peut installer sur son navigateur. Popularisées grâce aux premières versions de firefox, elles permettent d'ajouter des fonctionnalités à son navigateur, ou bien (au départ grâce à greasemonkey pour firefox, nativement pour chrome et firefox maintenant) permettre de modifier directement la vision que l'on a de certains sites. Mais avez-vous déjà croisé un bookmarklet? Ce sont de petits codes que l'on place dans la barre de favoris du navigateur (généralement par copier coller), et qui, au lieu d'ouvrir une autre fenêtre, modifie la page actuel. Ces deux technologies sont très proche, par les possibilités mais aussi par la construction : Leur langage principal est le javascript, agrémenté de html et css. Exemples Voilà quelques exemples de bookmarklets. Readability disponible en bookmarklet et en extension sur leur site. PDF download XRay
Design Curate | Free PSDs and Resources for Designers HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> Initializr
50 Excellent CSS3 Techniques and Tutorials for Beautiful Design CSS3 has got a huge potential to create very elaborate and complicated details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques. Many designers all over the world believe that CSS3 is a technique which has unbelievable potentiality which will be used to create wonderful designs in the years to come. At present, it is not being used varied all over the world due to a number of limitations – obsolete browsers being one of them. Many say that it would be the application of the future as it can improve the efficiency of the workflow by substituting waste workarounds as it was once used in the case of Internet Explorer 6. It has many features which are not compatible with the old web browsers and hence it will require some present day internet browsers like Internet Explorer 7 & 8, Chrome, Safari and Firefox to use the CSS3. Create an Audio Player in HTML5 & CSS3 Filter Functionality with CSS3 Create CSS3 Pricing Tables CSS3 Lightbox
HTML5 Bookmarks - daily news articles and bookmarks 50 Excellent CSS3 Techniques and Tutorials for Beautiful Design CSS3 has got a huge potential to create very elaborate and complicated details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques. Many designers all over the world believe that CSS3 is a technique which has unbelievable potentiality which will be used to create wonderful designs in the years to come. Many say that it would be the application of the future as it can improve the efficiency of the workflow by substituting waste workarounds as it was once used in the case of Internet Explorer 6. It has many features which are not compatible with the old web browsers and hence it will require some present day internet browsers like Internet Explorer 7 & 8, Chrome, Safari and Firefox to use the CSS3. It can be used to create multiple backgroundsDeveloping and drawing border imagesHandling of opacityUsed in text- shadowing and box sizingUsed for support of columns of many different web layouts. Create an Audio Player in HTML5 & CSS3
Creating a Slick Auto-Playing Featured Content Slider I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose. Both of these examples use the Coda Slider pretty much "out of the box". View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already. Here is what we need in addition: Different types of custom content in the panels. Let's go through the HTML, CSS, and JavaScript. The HTML Here is the framework HTML for just the slider itself: <div class="slider-wrap"><div id="main-photo-slider" class="csw"><div class="panelContainer"><div class="panel" title="Panel 1"><div class="wrapper"><! The CSS The full CSS for this example has a basic reset, some utility styles and basic structure. The JavaScript We aren't done yet though. Share On
Collection of Free and Premium HTML5/CSS3 Templates - 50 Examples There are numerous high quality templates available in the internet. Some are free and some come with affordable cost. Nowadays web design is so popular that many designers across the globe is coming forward with their creation and helping bloggers like you and me to choose a ready made theme from their desk. Designers work day and night to create beautiful templates for us so that we can concentrate on the seo and content of our website. Every good thing comes with a price so as creative templates. Free Themes and Templates Elegant Press This is a clean template that can be used for making modern websites. Kroft This template is very good for creative designers and agencies that need to create modern websites. Shinra Mainly helpful for designing corporate websites, the template is user friendly and includes features like PHP contact form and templates exceeding 5 pages. Vivid Photo For those looking to design a photography website can easily use the Vivid Photo template. Simple Style 7 Nova
CSS Hat turns Photoshop layer styles to CSS3 with a click - PSD CSS - Convert PSD to CSS3