Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Coins arrondis, effets avancés

    Partagez
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Sam 19 Jan 2013 - 19:10
    Hello les loups,

    Vous connaissez peut-être la propriété CSS3 border-radius, surtout si vous avez lu ce tutoriel :

    La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs. Son utilisation est plutôt aisée.
    Mais saviez-vous qu'on peut également créer des formes moins régulières ?

    À noter : ce tutoriel propose une syntaxe des propriétés avec les préfixes -webkit- et -moz-, c'est préfixe ne sont plus utiles sur les dernières versions de ces navigateurs (Firefox et Chrome, entre autres webkit)

    Une utilisation plus poussée

    La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. Voici comment pourrait se présenter un de ces codes :

    Code:
    .boite{
        -webkit-border-radius: 12px / 24px;
        -moz-border-radius:    12px / 24px;
        border-radius:        12px / 24px;
    }

    Les deux valeurs utilisées représentent l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde. Vous pouvez ainsi styler vos angles arrondis en les écrasant un peu.


    Comme vous pouvez le constater, l'utilisation d'un slash entre les deux valeurs est indispensable pour produire un tel effet.

    Mais encore... ?

    En poussant le vice un peu plus loin on peut facilement imaginer construire un ovale. La construction d'un ovale respecte une règle assez simple que l'on pourrait résumer ainsi :

    Les dimensions des arrondis d'un ovale sont de moitié égales à celles du rectangle qui le contient.

    Certains seront peut-être plus éclairés avec des chiffres, voici donc un exemple :
    Code:
    .ovale {
        width: 200px;
        height: 320px;
        background: #9a4;
        -webkit-border-radius: 100px / 160px;
        -moz-border-radius:    100px / 160px;
        border-radius:        100px / 160px;
    }

    Nous avons ici une classe appliquée à un bloc qui va prendre comme valeurs 200px de largeur et 320px de hauteur. Nos arrondis prennent en valeurs 100px (soit la moitié de 200... si si promis) sur l'horizontale et 160px sur la verticale.

    Vous aurez donc compris que le rond (ou cercle) est désormais facilement réalisable en CSS3. Cependant en terme de contenu textuel, n'espérez pas y mettre grand chose, ça se limitera, je pense, à une utilisation graphique (design). Est-il utile de vous rappeler que cette utilisation du CSS permettra un affichage correct uniquement sur les derniers navigateurs ? Il faut compter sur un support de Internet Explorer uniquement à partir de la version 9.

    Allons plus loin

    La valeur de la propriété border-radius peut être précisée pour réaliser une modification des angles au cas par cas :

    Code:
    .arrondi {
        width: 120px;
        height: 50px;
        border: 2px solid #000;
        -webkit-border-radius:
                  10px 75px 10px 10px / 10px 30px 10px 10px;
        -moz-border-radius:
                  10px 75px 10px 10px / 10px 30px 10px 10px;
        border-radius:
                  10px 75px 10px 10px / 10px 30px 10px 10px;
    }

    Le principe reste le même que d'habitude dans l'ordre de déclaration des valeurs, nous partons de l'angle haut gauche pour finir à l'angle bas gauche en faisant le tour de la boîte. Tout ce qui se trouve à gauche du séparateur de valeurs (le slash) traite les dimensions horizontales des arrondis, ce qui se trouve à droite traite les dimensions verticales. Nous avons donc ce schéma :



    Combinée avec les propriétés de transformation et de transition (entre autres) vos styles prendrons une nouvelle dimension.

    Tutoriel initialement proposé sur Alsacréations.
    Avec l'accord de son auteur.



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 27Message(s) : 35
    Flitch
    le Lun 6 Juil 2015 - 2:24
    Merci... D'autres méthodes pour de l'arrondi?
    FémininAge : 41Message(s) : 250
    Solitude
    le Dim 30 Aoû 2015 - 20:14
    merci


    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    FémininAge : 24Message(s) : 1399

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Dim 30 Aoû 2015 - 23:35
    Merci ! \(T∇T)/
    FémininAge : 25Message(s) : 72
    MeowLowDee
    le Ven 29 Jan 2016 - 13:05
    C'est vraiment fun, merci !
    Contenu sponsorisé
    Aujourd'hui à 5:33

      La date/heure actuelle est Sam 3 Déc 2016 - 5:32