CSS et CSS3

Aperçu rapide du CSS et du CSS3Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 1

Principes des CSSFeuilles de styles en cascadeDepuis plus de dix ans, il est dusage de séparer le fond (HTML) de la forme (CSS). Les avantages de cetteséparation sont importants, ils permettent notamment de pouvoir agir sur des éléments du site présents surtoutes les pages en agissant sur un seul fichier.Pour comprendre comment agissent les CSS, il est indispensable de connaître le HTML.Il existe plusieurs méthodes pour utiliser les CSS : Insérer les CSS directement dans la balise souhaitée. Cette méthode est déconseillée mais peut être utile lors des phases de développement. <h1 style="color: red; font-size: 2em;">Mon titre</h1> Insérer les CSS directement dans le <head>. <style> h1 { color: red; font-size: 2em; } </style> Appeler un fichier styles.css dans le <head>. <link rel="stylesheet" media="screen" type="text/css" href="styles.css" /> (en xHTML) <link rel="stylesheet" media="print" href="styles.css> (en HTML5) Utiliser la règle @import soit dans le <head> via la balise <style>, soit dans une autre feuille de style. <style>@import url(styles.css) media;</style> (voir : http://www.w3.org/TR/css3-cascade/#at-import) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 2

CSSLes propriétés du CSSLes éléments en CSS sont généralement des blocs (éléments qui prennent une largeur comme un cadre, untitre) ou des lignes (ils sintègrent dans une ligne comme les gras, les italiques). Il existe des élémentshybrides qui sont à la fois inline et block (inline-block).FontGestion des polices, des tailles de caractères… Font-family pour définir la ou les polices (http://css.mammouthland.net/font-css-polices-caracteres.php) Font-size pour définir la taille (de préférence en % ou en em) Font-weight pour définir lépaisseur (bold ou normal) Font-style pour définir litalique (italic, oblique ou normal) Font-variant pour définir les capitales (small-caps ou normal) Font-stretch ne semble pas fonctionner sur les navigateurs les plus courantsTextGestion des zones de texte. Text-align pour définir lalignement (left, right, center, justify) Text-decoration pour les soulignements (none, underline, overline, line-throught, blink / cette dernière est à éviter) Text-transform pour la gestion des minuscules et majuscules (none, capitalize, uppercase, lowercase) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 3

CSSLineGestion des lignes. Line-height pour gérer la hauteur de la ligne (normal, % ou nombre) – pour centrer reprendre la hauteur du bloc Line-break pour gérer le saut de ligne pour un texte en japonais (normal, strict)WordGestion des mots. Word-spacing pour gérer lespacement des mots (normal, inherit, nombre en px ou en em) Word-wrap pour gérer le comportement dun mot dépassant le cadre (normal, break-word)Letter-spacingGestion de lespacement des lettres en em ou px.@font-faceGestion des polices importées.Voir : http://css.mammouthland.net/css3/font-face.php (didactitiel) http://www.fontsquirrel.com/fontface/generator (générateur de @fontface) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 4

CSSBackgroundGestion des fonds pour les blocs.Voir http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html Background-color définit une couleur darrière-plan pour un bloc. Background-image définit une image en arrière plan. Elle sera appelé avec une url(). Background-position définit une position de limage (left, center, right, bottom, top ou valeurs en %, em ou px) Background-repeat définit si une image se répète si le cadre est plus grand (repeat, no-repeat) Background-attachment définit si limage est fixe ou non (fixed ou scroll) Background-size définit la taille de limage en arrière plan (taille en valeurs %, em ou px, cover pour adapter) – voir les préfixes pour utiliser cette propriété sur tous les navigateurs Background-clip définit les limites de limage à lintérieur du bloc (content-box, padding-box ou border- box) – voir les préfixes pour utiliser cette propriété sur tous les navigateurs Background-origin définit le point dorigine de limage (content-box, padding-box ou border-box) – voir les préfixes pour utiliser cette propriété sur tous les navigateursWidth et heightPour donner une largeur et une hauteur aux éléments blocs. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 5

CSSDisplayGestion de laffichage dun élément. None pour cacher un élément Inline définit un élément en ligne Block définit un élément en bloc Inline-block définit un élément en ligne avec certains comportement dun bloc List-item définit des blocs sous forme de listeVoir http://www.zonecss.fr/style_css/feuille_css_display.html ethttp://www.alsacreations.com/actu/lire/111-display-vous-connaissez.htmlBorderGestion des bordures pour des blocs. Border-width définit la largeur de la bordure (généralement en px) Border-style définit le style de la bordure (dashed, dotted,double, groove, hidden, inset, outset, none, ridge ou solid) Border-color définit la couleur Border-bottom, border-top, border-left et border-right définissent un côté spécifique (il est alors possible de définir border-top-color etc.) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 6

CSSPaddingGestion des marges intérieures à un bloc. Il est possible de sadresser à une marge spécifique (padding-rightpar exemple) ou à toutes (padding: 10px; toutes les marges sont à 10px – padding: 10px 0; les marges enhaut et en bas sont à 10px – padding: top right bottom left; pour séparer les 4 valeurs de la marge).MarginGestion des marges extérieures dun bloc. Mêmes propriétés que pour padding.Pour centrer un élément bloc vous pouvez utiliser "margin: 0 auto;".Vertical-alignGestion de lalignement dun élément en ligne avec un autre élément en ligne. Ce nest pas fait pour alignervertcalement un élément en ligne dans un bloc (voir line-height). Il est aussi possible de lutiliser dans destableaux (<table> ou élément en "display: table-cell;")VisibilityGestion de la visibilité dun bloc sans le faire disparaître du flux à la différence de "display: none;".Exemple : visibility: hidden; (voir aussi collapse)ListGestion des listes ul ol. List-style-image permet dutiliser une image pour remplacer les puces par défaut en appelant une url() List-style-type définit le type de puce (decimal, decimal-leading-zero, lower-roman, upper-roman, lower- alpha, upper-alpha, disc, circle, square, none, inherit, etc.) List-style-position définit lalignement de la puce (inside, outside ou inherit) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 7

CSSColorGestion de la couleur des textes.Les couleurs dans le web sont définies en RGB (rouge, vert et bleu). La traduction se fait soit en rgb(x, y, z)soit en #xyz.Voir : http://stylescss.free.fr/couleurs.phpIl existe aussi le hsl(x, y%, z%) : http://www.w3.org/TR/css3-color/#hsl-colorFloatGestion du flottement des éléments blocs (none, left, right). Attention, un élément en float sort de flux, il estdonc possible davoir des alignements déléments qui déconstruisent la page.ClearGestion des éléments blocs pour retrouver le flux. None Left permet de se mettre en-dessous dun élément si celui-ci est à gauche Right permet de se mettre en-dessous dun élément si celui-ci est à droite Both permet de se mettre en-dessous dun élément que celui-ci soit à droite ou à gauche Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 8

CSSLes positionsLes positions sont un des éléments les plus importants en CSS. Vous avez bien entendu la possibilité de joueravec le flottement des blocs mais les positions vous permettront daller plus loin ou de le compléter.Voir http://openweb.eu.org/articles/initiation_absolue/ Position: static, cest la valeur par défaut Position: relative positionne lélément par rapport à lélément précédent Position: fixed positionne lélément par rapport aux bords de la page (indifférent au scroll) Position: absolute positionne lélément par rapport aux bords de la page ou un élément parent positionné et reste sensible au défilement (scroll) – pour centrer un bloc dans un autre il suffira de mettre un "left: 50%;" et une margin-left dune valeur de moitié celle de la largeur du bloc à centrer. Pour laligement vertical, utilisez top et margin-top suivant le même principe.Vous pourrez placer les éléments positionnés avec les propriétés left, right, top et bottom.Il est important de comprendre ce quest la notion de flux dans un document. Les éléments positionnés enabsolute ou en fixed sortent du flux, leur place initiale nest plus prise en compte. Les éléments en relativegarde lemplacement initial visible même sils sont décalés.Z-indexDans les situations de positionnement, il peut y avoir des chevauchements ou superpositions de blocs. Avecz-index vous aller pouvoir définir un ordre de profondeur. Un "z-index: 1000;" passera devant un "z-index:800;". Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 9

Les sprites CSSGagner du temps dans le chargement des imagesAvec les sprites CSS, vous allez pouvoir charger une image composée de plusieurs images et nafficher que la partieintéressante en fonction de la page ou de la position dans la page. Lavantage est de ne charger quune seule image ! http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html Exemples http://blog.voyelle.me/dewplayer/sprites.html#sprites{ display: block; width: 108px; height: 229px; background: url(images/sprites.png) -1030px -958px no-repeat;}#sprites:hover, #sprites:active, #sprites:focus{ background-position: -1030px -37px;}#sprites span { display: inline-block; text-indent: -5000px;}Dimension de limage utilisée : 1286px par 1778px Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 10

Les propriétés CSS3 déjà en placeLes propriétés les plus connuesBorder-radiusCette fonction arrondit les coins. La ou les données en pixel définissent le rayon.{border-radius: 10px;} les quatre coins seront arrondis avec un rayon de 10px{border-radius: 10px 0 5px 4px;} le coin en haut à gauche aura un arrondi de 10px, celui de droite nenaura pas, celui en bas à droite un arrondi de 5px et le dernier en bas à gauche de 4pxText-shadow et box-shadowCette fonction ajoute une ombre à un texte ou un élément.{text-shadow: 1px 1px 5px #333}Les deux premières options définissent la direction horizontale et verticale (les valeurs peuvent êtrenégatives), la troisième la quantité de flou (0px correspond à labsence de flou) et la dernière lacouleur.Attention text-shadow nest pas supporté par IE9 et ses prédécesseurs.Box-sizingCette fonction permet de forcer la largeur dun cadre malgré des bordures ou des marges.{box-sizing: border-box;} Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 11

Les propriétés déjà en placeLes arrière-plans multiplesVous avez la possibilité de placer plusieurs images en arrière-plan dans un background ! Çaallègera le code. Vous avez 9 positions possible avec top, center, bottom, left et right enassociant avec no-repeat. On retrouve les options proposées pour le background comme repeat-x, repeat-y…{background: url(covers/0.jpg) no-repeat top left, url(covers/1.jpg) no-repeat top right,url(covers/2.jpg) no-repeat bottom right, url(covers/3.jpg) no-repeat bottom left,url(mobile/logo.gif) center left repeat-x, url(mobile/logo.gif) center top repeat-y;}OpacityCette fonction assez simple dutilisation ne sapplique quaux éléments, il nest pas possible dejouer sur lopacité dun texte. Pour rendre un texte translucide, il faudra changer lopacité dubloc le contenant. Les valeurs vont de 0 (invisible) à 1 (opaque).{opacity: .5;}hyphens: auto;Pour générer des césures plus travaillées qu’avec word-wrap.Voir http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html#hyphens Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 12

Les propriétés déjà en placeRGBAVous avez comme option pour les couleurs un modèle qui permet de reprendre les référencesRGB dune couleur et de lui ajouter une opacité (sur le même principe quopacity de 0 à 1).{color: rgba(0, 0, 0, .5);} cela correspond à du noir avec une opacité à 50%Il est aussi possible de nutiliser que rgb().Certaines propriétés ne sont pas complètement implantées. Vous devrez utiliser les préfixespour chacun des navigateurs. Navigateurs Préfixes Safari (webkit) -webkit- Firefox (mozilla) -moz- Opéra -o- Konqueror -khtml- IE (microsoft) -ms- Chrome -chrome- ou –webkit- Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 13

Les propriétés déjà en placeHSLAIl existe une autre syntaxe pour générer une couleur et de la transparence. HSL signifieTeinte(Hue), Saturation et Luminosité(Lightness).La première valeur doit être un nombre entre 0 et 359 et il détermine la teinte. Les deux autresvaleurs sont en pourcentage %.Voir : http://www.w3.org/TR/css3-color/#hsl-examples Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 14

Les propriétés déjà en placeColumnAvec les préfixes, vous pourrez afficher des colonnes dans un bloc.{-webkit-column-width: 20em;} définit une largeur pour les colonnes (ça permet dêtre flexibleet responsive){-webkit-column-gap: 1em;} définit une marge entre les colonnes{-webkit-column-rule: 1px solid #333;} fait apparaître une séparation de 1px{-moz-column-count: 3;} ou {-moz-columns: 2;} permet dimposer un nombre précis de colonnesVoir plus précisément : http://www.w3.org/TR/css3-multicol/Linear-gradient et radial-gradientComme la précédente propriété, il vous faudra utiliser des préfixes pour quelles fonctionnent.Ces fonctions a pour but de créer un dégradé sur un ligne ou en cercle. Information importante :elles sont une option de background-image.{background-image: -moz-linear-gradient(left top, #d60f0f 0%, #ffdd00 100%);}{background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB9750%);}Pour Safari et Chrome nous aurons –webkit-gradient (voir page suivante).Voir plus précisément : http://www.html5-css3.fr/css3/degrades-couleurs-css3-gradient Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 15

Les propriétés déjà en placeComme pour le moment les navigateurs interprètent assez mal les dégradés, Il existe des outilsen ligne qui permettent de générer les dégradés, il ne reste alors plus quà copier le code :http://www.westciv.com/tools/gradients/index-moz.htmlLécriture du CSS est différente que celle présentée avant mais fonctionne.Exemple :-webkit-gradient(linear, 0% 75%, 0% 19%, from(#ABABAB), to(#C9C9C9))-moz-linear-gradient(19% 75% 90deg,#ABABAB, #C9C9C9) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 16

Les propriétés déjà en placeLa fonction calc()Introduite avec CSS3, la fonction calc() permet de faire de simples calculs sur les tailles dansvotre fichier CSS, qui sont parfois incalculables d’avance lorsque l’on mélange pourcentages etpixels.{ width: calc(100% - 100px); }Source : http://maxime.sh/2013/02/css-calc/Compatibilités des navigateurs : http://caniuse.com/calc Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 17

Les propriétés déjà en placePropriété NavigateursBorder-radius Safari 3+, Chrome 3+, Firefoc 1+, Opéra 10.5+, IE 9+Text-shadow Safari 1,1+, Chrome 2+, Firefox 3.1+, Opéra 9.5+Box-shadow Safari 3+, Chrome 3+, Firefox 3.5+, Opéra 10.5+, IE 9+Arrière-plan multiples pour les images Safari 1.3+, Chrome 2+, Firefox 3.6+, Opéra 10.5+, IE 9+Opacity Safari 1.2+, Chrome 1+, Firefox 1.5+, Opéra 9+, IE 9+RGBA Safari 3.2+, Chrome 3+, Firefox 3+, Opéra 10+, IE 9+ Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 18

Les sélecteurs et les pseudo-élémentsLes pseudo-éléments sont un des aspects les plus intéressants du CSS et sont en place depuislongtemps pour certaines fonctions. Avant de voir les tableaux des sélecteurs dattribut et de tousles pseudo-éléments, voyons à partir dun exemple, les possibilités offertes.Pour compléter, vous trouveres des informations sur ces sites :http://www.yoyodesign.org/doc/w3c/css2/selector.htmlhttp://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaîtreQue signifie en css cette ligne de code : a:not([rel*="lightbox"]){text-transform: uppercase;} ?Pour commencer, nous nous adressons ici au lien (<a…>). Cependant, avec :not(), nous excluonstous les liens qui auraient le terme "lightbox" dans les informations données à lattribut rel (ex"lightbox effet", "effet-lightbox" ou "effetlightbox3"). Si nous avions mis rel="lightbox", nousaurions ciblé uniquement les liens avec linformation exacte "lightbox". Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 19

Les sélecteurs et les pseudo-élémentsSélecteurs dattribut Fonctions[rel] Cible les éléments qui contiennent un attribut "rel" quimporte sa valeur[class="effet"] ou [class=effet] Cible les éléments qui contiennent une classe dont la valeur exacte est "effet"[id|="header"] Cible les éléments qui contiennet une ID dont les valeurs séparées par des tirets "-" commenceraient par header[rel~=mavaleur] Cible les éléments qui contiennent un attribut rel contenant "mavaleur" dans une liste de valeurs séparées par des espaces[href^=http] Cible les éléments qui ont un attribut "href" qui comment par "http" – ici tous les liens et non les mails par exemple[src$=.png] Cible les éléments dont lattribut "src" se termine par[href$=.pdf] ".png" Pour cibler toutes les images, il pourrait être ajouter un attribut "data-filetype=image"[rel*=lightbox] Cible un élément qui contient latrribut "rel" dont les valeurs comportes au moins le terme "lightbox" (avec ou sans séparateur par opposition à ~) Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 20

Les pseudo-élémentsSélecteurs CSS Fonctions* Cible tous les élémentsE Cible uniquement les élément Ehtml:root ou :root Cible tous les éléments qui sont à la racine htmlE:nth-child(n) Cible les éléments numéro n par rapports à leurs frères dans un élément parent (pour cibler une ligne sur deux, vous utiliserez even pour les lignes paires et odd impaires)E:nth-last-child(n) Idem mais en commençant par la finE:nth-of-type(n) et :nth-last-of-type(n) Cibler dans des listes déléments frères le numéro "n" en partant du début ou de la fin de la listeE:first-child et E:last-child Cibler le premier ou le dernier élément enfant dun parentE:first-of-type et E:last-of-type Identique à :nth-of-type(1) et :nth-last-of-type(1)E:only-child Cibler les éléments enfants uniques de leur parentE:only-of-type Cibler tous les éléments qui nont pas de frèresE:empty Cibler les éléments videsE:link Cibler les éléments liens non visités Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 21

Les pseudo-élémentsSélecteurs CSS FonctionsE:visited Cibler les éléments (liens) qui ont été visitésE:active Cibler les éléments cliquésE:hover Cibler un élément survolé par la souris (limite sous IE6 aux éléments <a>)E:focus http://www.web-petit.com/css-focusE:target Cibler un élément comme une ancre qui serait appelée lors dun clickE:lang(fr) Cibler un élément dont lattribut langue est "fr"E:enabled et E:disabled Cibler les éléments actifs ou inactifs par exemple dans des formulaires (balises input, select…)E:checked Cibler les éléments "input" de type checkbox lorsque quils sélectionnésE::first-line Cibler la première ligne dun élémentE::first-letter Cibler la première lettre dun élémentE::before Cibler des éléments et ajouter du contenu avant celui-ciPour récupérer des contenus dattributs, on peut faire ainsi :{content: attr(href);} pour afficher le lurl du lien par exemple. (image, texte…) et lui appliquer des stylesE::after Idem mais en fin Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 22

Les pseudo-élémentsSélecteurs CSS FonctionsE#monId et E.maclasse Cibler les éléments qui ont une ID (rappel : les ID sont uniques) ou une classeE:not(selecteur) Cibler les éléments sauf le sélecteur indiquéEF Cibler les éléments F dont le parent sont les éléments EE>F Cibler les éléments F descendants directs de EE+F Cibler le premier élément F qui suit immédiatement les éléments EE~F Cibler les éléments F qui suivent les éléments E (moins strict que E + F)Vous avez maintenant la possibilité non seulement dutiliser ces sélecteurs mais de les associer les uns aux autrespour être le plus précis dans la mise en place de vos styles. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 23

Et aussiLes transitionsPour créer des transitions plus douces, il existe les fonctions "transition". Par exemple, vous souhaitez créerune transition de couleur via un :hover. Les préfixes sont indispensables pour le moment.À partir dun lien : Les fonctions du timing :<a href="#" class="transition">Ma transition</a>  EaseNous aurions en CSS :  Linear  Ease-ina.transition{  Ease-outpadding: 5px 10px;  Ease-in-out  Cubic-bezierbackground: purple;-webkit-transition-property: background; (on définit la propriété sur laquelle nous voulons faire une transition)-webkit-transition-duration: 1s; (on définit une durée en seconde)-webkit-transition-timing-function: ease; (on définit une courbe de vitesse)…} ou {-webkit-transition: background 1s ease;}a.transition:hover {background: yellow;} (ne pas oublier de définir aussi la couleur du :hover)Dautres options sont possibles : Transition-delay pour définir un temps entre ce qui déclenche la transition et la transition (en seconde) Sur plusieurs propriétés : {transition: background 1s ease, color 1s linear;} Sur toutes les propriétés : {transition: all 1.5s ease;} Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 24

Et aussiLes transformationsDe même que pour les transitions, cette fonction exige les préfixes.Elle se présente sous cette forme :transform: (vos options);Les options possibles : Modifier la taille : transform: scale(x); la valeur x représente le zoom que vous voulez effectuer, la valeur 1 étant la valeur sans modification Modifier langle : transform: rotate(xdeg); la valeur x représente les degrés et cette valeur peut être négative (ex: -15deg) Placer limage : transform-origin: bottom top left right center…; par défaut vous aurez center center pour lalignement vertical et horisontal Déformer limage : transform: skew(-10deg, 30deg); Déplacer limage : transform: transalte(xpx, ypx);Pour créer une animation comme faire tourner un soleil, il faudra ajouter du javascript ou du jquery. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 25

Et aussiLe parallaxeLe principe du parallaxe est de déplacer des images en fonction du défilement vertical et/ou horizontal, oudu redimensionnement de la page.Exemple de parallaxe dans un redimensionnement : http://silverbackapp.com/Pour que cela fonctionne, il faut que vos images soit en transparence (gif ou png) ou en opacité.Vous pouvez suivre les didacticiels suivant pour des effets plus complexes : http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript http://www.alsacreations.com/astuce/lire/1417-effet-parallaxe.html avec jQueryPour les effets de redimensionnent, cest assez simple à mettre en place.Vous placez vos 3 images de fond dans le <body>.background: url(images/body2.png) repeat-x scroll 70% 0, url(images/body3.png) repeat-x scroll 300% 0,url(images/body1.gif) repeat-x scroll -10% 0;La dernière image doit être celle qui se place le plus en arrière (celle qui peut être opaque par exemple).Ensuite, vous devez informer quelques options pour placer les éléments en haut de page, pour faire unerépétition horizontale avec repeat-x, puis un scroll pour que celles-ci ne suivent pas le déplacementverticale de la fenêtre (sinon fixed pour imposer la présence des images en haut de page. Les valeurs en %vont agir sur les images lorsque la fenêtre est redimensionner en les animant à des vitesses différentes. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 26

Quelques liens Tutoriels et démonstrations HTML5 et CSS3 http://www.html5-css3.fr/ http://www.yoyodesign.org/doc/w3c/css2/selector.html http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a- connaitre http://css.4design.tl/css-selecteur-frere-adjacent http://www.vanseodesign.com/css/combinators-pseudo-classes/ http://blog.voyelle.me/langages/petit-tour-des-fonctions-en-css3 http://www.webdesignweb.fr/web/css-3-transform-rotation-et-echelle-766 http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/Nos exemples Sprites http://blog.voyelle.me/dewplayer/sprites.html HTML5 et CSS3 http://blog.voyelle.me/dewplayer/html5css3.html Transitions http://blog.voyelle.me/dewplayer/transitions.html Parallaxe http://blog.voyelle.me/dewplayer/parallaxe.html et http://blog.voyelle.me/dewplayer/parallaxe2.html Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 27

CSS et CSS3

by Voyelle on Aug 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 323

Statistics

CSS et CSS3 Presentation Transcript

http://blog.voyelle.me	319
http://test.voyelle-dev.fr	4