background preloader

Les 10 meilleures ressources HTML5 en ligne pour les graphistes

Les 10 meilleures ressources HTML5 en ligne pour les graphistes
Découverte sur Smashing Hub, cette liste des dix meilleures ressources HTML5 en ligne pour les graphistes va s’avérer très utile pour tous les concepteurs de sites Web. Vous allez y découvrir des outils pour le graphisme, gérer vos sprites, En effet, l’arrivée massive de ce nouveau langage, que j’aborde régulièrement sur le blog, est un nouveau langage de structuration et de présentation pour le contenu sur le Web. Il dispose de nombreuses fonctionnalités telles que l’intégration de la vidéo, de l’audio, des polices, du glisser-déposer, la possibilité de dessiner, etc… Sans plus attendre, voici la sélection des dix meilleures ressources en HTML5 pour les graphistes. Découvrez Online 3D Sketch Tool. Pour tourner votre dessin en 3D, il vous suffit de maintenir enfoncée la touche « espace », puis, de faire glisser horizontalement votre curseur. L’utilisation impressionnante des outils tels que jQuery, CSS3 et HTML5 vous pouvez concevoir vos images en sprites. Il s’agit d’un outil pur HTML5.

CSS Ô grands fous qui êtes tombés par inadvertance sur cette page et voulez apprendre ce langage si célèbre mais si ingrat qu’est le CSS ! Tant de simplicité dans sa puissance, tant de concision dans son mystère ! La fascination qui vous hante est celle qui vous mènera à votre perte. Jamais, non, plus jamais n’oserez vous approcher une page HTML sans ressentir le désir ardent d’en découvrir l’envers, d’en démasquer la charpente, d’en partager la mécanique. Mais au fond, la question n’est pas là. Prenez place. Intégrateur n'ayant pas lu ce site Intégrateur ayant lu ce site Rideau.

Stitches - An HTML5 sprite generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download

55 High Quality Free and Premium (X)HTML/CSS Templates Love it or hate it, but HTML and CSS templates are one of the most sought-after free products. Though it would seem that coding an elementary web page populated with simple boxes, sliders, images and text is a really piece of cake, actually sometimes it takes nerve to create a basic html layout spiced up with regular CSS styles. Moreover, if this is a part of a standard process which implies “transformation from a sketch on a paper into a fully working theme or website”, as is often the case, wasting your time on sorting out how to make a theme to respond correctly to various devices, and at the same time, not to ruin all the inherent beauty that were created during a few sleepless nights is really worthless. Save time means save money, so ready-to-use templates sound like a salvation not only for your work but also for your bank account. Furthermore, there are others strong motives to actively employ such products. Free HTML Templates Video template Tessellate Showpage My kingdom Piccolo Hey

Utiliser CSS3 aujourd'hui, outils et ressources Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer. Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public. De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. Voyons quelques uns de ces outils en ligne en vogue actuellement : CSS3pie.com CSS3please.com CSS3.info

HTML5 Please - Use the new and shiny responsibly Sencha Animator, création d’animations CSS3| Webmaster – Ressources et outils gratuits pour votre site internet – Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster 15 Handy HTML5/CSS3 Frameworks For Web Developers inShare49 HTML5 and CSS3 frameworks are becoming more and more popular every day. It really makes web developers’ lives easier, because there are so many benefits, e.g. Development time. It has reduced considerably, especially if you don’t have much experience with the framework and you use it in appropriate situations; Frameworks contain “hacks” for most common browsers. To solve the same problem with the positioning of elements in IE can make you bored very quickly; Simplifies support. Perkins Perkins is a pure HTML5/CSS3 Framework created with love. DemoDownload Inuit.css Inuit.CSS created by Harry Roberts. DemoDownload G5 Framework G5 Framework based on a F Layout. Download 52framework 52framework first HTML5/CSS3 framework created by enavu network. DemoDownload Less Framework 4 Less Framework is a CSS grid system for designing adaptive web­sites. Download Baseline Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography.

How to create slick effects with CSS3 box-shadow – Red Team Design Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips

Related: