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.

anipassion.com

    Esthetique : les propriétés CSS les plus courantes + faire une class

    Partagez
    Ayael
    FémininAge : 21Messages : 550

    le Dim 26 Fév 2012 - 18:54

    Bonjour ! Je crois que ça n'a pas était fait, alors que ça me semble la base de la base pour coder! Donc voici une astuce toute bête mais utile!
    Nous allons donc voir comment faire de jolis cadres pour vos forums, en utilisant les propriétés les plus courantes comme l'arrondis, l'ombre, la couleur de fond, la bordure et enfin les marge intérieur extérieur! (Peut se mettre sur un sujet, dans la page d'accueil, ou les templates ^^)
    Ex : https://i46.servimg.com/u/f46/16/36/06/79/sans_t70.png

    Alooors il y a deux méthodes pour faire ce genre de cadres, soit faire une classe soit utiliser un style. Nous verrons les deux qui sont très similaires. En fait ce qui est important à savoir c'est qu'il existe plein de propriétés qu'on peut utiliser, les voici :
    (tous les #000000 sont à remplacer par un code couleur, et les ? par une donnée tel que 1 ou 12 ou 24 )

    Le cadre en lui même :
    Code:
    background-color:#000000; /*Couleur de fond*/
    border ?px solid #000000; /*bordure*/
    → Solid est la bordure la plus classique et la plus simple utilisée, mais il existe différents types de bordures, les voici :
    Spoiler:
    Il vous suffit donc de remplacer "solid" par le nom de la bordure que vous souhaitez!

    Code:
    border-radius:?px; /* arrondir les angles de votre cadre*/  NON COMPATIBLE SUR IE
    box-shadow: ?px ?px ?px #000000;  /* mettre une ombre autour de votre cadre*/ NON COMPATIBLE SUR IE
    width:?px; /*largeur de votre cadre*/
    height:?px;/*hauteur de votre cadre*/
    padding:?px; /* marge intérieure de votre cadre, pour que le texte ne soit pas collé à la bordure*/
    margin:?px; /* marge extérieure de votre cadre*/

    Le texte à l'intérieur:
    Code:
    color:#000000; /*couleur du texte*/
    font-style: ....; /*mettre italic (italique) ou underline (souligné) */
    font-family: ??? ; /*nom de la police d'écriture*/
    font-size :?px ; /*taille du texte*/
    text-align: ....; /*mettre center (centrer) justify (justifier) right (droit) */
    text-shadow: 3px 3px 3px #000000; /*ombre autour du texte*/
    NON COMPATIBLE SUR IE
    La première propriété correspond au décalage en bas, la second, au décalage à droite et la dernière à la taille de l'ombre

    Il est aussi possible de faire un résultat particulier en associant certaines propriétés à un seul côté de votre cadre (ex numéro 1), pour cela on peut faire un "mix" avec la plupart des propriété vuez ci-dessus
    left = gauche
    right= droite
    top = haut
    bottom = bas

    Par exemple : je veux une bordure normale de 5 px en haut, de 2px sur les côtés et de 10px en bas . Je peux mettre :
    Code:
    border-top: 5px solid #000000;
    border-bottom:5px solid #000000;
    border-right:2px solid #000000;
    border-left: 2px solid #000000;

    Mettre une barre de défilement (scrollbar):
    Pour cela il faut que vous ayez défini la hauteur de votre cadre (height) et que vous ajoutiez ceci :
    Code:
    overflow:auto;

    Je veux que mon cadre s'adapte au contenu :
    Pour cela il faut mettre cette propriété :
    Code:
     display:inline-block;

    Je veux centrer mon cadre :
    Pour cela il faut avoir défini la largeur du cadre (width) et que vous ajoutiez ceci :
    Code:
    margin-right:auto;
    margin-left:auto;

    J'ai conscience que ça fait beaucoup de donné d'un coup mais le plus dur est passé !

    Comment mettre tout ça en forme eh bien soit vous créez une classe :

    Mettre un code comme ceci en mettant le nom de votre choix à la place de nomdelaclass dans le html (dans un message par exemple) en conservant les guillemets :
    Code:
    <div class="nomdelaclass"> texte </div>

    et dans le CSS (Panneau d'administration → affichage → couleur → feuille de style CSS)

    Code:
    .nomdelaclass {
    Les propriétés que vous avez choisies;
    propriété que vous avez choisi;
    }

    ATTENTION : - Le nom de la class doit être rigoureusement identique dans le CSS et dans le html !
    - Une propriété se finit toujours par un point virgule


    Sinon vous pouvez utiliser un style

    Dans le html :

    Code:
    <div style="propriété que vous avez choisi; propriété que vous avez choisi;"> Texte</div>

    Un petit exemple ?
    Je veux un cadre centré, qui ait les contours noirs et une ombre, un intérieur blanc, un léger arrondi et un texte noir justifié !

    Voilà le résultat


    Code:

    <div style="width:250px; height:250px; margin-right:auto; margin-left:auto; box-shadow:2px 2px 5px #000; background-color:#fff; color:#000; text-align:justify; padding:5px; border: 1px solid #000; border-radius:5px;"> Voilà le résultat</div>



    A vous de jouer maintenant ! N'hésitez pas à me poser des questions et n'oubliez pas, un merci n'a jamais tué personne!


    Dernière édition par Shay Altanir le Mer 29 Fév 2012 - 13:50, édité 1 fois

    vic_le_faucheur
    MasculinAge : 22Messages : 764

    le Dim 26 Fév 2012 - 20:28

    Pas mal du tout cette astuce ^^ C'est super bien expliqué !

    Peux être ajouter que ce n'est pas compatible avec IE ?

    En tout cas bravo

    Len111
    MasculinAge : 19Messages : 98

    le Lun 27 Fév 2012 - 4:09

    Merci beaucoup, mais j'ai une questions on peut la convertir pour faire des codes pour améliorer les spoiler, codes et ciation?



    Ayael
    FémininAge : 21Messages : 550

    le Mer 29 Fév 2012 - 13:48

    Bien sure (au deux !)
    J'édite mon premier message, et j'ai fais un tutoriel pour les spoiler code et citation : http://www.never-utopia.com/t37408-personalise-les-spoiler-code-et-citation#554829

    Contente d'avoir pu vous aidez!

    (edit : fait j'ai rajouté cette mention : NON COMPATIBLE SUR IE à ceux qui ne marche pas sur Internet explorer!)

    Okhmhaka
    FémininAge : 31Messages : 31718

    le Mer 29 Fév 2012 - 14:15

    Pas mal du tout ! Merci pour cette astuce Very Happy



    guarana
    MasculinAge : 20Messages : 22

    le Dim 25 Nov 2012 - 1:19

    Un grand merci =)
    Kriisten25
    FémininAge : 23Messages : 190

    le Sam 12 Jan 2013 - 13:54

    C'est très réussi :)

    Merci beaucoup !



    ∞ LONDON & TEAM ROBSTEN ♥.
    • 0n prend de mauvaises habitudes en parlant quotidiennement au gens, on s'attache vite sans s'apercevoir que l'on va tomber de haut & souffrir. Quand la personne vous laisse tomber, on se rend compte à quel point elle est importante & on regrette de s'être attaché. Au final; ce ne sont que regrets & souffrance que l'on récolte. 0n a beau dire ce que l'on veut, l'attachement est une absurdité, une incitation à la douleur. hellsangels.
    John Parker
    MasculinAge : 34Messages : 57

    le Jeu 27 Juin 2013 - 23:21

    Merci énormément ! Moi qui était largué totalement, ben maintenant je comprends !



    Le Dévoreur de temps
    MasculinAge : 37Messages : 57

    le Jeu 19 Juin 2014 - 20:24

    Bonsoir,

    Merci encore pour le partage. C'est vraiment intéressant .

    Si j'arrive à installer ça je serai heureux.

    Je voulais juste savoir, mais la div class, si on veut l'appliquer aux spoilers, par exemple, on la met dans indexbody ? Mais à quel endroit ? Parce que l'indexbody fait un bras de long chez moi. En fait, j'avais un très joli spoiler, très discret à l'état fermé, il ne faisait qu'un tout petit onglet, mais je l'ai perdu en cassant mon css avec un code foireux Sad . J'ai presque tout récupéré, sauf les spoilers et codes qui sont maintenant d'une banalité à pleurer. Donc les personnaliser, je veux. Sauf que je dois certainement supprimer l'ancienne class ou div htlm qui se rattachait à l'ancien spoiler. Et je sais fichtrement pas comment la repérer (pour couronner le tout mon forum tourne sous phpBB3 prosilver qui est une vraie vacherie en codage ^^)

    Sinon, j'ai cherché sans trouver... mais comment fait-on pour personnaliser un cadre de code en y incluant la fonction "sélectionner" . C'est bien pratique ...



    Dixy
    FémininAge : 22Messages : 217

    le Mer 20 Mai 2015 - 20:10

    Merci beaucoup pour le partage !



    Lamire
    FémininAge : 23Messages : 83

    le Jeu 21 Jan 2016 - 2:39

    C'est très intéressant~
    Kelalin
    FémininAge : 24Messages : 1405

    le Jeu 21 Jan 2016 - 11:35

    Merci pour le partage ! (´ω`)
    Contenu sponsorisé

    Aujourd'hui à 19:09


      La date/heure actuelle est Jeu 8 Déc 2016 - 19:09