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

Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Une division, des paragraphes pour le contenu, et un lien pour l'action, nous n'aurons besoin de rien de plus ici. Styles de base Les styles proposés ici ont été mis à jour récemment pour correspondre au support navigateur. Passons à notre code CSS. Et voilà !

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

Manuel PHP Edit Report a Bug Manuel PHP ¶ par: Mehdi Achour Friedhelm Betz Antony Dovgal Nuno Lopes Hannes Magnusson Georg Richter Damien Seguy Jakub Vrana Et bien d'autres Édité par: Peter Cowburn par: Frédéric Blanc Traducteur Vincent Blanchon Traducteur Pierrick Charron Traducteur Julien Pauli Traducteur Mickaël Perraud Relecteur Guillaume Plessis Traducteur Yannick Torrès Traducteur Vincent Briet Jean-Sébastien Goupil David Manusset © 1997-2019 PHP Documentation Group add a note User Contributed Notes There are no user contributed notes for this page. 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 .

Des statistiques graphiques grâce aux CSS Fans des statistiques en tout genre, mais plutôt fainéants en ce qui concerne leur réalisation picturale, voici une solution basée sur les feuilles de style CSS pour mettre en valeur de façon élégante et simple diverses données à présenter. Avertissement Cette technique exploitant CSS est à la frontière entre présentation et génération d'un pseudo-contenu, elle rencontre cependant des limites : D'accessibilité : elle peut, selon le contexte où se trouvent les données chiffrées, invalider le critère d'accessibilité WCAG1.0 de niveau AAA 14.2 qui préconise l'utilisation d'images de contenu en complément du contenu textuel afin d'en faciliter la compréhension. D'ergonomie : le graphique généré en CSS ne sera, par exemple, pas copiable avec la même facilité qu'une image HTML. Il peut donc être nécessaire, selon le contexte, d'utiliser une image HTML de préférence à cette technique CSS. Le code HTML Pour ce faire, voici un exemple de structure HTML : Mise en forme CSS Réalisation de la barre

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

Related: