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

Les sprites CSS - Alsacréations Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)

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 .

Blog Archive » HTML 5, c’est trop bien – engagez-vous! - Framasoft Framafox Le HTML5, c’est génial. Même Steve Jobs le dit (et pourtant c’est le roi de la mauvaise foi…). Bon pour Monsieur Apple, c’est son combat vs. Adobe qui le motive. Mais il n’empêche que les possibilités de HTML5 présagent d’un avenir radieux pour une solution libre de jeux, vidéo, etc en ligne. S’il fallait un peu de dynamisme pour le prouver, le jeu PACMAN vient d’être mis en ligne totalement en HTML5. Correction : en fait, non! Après tout, Quake II a aussi été porté en HTML5 grâce au Google Web Toolkit. Alors pourquoi est-ce que je viens vous parler ici de ce HTML5? S’engager, mais comment? Déjà, pour quoi? Alors s’engager, c’est d’abord apprendre à connaitre. S’engager c’est aussi savoir respecter. Après tout, les propos de Kévin, roi d’l’Ubuntu et du troll (/! S’engager, c’est aussi avoir de l’humour. Un peu d’humour, de drôlerie et d’auto-dérision n’a jamais fait de mal à personne. S’engager, enfin, et là l’enjeux est de taille, c’est participer. Laissez un commentaire

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

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

Coins arrondis CSS 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. N'hésitez pas à nous faire part de votre avis sur cet article : 6 commentaires Article lu 1053 fois. Les trois méthodes courantes pour créer des coins arrondis sont : La propriété CSS 3 border-radius (implémentation très attendue !) Chacune de ces méthodes a ses avantages et ses inconvénients. Cette 4ème méthode, utilisant une seule image adaptable en hauteur et en largeur pour un design fluide, s'inspire des deux dernières pré-citées. Fonctionne avec : Tous les navigateurs graphiques. Attributs utilisés : background ; margin ; max-width (inopérant avec IE6) ; padding. L'image a un poids d'un peu moins de 17 ko, elle est donc très légère et se chargera très vite.

Related: