• Hey! Aujourd'hui, je vous présente un tuto tout simple, c'est pour pouvoir faire une zone de texte (c'est à dire un encadré où on peut écrire dedans), en voici une:

    C'est bien alors mettez ça sur votre blog!Si ça vous plait!

    Essayer de placer votre curseur dessus, cliquez, et entrez le texte que vous voulez, magique non?

    Bon, passons au chose sérieuse, le code:

    <input style="background-image: IMAGE DE FOND; padding-left: MARGE INTERNEpx;" size="TAILLE DU TEXTE (NE RAJOUTEZ PAS PX); border: BORDURE; margin: MARGE EXTERNE" type="text" />

    Vous pouvez rajouter plusieurs attributs à "style". Bon, explication:
    ☺IMAGE DE FOND: si vous voulez rajouter une image de fond à votre zone de texte. Code: <img src="IMAGE" />
    ☺MARGE INTERNE: si vous voulez que le texte soit espacé un peut du bord, mettez ce code: NOMBRE DE PIXEL DU BORDpx
    ☺TAILLE DU TEXTE: pour choisir la taille du texte, mettais un nombre de pixel (genre 13)
    ☺BORDURE: si vous voulez modifier les bordures, mettais un code dans ce genre là, mais vous pouvez le modifier: 1px double black
    ☺MARGE EXTERNE: si vous voulez que votre zone de texte soit espacé des autres élément, mettais une valeur (genre 20)

    PS: Si vous voulez laisser les valeurs vides, mettez "none" (sauf pour la taille du texte!

    Et voilà, vous savez maintenant créer des zones de texte!


    12 commentaires
  • Source: http://www.commentcamarche.net/contents/html/htmlcouleurs.php3, avec la participation de Marieka

    Bonjour, aujourd'hui, je vous présente un tableau avec beaucoup de couleur html. De manière à vous évitez de chercher!

    Nom de la couleurAperçuCodage RVB
    aliceblue ███████ aliceblue #F0F8FF
    antiquewhite ███████ antiquewhite #FAEBD7
    aqua ███████ aqua #00FFFF
    aquamarine ███████ aquamarine #7FFFD4
    azure ███████ azure #F0FFFF
    beige ███████ beige #F5F5DC
    bisque ███████ bisque #FFE4C4
    black ███████ black #000000
    blanchedalmond ███████ blanchedalmond #FFEBCD
    blue ███████ blue #0000FF
    blueviolet ███████ blueviolet #8A2BE2
    brown ███████ brown #A52A2A
    burlywood ███████ burlywood #DEB887
    cadetblue ███████ cadetblue #5F9EA0
    chartreuse ███████ chartreuse #7FFF00
    chocolate ███████ chocolate #D2691E
    coral ███████ coral #FF7F50
    cornflowerblue ███████ cornflowerblue #6495ED
    cornsilk ███████ cornsilk #FFF8DC
    crimson ███████ crimson #DC143C
    cyan ███████ cyan #00FFFF
    darkblue ███████ darkblue #00008B
    darkcyan ███████ darkcyan #008B8B
    darkgoldenrod ███████ darkgoldenrod #B8860B
    darkgray ███████ darkgray #A9A9A9
    darkgreen ███████ darkgreen #006400
    darkkhaki ███████ darkkhaki #BDB76B
    darkmagenta ███████ darkmagenta #8B008B
    darkolivegreen ███████ darkolivegreen #556B2F
    darkorange ███████ darkorange #FF8C00
    darkorchid ███████ darkorchid #9932CC
    darkred ███████ darkred #8B0000
    darksalmon ███████ darksalmon #E9967A
    darkseagreen ███████ darkseagreen #8FBC8F
    darkslateblue ███████ darkslateblue #483D8B
    darkslategray ███████ darkslategray #2F4F4F
    darkturquoise ███████ darkturquoise #00CED1
    darkviolet ███████ darkviolet #9400D3
    deeppink ███████ deeppink #FF1493
    deepskyblue ███████ deepskyblue #00BFFF
    dimgray ███████ dimgray #696969
    dodgerblue ███████ dodgerblue #1E90FF
    firebrick ███████ firebrick #B22222
    floralwhite ███████ floralwhite #FFFAF0
    forestgreen ███████ forestgreen #228B22
    fuchsia ███████ fuchsia #FF00FF
    gainsboro ███████ gainsboro #DCDCDC
    ghostwhite ███████ ghostwhite #F8F8FF
    gold ███████ gold #FFD700
    goldenrod ███████ goldenrod #DAA520
    gray ███████ gray #808080
    green ███████ green #008000
    greenyellow ███████ greenyellow #ADFF2F
    honeydew ███████ honeydew #F0FFF0
    hotpink ███████ hotpink #FF69B4
    indianred ███████ indianred #CD5C5C
    indigo ███████ indigo #4B0082
    ivory ███████ ivory #FFFFF0
    khaki ███████ khaki #F0E68C
    lavender ███████ lavender #E6E6FA
    lavenderblush ███████ lavenderblush #FFF0F5
    lawngreen ███████ lawngreen #7CFC00
    lemonchiffon ███████ lemonchiffon #FFFACD
    lightblue ███████ lightblue #ADD8E6
    lightcoral ███████ lightcoral #F08080
    lightcyan ███████ lightcyan #E0FFFF
    lightgoldenrodyellow ███████ lightgoldenrodyellow #FAFAD2
    lightgreen ███████ lightgreen #90EE90
    lightgrey ███████ lightgrey #D3D3D3
    lightpink ███████ lightpink #FFB6C1
    lightsalmon ███████ lightsalmon #FFA07A
    lightseagreen ███████ lightseagreen #20B2AA
    lightskyblue ███████ lightskyblue #87CEFA
    lightslategray ███████ lightslategray #778899
    lightsteelblue ███████ lightsteelblue #B0C4DE
    lightyellow ███████ lightyellow #FFFFE0
    lime ███████ lime #00FF00
    limegreen ███████ limegreen #32CD32
    linen ███████ linen #FAF0E6
    magenta ███████ magenta #FF00FF
    maroon ███████ maroon #800000
    mediumaquamarine ███████ mediumaquamarine #66CDAA
    mediumblue ███████ mediumblue #0000CD
    mediumorchid ███████ mediumorchid #BA55D3
    mediumpurple ███████ mediumpurple #9370DB
    mediumseagreen ███████ mediumseagreen #3CB371
    mediumslateblue ███████ mediumslateblue #7B68EE
    mediumspringgreen ███████ mediumspringgreen #00FA9A
    mediumturquoise ███████ mediumturquoise #48D1CC
    mediumvioletred ███████ mediumvioletred #C71585
    midnightblue ███████ midnightblue #191970
    mintcream ███████ mintcream #F5FFFA
    mistyrose ███████ mistyrose #FFE4E1
    moccasin ███████ moccasin #FFE4B5
    navajowhite ███████ navajowhite #FFDEAD
    navy ███████ navy #000080
    oldlace ███████ oldlace #FDF5E6
    olive ███████ olive #808000
    olivedrab ███████ olivedrab #6B8E23
    orange ███████ orange #FFA500
    orangered ███████ orangered #FF4500
    orchid ███████ orchid #DA70D6
    palegoldenrod ███████ palegoldenrod #EEE8AA
    palegreen ███████ palegreen #98FB98
    paleturquoise ███████ paleturquoise #AFEEEE
    palevioletred ███████ palevioletred #DB7093
    papayawhip ███████ papayawhip #FFEFD5
    peachpuff ███████ peachpuff #FFDAB9
    peru ███████ peru #CD853F
    pink ███████ pink #FFC0CB
    plum ███████ plum #DDA0DD
    powderblue ███████ powderblue #B0E0E6
    purple ███████ purple #800080
    red ███████ red #FF0000
    rosybrown ███████ rosybrown #BC8F8F
    royalblue ███████ royalblue #4169E1
    saddlebrown ███████ saddlebrown #8B4513
    salmon ███████ salmon #FA8072
    sandybrown ███████ sandybrown #F4A460
    seagreen ███████ seagreen #2E8B57
    seashell ███████ seashell #FFF5EE
    sienna ███████ sienna #A0522D
    silver ███████ silver #C0C0C0
    skyblue ███████ skyblue #87CEEB
    slateblue ███████ slateblue #6A5ACD
    slategray ███████ slategray #708090
    snow ███████ snow #FFFAFA
    springgreen ███████ springgreen #00FF7F
    steelblue ███████ steelblue #4682B4
    tan ███████ tan #D2B48C
    teal ███████ teal #008080
    thistle ███████ thistle #D8BFD8
    tomato ███████ tomato #FF6347
    turquoise ███████ turquoise #40E0D0
    violet ███████ violet #EE82EE
    wheat ███████ wheat #F5DEB3
    white ███████ white #FFFFFF
    whitesmoke ███████ whitesmoke #F5F5F5
    yellow ███████ yellow #FFFF00
    yellowgreen ███████ yellowgreen #9ACD32

    4 commentaires
  • Clique sur ce texte pour faire apparraitre une fenêtre!

    Ce tuto explique comment modifier les fenêtres d'eklablog, normalement, c'est un code long, mais j'ai fait en sorte d'avoir un bon rendu avec un seul code! Bien sur, les connaisseurs modifieront surement ce code pour plus le personnaliser. Bien, d'abord, choisissez l'image de fond que vous souhaitez, quand vous l'avez trouvez, mettez ce code dans votre css: (il faut juste remplacer URL DE VOTRE IMAGE!!!)

    .window {background: url("URL DE VOTRE IMAGE"); border-radius: 15px; text-align: center;}
    .window_content {background: url("http://ekladata.com/FlKvhKN_kL3apeJD9krRywrcu4k/background2.png"); border-radius: 15px;}
    .window_handle_content {background: none;}
    .window_handle_left{ background: none;}
    .window_handle_right{ background:none;}
    .window_content_wrapper1{ background: none;}
    .window_content_wrapper2{ background: none;}
    .window_bottom{ background: none;}
    .window_bottom_wrapper1{ background: none;}
    .window_bottom_wrapper2{ background: none;}
    .window_tabs{ background: none;}

    Remarque: pour trouver l'url de votre image, faites un click-droit dessus puis cliquez sur "Copier l'url de l'image"

    Si vous voulez changer l'aspect du titre des fenêtre, utiliser ce code:

    .window_title {
    propriété: valeur
    }

    Pour ce qui ont besoins d'un exemple, on peut faire un truc dans ce genre:

    .window_title {
    font-family: Arial Narrow;
    font-size: 25px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 5px green;
    }

    Et on peut le modifier comme ça à l'infinie, pour plus le personnaliser!


    34 commentaires
  • Ce tuto explique comment faire tomber des images du ciel! Par exemple, sur ce blog, vous rester quelques secondes en haut de la page, et des feuilles vont tomber: http://animal-crossing-par-chouquette5.eklablog.com

    Pour que ce code marche, il faut remplacer URL DE VOTRE IMAGE par l'url de votre image, logique, non? Rappel: Pour trouver l'url de votre image, faites un clic-droit dessus et cliquer sur "Copier l'url de l'image"

    <marquee style="position: absolute; left: 81%; top: 52px; width: 30; height: 644px;" direction="down" scrollamount="5"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 76%; top: 34px; width: 30; height: 626px;" direction="down" scrollamount="1"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 88%; top: 32px; width: 30; height: 538px;" direction="down" scrollamount="5"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 11%; top: 172px; width: 30; height: 529px;" direction="down" scrollamount="1"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 30%; top: 95px; width: 30; height: 588px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 40%; top: 69px; width: 30; height: 576px;" direction="down" scrollamount="4"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 82%; top: 171px; width: 30; height: 512px;" direction="down" scrollamount="1"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 87%; top: 8px; width: 30; height: 538px;" direction="down" scrollamount="1"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 39%; top: 98px; width: 30; height: 555px;" direction="down" scrollamount="3"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 81%; top: 26px; width: 30; height: 674px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 75%; top: 53px; width: 30; height: 505px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 20%; top: 159px; width: 30; height: 522px;" direction="down" scrollamount="6"></marquee></p><p><marquee style="position: absolute; left: 20%; top: 159px; width: 30; height: 522px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 74%; top: 186px; width: 30; height: 687px;" direction="down" scrollamount="1"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 46%; top: 5px; width: 30; height: 506px;" direction="down" scrollamount="4"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 81%; top: 22px; width: 30; height: 510px;" direction="down" scrollamount="2"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 60%; top: 59px; width: 30; height: 681px;" direction="down" scrollamount="4"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 63%; top: 172px; width: 30; height: 535px;" direction="down" scrollamount="5"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 56%; top: 149px; width: 30; height: 545px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 16%; top: 157px; width: 30; height: 609px;" direction="down" scrollamount="2"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee> <marquee style="position: absolute; left: 89%; top: 162px; width: 30; height: 533px;" direction="down" scrollamount="6"><img src="URL DE VOTRE IMAGE" border="0" alt=""></marquee>

    33 commentaires
  • Merci à Nagalia pour ce code, elle n'en a pas fait un tuto, mais on va dire que j'ai fouillé un petit peu le code source! :p

     

    Menu déroulant

    Pour commencer, faites deux images (largeur = 120px, hauteur = 50px), une au survol et une autre quand ce n'est pas au survol, par exemple, je vous montre mes images (il est strictement interdit de prendre mes images, je vous demande donc de faire vous même vos propres image PS: j'ai fait mes image sur photofiltre, avec la fonction dégradé): image non-survolé, image survolé.

    Hébergez ensuite vos deux images via eklablog avec le système de gestion des fichiers (contenu>gestion des fichiers), puis entrez ce code css dans votre éditeur de code css (apparence>modifier le thème>ajouter du css):

    #menu { position: fixed;
    top: 5px;
    height: 50px;
    left: 50%;
    }
    #menu a:hover {height: 40px;
    padding-top: 30px;
    background-image: url(" URL DE L'IMAGE SURVOLÉ");
    background-repeat: no-repeat;
    color: COULEUR DU TEXTE AU SURVOL;
    }
    #menu a{ background-image: url("URL DE l'IMAGE NON-SURVOLÉ");
    background-position: 100%;
    background-repeat: no-repeat
    width: LARGEUR DE L'IMAGEpx;
    font-size: TAILLE DE LA POLICEpx;
    font-family: NOM DE LA POLICE;
    text-align: center;
    font-weight: bold;
    height: 30px;
    text-decoration: none;
    letter-spacing: 1px;
    padding-top: 15px;
    transition: height 500ms, padding-top 500ms ;
    -moz-transition: height 500ms, padding-top 500ms;
    -webkit-transition: height 500ms, padding-top 500ms;
    }

    Pour ce qui ont besoins d'un exemple, voici mon code:

    #menu { position: fixed;
    top: 5px;
    height: 50px;
    left: 50%;
    margin-left: -335px;
    }
    #menu a:hover {height: 40px;
    padding-top: 30px;
    background-image: url("http://ekladata.com/graph-css-html.eklablog.fr/perso/img%20hover.png");
    background-repeat: no-repeat;
    color: #1e5a65;
    }
    #menu a{ background-image: url("http://ekladata.com/graph-css-html.eklablog.fr/perso/img%20not%20hover.png");
    background-position: 100%;
    background-repeat: no-repeat;
    width: 117px;
    font-size: 15px;
    font-family: Agency FB;
    text-align: center;
    font-weight: bold;
    height: 30px;
    text-decoration: none;
    letter-spacing: 1px;
    padding-top: 15px;
    transition: height 500ms, padding-top 500ms;
    -moz-transition: height 500ms, padding-top 500ms;
    -webkit-transition: height 500ms, padding-top 500ms;
    }

    Maintenant, il vous faut connaitre le code pour les menus! alors c'est simple, vous aller dans un module style les statistiques, vous cliquez sur HTML et vous rajouter ceci après tout le reste:

    <ul id="menu">
    <li><a href="LIEN DU MENU">TITRE</a></li>
    </ul>

    Maintenant, vous aller vous dire que vous n'en avez qu'un, mais que vous en voulez plus, c'est simple, retourner dans le module où vous avez entré le code précédent et rajouter ceci (rajouter le bien avant, c'est très important!):

    <li><a href="LIEN DU MENU">TITRE</a></li>

    27 commentaires