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. 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

http://www.alsacreations.com/astuce/lire/1076-utiliser-css3-aujourdhui-outils-ressources.html

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.

Formulaires HTML5 – Quoi de neuf ? « slDesign Nouveautés HTML 5 – Formulaires et champs de formulaires Petite introduction aux formulaires HTML 5… Je vous propose de voir en images et en code les différentes modifications apportées par les nouveaux attributs HTML 5. Introduction : HTML 5 apporte son lot de nouveautés également sur les formulaires. Il est important de prendre en considération ces modifications car elles vont permettre un meilleur échange entre les utilisateurs et éditeurs de contenu. Elles sont également là pour nous rendre service et optimiser le WEB de demain. 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.

Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style.

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 :

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.

Exploiter n'importe quelle police dans vos pages HTML avec FLIR - Alsacréations FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d'un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs. L'image générée sera automatiquement insérée dans votre page à l'aide de Javascript et visible sur tous les navigateurs modernes. N'importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc...) jusqu'aux éléments <span>. Avant de vous jeter les yeux fermés dans l'éxecution de ce tutoriel, sachez que désormais CSS offre la possibilité - beaucoup plus souple et accessible - d'inclure une police "exotique" dans une page web grâce à la propriété @font-face.

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.

Amélioration progressive : Modernizr et sélecteurs CSS avancés A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués. En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Modernizr : le bazooka JavaScript :root pour IE9 et supérieurs

Gmail permet enfin la création de plusieurs signatures au format HTML Nouveauté intéressante du côté de chez Gmail. L’éditeur de texte qui permet de créer une signature a été mis à jour. Il est dorénavant possible de créer plusieurs signatures en texte riche. C’est donc dire que vous pouvez ajouter des images et styliser votre texte avec du gras, de l’italique et des liens URL.

Le futur avec HTML5 par Bruce Lawson Le HTML4 n’a pas remplacé le HTML1 (celui qu’on utilise pour rédiger un billet de blog, par exemple), le HTML5 (HTML5 et l’avenir du web) ne remplacera pas le HTML4. Mais alors à quoi sert le HTML5 ? Bruce Lawson d’Opera (Opera, un navigateur pour personnes formidables) éclaire vos lanternes. La spécification HTML5 était, à l’origine, dénommée « Applications Web 1.0″. Ce document s’est concentré sur les nouvelles balises de marquage , petit à petit s’est inséré d’autres sujets tels que : Les images et les graphiques avec canvasLa suppression de la validation de formulaires avec webforms 2.0Le stockage automatique en local de ses donnéesLa GéolocalisationLa création de barre d’outils et de menus

Related:  leanihalCSS