AccueilFAQRechercherMembresGroupesS'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.


    [Cursus] Étape 9 : Un peu de CSS3 et ses exigences

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Lun 2 Nov 2015 - 18:09

    Étape 9 : Un peu de CSS3 et ses exigences


    Maintenant que vous avez les bases de HTML et de CSS dans les messages, il est temps pour nous d'aborder les CSS3, qui permet de faire plusieurs choses assez intéressantes. Le CSS3, étant relativement neuf, demande cependant parfois d'avoir des préfixes, que vous avez peut-être déjà vu apparaître dans les codes, tel que -webkit- pour Safari, Chrome et Opera, -o- pour Opera anciennement, -moz- pour Firefox et -ms- pour Internet Explorer. Nous verrons quand utiliser ces préfixes et quand ils sont inutiles.

    Sachez que vus pouvez utiliser la plupart des choses que vous verrez ici de manière plus avancée avec des effets au click ou alors au passage de la souris. Cependant, étant donné que dans cette partie nous ne regardons que de la mise en forme simple dans les messages plutôt qu'un CSS externe, nous ne verrons pas ces effets. Vous les verrez dans une prochaine étape du Cursus.

    Dans cette étape, nous verrons donc les mises en formes ajoutées par le CSS3. Ce sont: les bords arrondis (border-radius), les images de bord (border-image), les images de fond multiples, les tailles d'image de fond, les couleurs à opacité, les dégradés, les colonnes multiples (column-count), les filtres, le resize, le outline-offset, le box-sizing, le flex, les transformations 2D et les transformations 3D.
    Les transitions et les animations, ainsi que les media queries seront vus dans une prochaine étape.

    Ça fait beaucoup!  affraid

    Effectivement, cela fait beaucoup à voir! Mais ne vous en faites pas, nous allons aller étape par étape et voir chaque chose individuellement, en vous donnant quelques exemples et en vous expliquant comment les utiliser.
    Mais sachez avant tout que e CSS3 donne surtout beaucoup de nouvelles possibilités et, beaucoup d'entre elles ne sont que rarement explorées! Profitez-donc de cette étape pour découvrir de nouvelles choses et approfondir vos bases! Wink

    Avant de commencer, bien que nous allons parler de qui a besoin de préfixe ou non à la suit,e sachez qu'il se peut que dans quelques temps, les informations données ici soient devenues obsolètes. N'hésitez donc pas à utiliser Can I Use qui vous permettra de savoir si vous devez utiliser un préfixe ou non, mais également de lire le tutoriel de ManuManu à ce sujet.


    Les bords arrondis


    Les border-radius n'ont plus besoin de préfixes.


    Les images de bord


    Le border-image n'a plus besoin de préfixes.


    Les images de fond multiples


    background-image, background-origin et background-clip n'ont plus besoin de préfixes.


    Les tailles d'image de fond


    background-size n'a plus besoin de préfixes.


    Les couleurs à opacité


    Les couleurs à opacité n'ont pas besoin de préfixes.


    Les dégradés


    Les dégradés n'ont plus besoin de préfixes.


    Les colonnes multiples


    column-count, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width et column-width nécessitent les préfixes -moz- et -webkit- .


    Les filtres


    Les filtres n'ont besoin de préfixes que pour les navigateurs webkit sous la forme: -webkit-filter: filtre();. Les filtres ne sont pas supportés par Internet Explorer.


    Le resize


    Le resize ne nécessite pas de préfixes mais ne'st actuellement pas supporté par Edge et Internet Explorer.


    Le outline-offset


    Le outline-offset ne nécessite pas de préfixes mais ne'st actuellement pas supporté par Edge et Internet Explorer.


    Le box-sizing


    Le box-sizing n'a plus besoin de préfixes.


    Le flex


    Le flex n'a besoin de préfixes que pour les navigateurs webkit sous la forme: display: -webkit-flex.


    Les transformations 2D


    Les transformations 2D n'ont besoin de préfixes que pour Safari avec le préfixe -webkit- sous la forme: -webkit-propriété: valeur();.


    Les transformations 3D


    Les transformations 3D n'ont besoin de préfixes que pour Safari avec le préfixe -webkit- sous la forme: -webkit-propriété: valeur();.




      La date/heure actuelle est Ven 19 Oct 2018 - 22:01