• Je suis censée être en train d'étudier mais je n'y arrive pas alors autant écrire un article !

    Lire la suite...


    1 commentaire
  • Code à mettre dans la partie CSS.

    Ce code permet de changer l'opacité d'un ou plusieurs bords.

    Div sera à remplacer par votre sélecteur.

    Le X indique la taille de vos bordures.

    Les couleurs se font ici grâce au code RGBA que vous pouvez trouver facilement sur Internet. Les 3 premiers chiffres (en rouge) servent pour la couleur. Ils vont de 0 à 255. Le quatrième chiffre (en violet) permet d'indiquer l'opacité allant de 0.0 à 1.

    "border-top" concerne la bordure du haut, "border-right" pour la bordure droite, "border-bottom" pour la bordure du bas et enfin, "border-left" pour la bordure à gauche.

    div {
        border-top: Xpx solid rgba(255, 0, 0, .5);
        border-right: Xpx solid rgba(25500.5);
        border-bottom: Xpx solid rgba(25500.5);
        border-left: Xpx solid rgba(25500.5);
        -webkit-background-clip: padding-box; /* SAFARI */
        background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
    }

    Ce qui nous donne un code de ce style :

    #menu1 {
        border-top: 10px solid rgba(255, 255, 255, .5);
        border-right: 10px solid rgba(255, 255, 255, .5);
        border-bottom: 10px solid rgba(255, 255, 255, .5);
        border-left: 10px solid rgba(255, 255, 255, .5);
        -webkit-background-clip: padding-box; /* SAFARI */
        background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
    }

     

    Mettre de l'opacité aux bordures


    votre commentaire
  • Code à mettre dans la partie CSS.

    /!\ Ce code ne fonctionne pas sur internet explorer.

    Ce code permet de créer un dégradé sur vos objets sans passer par un logiciel.

    Div sera à remplacer par votre sélecteur.

    COLOR1 doit être remplacé par votre premier code couleur et COLOR2 doit être remplacé par votre deuxième code couleur.

    "Left" signifie que le dégradé va commencer par la gauche pour finir par la droite. Vous pouvez remplacer par "right" pour un dégradé allant de la droite vers la gauche, par "top" pour un dégradé allant de bas en haut et "bottom" pour un dégradé allant du haut vers le bas.

    div {
        background-image: -webkit-linear-gradient(left, COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-linear-gradient(leftCOLOR1COLOR2); /* CHROME */
        background-image: -o-linear-gradient(leftCOLOR1COLOR2); /* OPERA */
    }

     Exemple avec top :

    Appliquer un dégradé aux objets

    Si vous préférez commencer le dégradé par un certain angle, alors il faudra appliquer ce code à la place :

    Le X indique le degré du début du dégradé que vous voulez. Il va de 0 à 50.

    div {
        background-image: -webkit-linear-gradient(Xdeg, COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-linear-gradient(Xdeg, COLOR1COLOR2); /* CHROME */
        background-image: -o-linear-gradient(Xdeg, COLOR1COLOR2); /* OPERA */
    }

    Exemple à 30deg :

    Appliquer un dégradé aux objets

    Aussi, si vous souhaitez avoir un dégradé centré plutôt que linéaire, il faudra remplacer "lineart" par "radial" et effacez la partie qui donne la direction ou le degré. Comme ceci :

    Si jamais vous souhaitez l'inverse de vos couleurs, il suffit d'inverser votre couleur 1 et votre couleur 2.

    div {
        background-image: -webkit-radial-gradient(COLOR1, COLOR2); /* FIREFOX */
        background-image: -moz-radial-gradient(COLOR1COLOR2); /* CHROME */
        background-image: -o-radial-gradient(COLOR1COLOR2); /* OPERA */
    }

    Exemple :

    Appliquer un dégradé aux objets


    votre commentaire
  • Je me suis dit que les extensions que j'utilise pouvait peut être vous servir. (Evidemment ces extensions ne posent pas de problème avec Eklablog).

    Lire la suite...


    7 commentaires
  •  

    Lire la suite...


    2 commentaires