CSS3 : Transformations 2D
CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Syntaxe La syntaxe est simple d'emploi. transform: function(value); Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. transform : function1(value1) function2(value2) function3(value3); La propriété transform-origin La valeur initiale de cette propriété est le centre de l'élément, ce qui équivaut à la notation : transform-origin: 50% 50%;
Ombres avancées avec CSS3 et box-shadow
CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3
Arrière-plans avec CSS3 Backgrounds
CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat; Les différentes valeurs doivent être ajustées en fonction du nombre d'images à charger et de leurs positions respectives. L'ordre de déclaration est important : dans l'exemple ci-après, la position left top s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Démonstration Prise en charge
CSS - Feuille de style - Cours CSS - Cascading Style Sheets
css - Positioning background image, adding padding
CSS3Pie, styles CSS3 pour Internet Explorer
CSS3 pointe son nez apportant son lot de propriétés de mise en forme très pratiques. Certaines fonctionnalités de CSS3 ont aujourd’hui un bon support dans les versions récentes des navigateurs (Firefox, Chrome, Safari, Opera… mais aussi Internet Explorer 9 et le futur IE10), mais bien entendu pas dans les anciennes versions d’Internet Explorer qui restent très présentes sur le marché. Comment gérer cette situation? Le script CSS3 PIE, qui permet d’imiter le support de certaines propriétés CSS3 dans les anciennes versions d’Internet Explorer, est un début de solution. Sommaire Dans l'astuce « Utiliser CSS3 aujourd'hui, outils et ressources » sont proposés un certain nombre d'outils permettant de pallier le manque de compatibilité des anciennes versions d'Internet Explorer avec les standards CSS3. Qu'est-ce que CSS3 Pie ? CSS3 Pie a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer. un simple fichier *.htc une propriété css behavior.
CSS 3 transform : rotation et échelle
Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate). Ces effets peuvent s’appliquer à toute balise. Ici j’ai choisis une liste d’images mais j’aurai très bien pu prendre un menu, un paragraphe, etc… Voici une démonstration du résultat : (c’est toujours pareil, les propriétés CSS3 ne sont pas reconnus par tous les navigateurs et donc je vous conseil de vous munir d’un navigateur récent tel que Chrome 12, Firefox 4, Safari 5 ou bien Internet Explorer 9) Et à présent voici le code à utiliser : La partie HTML est très simple La partie CSS Voilà c’est fini pour aujourd’hui, j’espère que ces petits effets pourront vous servir.
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. Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps. 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. Styles de base Passons à notre code CSS. la démonstration Un peu plus de HTML Un peu plus de CSS
Effets en CSS
Sommaire Sommaire Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript, comme des menus déroulants ou des lightbox. J'ai indiqué la compatibilité suivant les navigateurs. Permettez-moi de vous donner deux fichiers PDF qui sont pour moi les couteaux-suisses du codeur HTML/CSS : Ils montrent en une page la quasi-totalité des codes HTML et CSS2 :PDF sur le HTML (archive zip : 1.8Mio ; MD5 : 778bd3ea7c04408e75ecf50686d6c606)PDF sur les CSS (fichier pdf : 42Kio ; MD5 : f788c273f2ef4d1354e3c418492f1306) Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois. Sauf mention contraire, les astuces visibles ici ne font appel qu'à du CSS. Compatibilité : xHTML Les menus sont souvent faits avec des listes <ul>, <li>. On fait une liste ou chaque <li> contient lui même une liste. Code : HTML Code : CSS Essayer Voilà. D'autres exemples : l'image popup Essayer le fond transparent par
