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.


    Quelques codes CSS sympa

    Partagez
    MasculinAge : 24Message(s) : 1349
    Angel Ezekiel
    le Mer 21 Avr 2010 - 23:16
    Voila je vais vous parler de quelques codes CSS sympa

    Voici le code afin d'obtenir des cadres autours des noms de catégories,un double soulignement etc
    .Catégorie{
    background-color:couleur;/couleur de l'intérieur du cadre/
    background-image:url(URL):/none si vous en voulez pas/
    color:couleur;/couleur de la typo et du cadre
    text-align:center;/center-right-left où se trouve ton texte/
    text-transform:none;/si vous voulez mettre en majuscule mettez Uppercase
    letter-spacing: 5px;/pour espacer les lettres/
    word-spacing: 20px;/pour espacer les mots/
    font-family:serif;/la typos/
    border-top-style:solid;/Style de bordure ici solide pour des pointilliers dotted pour des tirets dashed pour des doubles double/
    border-top-width:medium;/taille de la bordure thin-medium-thick/
    border-bottom-style:solid;
    border-bottom-width:medium;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }

    et vous inserez ça dans vos noms de catégorie
    Code:
    <div class="catégorie">nom de la catégorie</div>

    Le code pour modifier les citations,les codes et les spoilers:

    .quote {
    background-repeat: no-repeat;
    background-image: url('');
    background-position: center;
    border-top-style:solid;/Style de bordure ici solide pour des pointilliers dotted pour des tirets dashed pour des doubles double/
    border-top-width:thin;/taille de la bordure thin-medium-thick/
    border-bottom-style:solid;
    border-bottom-width:thin;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }

    .code {
    background-repeat: no-repeat;
    background-image: url('');
    background-position: center;
    border-top-style:solid;/Style de bordure ici solide pour des pointilliers dotted pour des tirets dashed pour des doubles double/
    border-top-width:thin;/taille de la bordure thin-medium-thick/
    border-bottom-style:solid;
    border-bottom-width:thin;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }

    .spoiler {
    background-repeat: no-repeat;
    background-image: url('');
    background-position: center;
    border-top-style:solid;/Style de bordure ici solide pour des pointilliers dotted pour des tirets dashed pour des doubles double/
    border-top-width:medium;/taille de la bordure thin-medium-thick/
    border-bottom-style:solid;
    border-bottom-width:thin;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }


    MasculinAge : 24Message(s) : 1349
    Angel Ezekiel
    le Sam 24 Avr 2010 - 14:12
    En voila un nouveau qui est très utile:
    .forumline
    {
    border-right: 1px solid #601d1d;
    border-left: 5px solid #601d1d;
    border-top: 1px solid #601d1d;
    border-bottom: 1px solid #601d1d;
    }

    Petite explication:Il sert à modifier les cadres des catégories surtout lorsqu'elles sont séparés au niveau de la hiérarchie(comme sur Nu)

    Explication du code:
    forumline/élément à modifier ici ligne des forums
    border-right/bordure droite taille et couleurs et style
    border-left/bordure gauche
    border-top/bordure du haut
    border bottom/bordure du bas


    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 24 Avr 2010 - 14:25
    pouarrais-je avoir ton msn s'il te plais par mp pour te poser quel que questions




    ~ Canonnier of Calypso ~
    MasculinAge : 21Message(s) : 245
    aymene256
    le Sam 24 Avr 2010 - 14:26
    Merci pour ces codes,ont aura besoin.


    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 24 Avr 2010 - 14:34
    je t'est ajouté




    ~ Canonnier of Calypso ~
    FémininAge : 25Message(s) : 40
    Strawby
    le Mer 7 Juil 2010 - 9:46
    Merci beaucoup pour ce tuto je l'utilise pour faire un effet ombre sur mon forum en générale
    Merci beaucoup :)
    Age : 24Message(s) : 76
    Mitsuomi Takayanagi
    le Mar 13 Juil 2010 - 12:06
    Bien le bonjour. J'ai suivi l'astuce pour les codes, citations et spoiler, et j'ai réussi à mettre un fond(background) mais je n'ai pas de contour. Je suppose qu'il faut modifier les "border..." mais j'ai essayé et ça n'a rien changé. Serait il possible de mettre un double cadre autour de mes citations codes et spoilers?


    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Dim 1 Aoû 2010 - 12:32
    voila mon code pour les cadres de catégories ^^ :

    Code:
    .Catégorie{
    background-color:#12690C;/couleur de l'intérieur du cadre/
    background-image:none:/none si vous en voulez pas/
    color:#000000;/couleur de la typo et du cadre
    text-align:center;/center-right-left où se trouve ton texte/
    text-transform:none;/si vous voulez mettre en majuscule mettez Uppercase
    letter-spacing: 5px;/pour espacer les lettres/
    word-spacing: 20px;/pour espacer les mots/
    font-family:serif;/la typos/
    border-top-style:solid;/Style de bordure ici solide pour des pointilliers dotted pour des tirets dashed pour des doubles double/
    border-top-width:medium;/taille de la bordure thin-medium-thick/
    border-bottom-style:solid;
    border-bottom-width:medium;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }

    je n'ai pas du tous de cadre merci de m'aider .




    ~ Canonnier of Calypso ~
    MasculinAge : 22Message(s) : 601
    Gangea'
    le Mer 13 Oct 2010 - 13:55
    Tes valeurs ne sont pas modifiées.. :) JE pense que sa vient de la car chez moi, sa marche à merveille ^^



    FémininAge : 19Message(s) : 24
    Feufeu'
    le Mar 9 Aoû 2011 - 16:26
    Code:
    .Catégorie{
    background-color:#006600;
    background-image:none:
    color:#00CC00;
    text-align:center;
    text-transform:Uppercase;
    letter-spacing: 5px;
    word-spacing: 20px;
    font-family:Gungsuh;
    border-top-style:dotted;
    border-top-width:medium;
    border-bottom-style:solid;
    border-bottom-width:medium;
    border-left-style:solid;
    border-left-width:thin;
    border-right-style:solid;
    border-right-width:thin;
    }

    Voici mon code, mais cela ne change rien... :/
    MasculinAge : 19Message(s) : 691
    EcKo'
    le Mar 9 Aoû 2011 - 17:08
    Remplace " Catégorie " par " catégorie " le fait d'enlevé la majuscule change tout Wink


    FémininAge : 19Message(s) : 24
    Feufeu'
    le Mar 9 Aoû 2011 - 21:39
    Ah bah oui, merci! ^^'
    FémininAge : 31Message(s) : 34
    chess
    le Mer 28 Sep 2011 - 10:40
    merci pour tous les codes !! *va lire le topic*
    MasculinAge : 23Message(s) : 10
    Ussop
    le Lun 3 Oct 2011 - 16:23
    Le code pour modifier le surlignement a mettre dans le css :

    Code:

    ::selection {color:#fff;   background: #F04444;}      
    ::-moz-selection {   color:#fff;background: #F04444;}

    Et il fonctionne aussi sous i.e :)
    FémininAge : 30Message(s) : 631
    Immortal
    le Mar 25 Oct 2011 - 14:44
    Merci beaucoup ^^



    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    FémininAge : 96Message(s) : 42
    lapamina
    le Dim 20 Nov 2011 - 2:11
    Merci Wink
    MasculinAge : 33Message(s) : 9
    sid
    le Ven 23 Déc 2011 - 12:58
    merci :)
    MasculinAge : 28Message(s) : 133
    Balmung Lynren
    le Ven 20 Jan 2012 - 11:47
    Merci pour le code c'est sympathique ^^


    FémininAge : 19Message(s) : 24
    Kispz.
    le Ven 6 Juil 2012 - 16:54
    Merci du partage (;





    FémininAge : 26Message(s) : 20
    Houyo
    le Dim 12 Aoû 2012 - 16:40
    Merci pour l'astuce ! Mon forum va être beau grâce à vous ! *.*
    FémininAge : 23Message(s) : 190
    Kriisten25
    le Sam 12 Jan 2013 - 14:03
    Merci pour ces codes :)


    ∞ 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.
    FémininAge : 26Message(s) : 133
    Falyae
    le Sam 9 Fév 2013 - 14:04
    Merci pour tout!


    MasculinAge : 38Message(s) : 112
    riffraff
    le Jeu 25 Avr 2013 - 17:57
    merci mais je n'ai pas vu la difference pour ce code:
    .forumline
    {
    border-right: 1px solid #601d1d;
    border-left: 5px solid #601d1d;
    border-top: 1px solid #601d1d;
    border-bottom: 1px solid #601d1d;
    }

    quelqu'un peut me la montrer?

    merci
    FémininAge : 27Message(s) : 32
    Min@
    le Sam 8 Fév 2014 - 14:00
    Merci.
    FémininAge : 41Message(s) : 236
    Solitude
    le Jeu 5 Mar 2015 - 18:38
    merci


    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Contenu sponsorisé
    Aujourd'hui à 9:00

      La date/heure actuelle est Sam 1 Oct 2016 - 9:00