AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Les Ombres (sur un texte ou sur un élément)

    Aeden
    Aeden
    FémininAge : 35Messages : 59

    Mer 9 Mai 2012 - 23:39

    Rappel du premier message :



    Bonjour à vous les gens : ici donc on va parler des ombres. Pour se faire... il va falloir réviser les maths car celles-ci opèrent avec ce qu'on appelait au lycée voir au collège : les abscisses et les ordonnées.



    Leçon 1 : Définition :
    • A----Les abscisses (x) : La ligne horizontale. Les valeurs à gauche du zéro sont négatives et à sa droite : positive. (Ex : -10, -5, 0, 5, 10).
    • B-----Les ordonnées (y) : La ligne verticale. Les valeurs positives sont initialement en haut tandis que celles du bas sont négatives.
    • C-----Image : Pour vous projeter, regardez une image tirée de wikipédia : Ici.

      Spoiler:


    ________________________________

    Marre de la théorie ? Je vous comprend... Bon passons à la pratique en commençant par les ombres dans un texte.

    Leçon 2 : Ombres Typographiques :
    • A-----Le style :
      Peu importe que vous employez "div" "span" ou "p", l'astuce restera la même. Pour définir le détail de ces balises on emploi à un moment ou à un autre "style".
      Ce qui peut donner :
      Code:
      <div style="">Votre texte ici</div>
      Ou encore :
      Code:
      <span style="">Votre texte ici</span>
      Ou sinon :
      Code:
      <p style="">Votre texte ici</p>
      Quoi choisir ? J'en sais rien, et ce n'est certainement pas ici que vous l'apprendrez.

    • B-----Nom de l'ombre :

      Il s'agit donc de nommer l'ombre du texte et en anglais on dit donc tout bêtement à notre stupide ordinateur "text-shadow". Vous devriez donc à cette partie-ci de l'exercice obtenir ceci :
      Code:
      <p style="text-shadow: x y w couleur;"> Votre texte, ici.</P>
      Note : Evidement les "x y w" Vont être les données à appliquer pour personnaliser l'ombre.

    • C-----Application :
      Prêt à y appliquer la théorie vu plus haut ?

      Si on prend l'exemple noté ci-dessus, X désigne donc les abscisses, Y : les ordonnées. Pour le W enfin c'est nouveau : ce sera la largeur, diamètre, l'épaisseur de l'ombre, appelez ça comme vous le voulez.

      ce qui donne ceci :
      Exemple type d'une ombre dans une boite.
      Code:
      <p style="text-shadow:2px 2px 3px black;"> Exemple type d'une ombre pour un paragraphe.</p> 

      Spoiler:


    ________________________________

    Voilà pour la typo d'un texte. On peut cependant aussi ombrer les boites... Et sur les boites j'oserai dire qu'il y a encore plus à dire. une fois que vous aurez bien assimilé la façon de procéder pour diriger une ombre (cf : Application des ombres typographiques), vous aurez alors de quoi vous amusez avec ce qui suit :

    Leçon 3 : Ombres appliquées aux boites :
    • A-----Ombre unique :

      *** Pour obtenir ceci :

      On utilise ceci :
      Code:
       Box-shadow: 0px 0px 5px black;


      Ombre
      sur
      Boite


    • B-----Ombres multiples

      Eh oui ça existe ! Exemple avec notre cher carré qui détient ici deux ombres : une jaune et une bleue :



      *** Pour cela on utilise une simple virgule, puis on rajoute la donnée de la seconde ombre. Attention : La seconde donnée va sous la première et les couleurs se fusionnent donc mieux vaut mettre l'ombre la plus petite en première.
      *** En toute logique vous pouvez ainsi rajouter plus de deux ombres ^^

      Ce qui donne :
      Code:
      Box-shadow: 0px 0px 15px yellow,0px 0px 20px blue;

    • C-----Ombre interne :

      Dernière astuce... x_x
      L'ombre interne est une ombre applicable aussi aisément qu'une ombre supplémentaire.
      Exemple avec une ombre rouge (la bordure noire est mise pour montrer sur l'ombre est bien interne) :



      Pour cela in faudra juste ajouter inset à l'ombre que vous souhaitez mettre en intérieur, ce qui donne :
      Code:
      box-shadow: inset 0px 0px 10px RED ;
      Mise avec les autres cela donnerai ceci :
      Code:
      Box-shadow: 0px 0px 15px yellow , 0px 0px 25px blue , inset 0px 0px 10px RED ;



    ________________________________________


    Astuce des ombres terminées, j'espère que ça servira à quelques uns d'entre vous o/


    Dernière édition par Aeden le Lun 27 Mai 2013 - 11:13, édité 2 fois



    sandcreations
    sandcreations
    FémininAge : 53Messages : 20

    Mer 22 Avr 2015 - 10:37

    Je veux voir ça merci
    SerenaSo
    SerenaSo
    FémininAge : 52Messages : 6

    Mer 22 Avr 2015 - 13:48

    Merci pour le tuto.
    Livoire
    Livoire
    FémininAge : 25Messages : 32

    Dim 17 Mai 2015 - 15:13

    Merci !
    Kraft
    Kraft
    FémininAge : 26Messages : 37

    Lun 18 Mai 2015 - 21:22

    Merci ! (:
    Nyotengu
    Nyotengu
    FémininAge : 30Messages : 85

    Dim 14 Juin 2015 - 0:21

    Merci ♥♥
    SethGuex
    SethGuex
    MasculinAge : 24Messages : 7

    Dim 12 Juil 2015 - 13:16

    Anastasia Roskaff a écrit:Merci beaucoup o/ Et très joli avatar *o*
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 36Messages : 215

    Dim 9 Aoû 2015 - 0:56

    Merci beaucoup Wink



    ....
    Aiolosly
    Aiolosly
    FémininAge : 26Messages : 110

    Dim 16 Aoû 2015 - 14:54

    Meeerci !



    Les Ombres (sur un texte ou sur un élément) - Page 4 Lonehelena_signa
    lulunoir
    lulunoir
    FémininAge : 22Messages : 15

    Mar 18 Aoû 2015 - 21:23

    Merci d'avance ♥
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 19 Aoû 2015 - 2:03

    Merci <3



    :heart: :heart:
    Kacernetra
    Kacernetra
    FémininAge : 24Messages : 26

    Jeu 20 Aoû 2015 - 19:16

    merci :friends:
    Nutop
    Nutop
    FémininAge : 22Messages : 254

    Mer 26 Aoû 2015 - 2:13

    Poney

    T'as dit "un p'tit mot" u.u




    Les Ombres (sur un texte ou sur un élément) - Page 4 Mini_597402Sceaufinal

    Lessien
    Lessien
    FémininAge : 42Messages : 163

    Dim 18 Oct 2015 - 11:40

    Je veux bien voir ça :)
    Devil.
    Devil.
    FémininAge : 27Messages : 58

    Dim 18 Oct 2015 - 18:52

    Merci !
    Girly
    Girly
    FémininAge : 27Messages : 116

    Mer 21 Oct 2015 - 13:46

    merci
    Damned
    Damned
    FémininAge : 23Messages : 109

    Sam 24 Oct 2015 - 15:22

    Merciii!
    yukiyuki
    yukiyuki
    FémininAge : 29Messages : 89

    Jeu 19 Nov 2015 - 21:21

    merci
    Shoki
    Shoki
    FémininAge : 23Messages : 1308

    Ven 18 Déc 2015 - 20:59

    Merci !




    Les Ombres (sur un texte ou sur un élément) - Page 4 5qox
    Raeden Liddell
    Raeden Liddell
    MasculinAge : 32Messages : 176

    Mer 23 Déc 2015 - 21:04

    Merki
    Sestren
    Sestren
    Autre / Ne pas divulguerAge : 32Messages : 36

    Mer 6 Jan 2016 - 15:51

    Merci !
    Ryukaï
    Ryukaï
    MasculinAge : 26Messages : 629

    Lun 25 Avr 2016 - 19:10

    Merci Very Happy



    Les Ombres (sur un texte ou sur un élément) - Page 4 15796010 Les Ombres (sur un texte ou sur un élément) - Page 4 14749110
    ghost.writer
    ghost.writer
    FémininAge : 29Messages : 27

    Lun 2 Mai 2016 - 14:52

    ma curiosité me perdra *sigh*
    merci pour le tuto :3



    uc
    Glaçou
    Glaçou
    FémininAge : 22Messages : 117

    Dim 9 Oct 2016 - 10:05

    Merci bien. ^^
    Patou972
    Patou972
    FémininAge : 45Messages : 181

    Sam 17 Déc 2016 - 17:07

    merci beaucoup
    Anonymous
    Invité

    Lun 20 Fév 2017 - 1:43

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 12:25