background preloader

Utiliser CSS3 aujourd'hui, outils et ressources - Alsacréations

Utiliser CSS3 aujourd'hui, outils et ressources - Alsacréations
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. 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 Dans la jungle des outils permettant d'émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd'hui et bénéficie d'une communauté et d'un compte Twitter plutôt actifs. CSS3please.com Related:  HTML5 & CSS3

Slideshow en CSS3 - Alsacréations Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple

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

Les 30 sélecteurs CSS à connaître absolument tomsyweb.com Buy this domain The owner of tomsyweb.com is offering it for sale for an asking price of 345 GBP! Related Searches This page provided to the domain owner free by Sedo's Domain Parking. Six Useful CSS3 Tools CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are six CSS3 tools that you should find useful. CSS3 Button Maker The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. CSS3 Generator Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview. CSS3 Please! CSS3 Please! CSS3 Gradient Generator The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS3 Transforms CSS3 Selectors Test About the Author Related Posts

Le Web n'a jamais été aussi excitant ! Je viens de bloguer sur la sortie de Firefox 4 Bêta 2. Plus de rapidité, une meilleure interface, et plein de nouveautés pour les développeurs d'extensions (JetPack) et les développeurs Web. C'est sur le développement Web que je veux m'attarder dans ce billet. A mon sens, la combinaison CSS 3, nouvelles APIs (dont WebGL) et HTML 5 est un bond immense en avant pour le Web en tant que plate-forme de développement. J'ai travaillé avec l'excellent Paul Rouget pour faire une vidéo de ses démos qui mettent cela en évidence. Pour ceux qui ont Firefox 4 Beta 2, une machine avec une bonne carte graphique et les drivers "qui vont bien" et ont paramétré leur navigateur pour l'accélération matérielle Direct2D, voici 3 démos : Pour les autres et ceux qui veulent plus de détails techniques, notre vidéo est sur Hacks.mozilla.org.[1] Regardez bien à l'écran : ce que vous voyez est une page Web, développée avec les standards en cours d'élaboration (HTML5, CSS3, SVG, WebGL, nouvelles APIs...).

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 .

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. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with WebKit and Firefox browsers. 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: Documentation Documentation is available here. Dependencies Contributing License Download

CSS Debutant : Tutoriels CSS Boutons CSS Le bouton élegant qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS la légèreté et la simplicité est de mise pour créer de beaux boutons. Plusieurs images de fond Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun. Coins arrondis Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques. Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide. Zoom d'image Vignettes (Thumbnails) Tableaux à bordures fines Et bien si !

CSS Content CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like: With this CSS in place, we could have this HTML: <ul><li class="email-address">chriscoyier@gmail.com</li></ul> And the output would be like: • Email address: chriscoyier@gmail.com Maybe that example doesn't get you drooling, but pseduo element content can be quite useful and do cool things. Hey! The first concern might be that of a separation-between-content-and-design purist. I think it's awesome and perfectly suited for CSS. I'm going to publish an article tomorrow with this kind of idea. Using Special Characters If you need to use a special character in the CSS content, it's kinda weird. Here's some random useful ones: Example Trick: Checkmark visited links Using Attributes

10 Popular Logo Design Collection Websites | Dzine Blog Learn how to earn $125 or more per hour as a freelancer - Click Here Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off It doesn’t matter whether you are a beginner or expert logo designer, all of us need fresh inspiration all the time. Logo Design Love Logo Design Love is a blog of graphic designer David Airey. Carbonmade Carbonmade is a site where designers can post their portfolios in all kinds of design. LogoPond LogoPond is a gallery site that exists specifically for logo design inspiration. Creattica Creattica is a gallery of great design and inspirational imagery. DeviantART DeviantART was created to entertain, inspire, and empower the artist in all of us. LogoSauce LogoSauce is another portfolio site where users can submit their own work, featuring only logos. Lo8os Lo8os is a logo and graphic design community where users can share their work and find inspiration. The Identity Archives Project Brand New LogoLounge

HTML5 – Les nouveaux éléments Comme évoqué dans une précédente revue de presse, voici le premier article de ma série sur HTML5. Plutôt que de faire du comptage de points entre Apple et Adobe, j’ai décidé de commencer par faire un tour d’horizon des nouveautés proposées par cette nouvelle spécification du W3C. Dans ce premier article, je vous propose donc de faire un voyage à la découverte des nouveautés du côté de HTML. ; pour connaître les nouvelles balises, et les nouveaux attributs que nous pouvons déjà ou pourrons bientôt utiliser dans nos navigateurs. Du layout au canvas en passant par les WebForms, le son et la vidéo, tout tout tout, je vous dirai tout sur HTML5. Sommaire HTML5 est au départ la nouvelle version du langage HTML en cours de développement par le W3C. Pour répondre à ces problématiques et favoriser l’émergence du web sémantique, la spécification propose : Nouveau modèle de contenu Bye, bye, les alignements hasardeux dus aux éléments de type bloc ou en ligne. Nouveaux éléments de mise en page

Related:  CSS