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.
Html5, Aide mémoire ou mémo Nous vous avons concocté un mémo ou aide mémoiree pour le HTML5. Finis les oublis et les pertes de temps dû aux recherches. Avec notre Mémo Html5 visualisez d’un seul coup d’œil l’ensemble des balises, attribut et évènement. Les balises sont classé par catégories et non par ordre alphabétique. Pour un usage privé, vous pouvez télécharger, imprimer et utiliser cet aide mémoire ou mémo HTML5 comme bon vous semble. Memo HTMl5 Spritebox - Create CSS from Sprite Images Outils indispensables pour HTML5 & CSS3 | bertrandkel bertrandkeller Les outils indispensables pour le HTML5 et le CSS3 06.09.10 / CSS + HTML / bertrand keller Un liste d’outils pour le développement HTML5 et CSS3. Il est temps de s’y mettre, mais c’est pas facile, vraiment compliqué de trancher pour les choix de compatibilité navigateurs. Articles similaires : S'abonner aux commentaires Commentaire | Trackback | Tags : javascript Navigation Temporelle Ajouter un commentaire XHTML : Vous pouvez utiliser ces tags: <a href="" title=""><abbr title=""><acronym title=""><b><blockquote cite=""><cite><code><del datetime=""><em><i><q cite=""><strike><strong> © Copyright 2009 bertrandkeller .
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 Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit. Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ? Les propriétés CSS3 utilisées ici sont les suivantes : border-radius pour les bords arrondisbox-shadow pour les ombres des blocscontent pour rajouter du contenu au HTMLgradient pour les dégradés des blocsrgba pour avoir des fonds transparentstext-shadow pour les ombres du texte J’utilise aussi les pseudo-classes CSS3 suivantes : :after pour rajouter du texte HTML à la suite d’un élément:last-child pour sélectionner le dernier enfant d’un élément:target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML. Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).
HTML5 : 20 Conseils et astuces pour coder proprement ses pages Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité. Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet. 1. Respecter le Doctype HTML5 Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. 2. Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. 3. Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. 4. Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Suivant votre cas, il peut être préférable de définir le cache. En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. 5. 6. 7. Il est inutile d’utiliser les six. 8. 9. 10. 11. 12. 13.
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 */
Apprendre le HTML5 – Tutoriel complet Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5. Chaque chapitre est rédigé de façon concise et compréhensible par tous. L’ensemble du cours – en constante évolution - est accessibles à tous quelque soit votre niveau : Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Maintenant que vous savez à quoi ressemble le HTML5 et ce qu’on peut faire avec, passons aux choses sérieuses. Voici les bases des langages de développement web HTML et CSS. La transition du HTML 4.01 au HTML5 apporte son lot de modifications : de nouveaux éléments sont apparus et d’autres sont devenus obsolètes ou inappropriés. Avant d’aborder les chapitres suivants, assurez-vous d’avoir lu et compris les chapitres 1 et 2 : les bases du HTML5. [cadrePTQ]
The Most Important CSS3 Properties Explained It's an exiting time for web designers. Major new browser releases are coming in very fast and with them massively extended support for CSS3. Especially Google Chrome leading the way and showing what's possible with today's technology. Border-Radius Probably the property with the highest level of awareness and maybe the synonym for CSS3 for some. The radius of the quarter circles that form the corners is equally set for all four edges. With the inclusion of a slash it is possible to set the horizontal (first value) and vertical (second value) radii for the rounding of the corners separately. Compatibility border-radius is supported in all modern browsers with only Firefox 3.6 needing the -moz- prefix. Further Reading Border-Image Presumably the CSS3 property that is most difficult to understand. The intended usage of border-image is to provide an image file that represents the four corners and four sides of the border as well as background of the element. Further reading Opacity Box-Shadow
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
HTML 5 Tutorial 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