background preloader

Slideshow en CSS3 - Alsacréations

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 Related:  HTML5 & CSS3HTML- CSS

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

Menu animé en CSS Principe général : Ce menu est structuré sous forme de liste (ul, li) contenant un image (img) ainsi qu'une sous-liste indiquant le détail de chaque élément. Les éléments de liste sont dimensionnés (largeur et hauteur de 200px) et disposés horizontalement à l'aide de la règle "display: inline-block". Note : il eût été possible de positionner ces éléments en flottant, à condition d'affecter un "clear: both" aux élément suivants. Le comportement au survol est géré via le module Transition de CSS3 et en utilisant les propriétés transition-property, transition-duration et transition-timing-function Chaque image est positionné en absolu, pour masquer le texte par défaut, puis l'effet est d'appliquer un padding-left à l'image. Compatibilité : Fonctionne sur les moteurs webkit (Safari et Chrome). Ne fonctionne pas encore sur Firefox (pas de transition), mais c'est prévu pour la prochaine version 3.6 Droits d'auteur :

Polices, quelle taille choisir ? Il est illusoire de penser que l'on pourra contrôler totalement, pour tous les utilisateurs, l'aspect et en particulier la taille du texte. Les navigateurs proposent souvent des fonctionnalités pour augmenter ou réduire la taille du texte, quand bien même celle-ci serait fixée en pixels, par exemple. De plus, les navigateurs mobiles modifient souvent le rendu de ce même texte pour en faciliter la lecture. Il est donc recommandé de s'adapter à cet état de fait, qui a par ailleurs l'immense avantage de rendre les pages web plus accessibles pour tous ! On pourra donc vouloir gérer la taille du texte avec des unités relatives, telles que les em et les pourcentages. Les unités Le W3C propose 5 unités absolues à utiliser avec la propriété font-size : pt Le point pc Le pica (12 points) cm Le centimètre mm Le millimètre in Le pouce (inch) On leur préférera idéalement des unités relatives : em Le cadratin qui se base sur la hauteur de la police rem ex Le pourcentage, équivalent du cadratin (em) px Le pixel

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 .

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

Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript Exemples concrets

jQuery : optimiser l'utilisation des sélecteurs CSS (mais aussi Prototype, Mootools & cie) JQuery est une formidable librairie JavaScript car elle offre une grande souplesse et une utilisation simple. Il est cependant important de bien comprendre son fonctionnement pour éviter les débordements liés à une joie mal maîtrisée.S’il est très facile d’utiliser les sélecteurs CSS de jQuery, je constate de ci de là que leur utilisation n’est pas toujours optimale … quand elle l’est déjà un tant soit peu. Alors on se retrousse les manches et c’est parti pour un petit cas pratique sur les sélecteurs CSS jQuery, plus une petite récap’ pour grapiller du temps et des lignes de code ;-) Le cas pratique J’ai pensé à une chose : plutôt que vous papillonniez en lisant cet article, j’ai fait en sorte que vous puissiez y prendre part. JQuery est très divertissant - certainement plus que votre voisine d’en face - alors tant qu’à me lire, autant optimiser la compréhension ;-)Pour cela il vous faut 2 choses : Principe de la sélection CSS de jQuery Magique non ? Comprendre la sélection CSS de jQuery

Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.) Revenir au sommaire Un habillage

Le futur avec HTML5 par Bruce Lawson | bertrandkeller 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 Pour avoir un aperçu des possibilités de HTML5 : Voir le billet original The Future of HTML 5. Navigation Temporelle Ajouter un commentaire

Related: