• Transformer des éléments

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Voici une propriété code CSS 3 qui peut renvoyer le javascript aux oubliettes. L'inconvénient? Et bien... c'est du code CSS 3 donc compatible seulement avec les versions les plus récentes des navigateurs.

    Transform? C'est quoi?

    Une propriété qui permet d'appliquer quatre effet assez sympa :

     

    rotation

    sélecteur {-webkit-transform: rotate(Xdeg);
    -moz-transform: rotate(Xdeg);
    -o-transform: rotate(Xdeg);
    transform: rotate(Xdeg);}

    On parle en degré. Logique non? Remplacez Xdeg par un nombre de degré (positif ou négatif) :

     

    redimensionner
    sélecteur {-webkit-transform: scale(X);
    -moz-transform: scale(X);
    -o-transform: scale(X);
    transform: scale(X); }

    Remplacez X par un chiffre entier ou décimal (/!\ mettre un point, pas une virgule => 1.3 et non 1,3)
    1= aucun changement
    0= invisible
    2=deux fois plus grand

    En claire, c'est le coeficient de dilatation
    Vous pouvez aussi faire:

    sélecteur {-webkit-transform: scale(X, Y);
    -moz-transform: scale(X, Y);
    -o-transform: scale(X, Y);
    transform: scale(X, Y); }

    X étant la largeur et Y la hauteur 

     

    Incliner
    sélecteur{ -webkit-transform: skewXdeg);
    -moz-transform: skew(Xdeg);
    -o-transform: skew(Xdeg);
    transform: skew(Xdeg);}

    On parle encore en degré ;)
    X incline horizontalement et Y verticalement 

     

    Déplacer

    sélecteur{ -webkit-transform: translate(Xpx, Ypx);
    -moz-transform: translate(Xpx, Ypx);
    -o-transform: translate(Xpx, Ypx);
    transform: translate(Xpx, Ypx); }

    Enfin, le déplacement. On déplace horizontalement de Xpx et verticalement de Ypx.

     

    Dans ces exemple, je n'ai utiliser la propriété que sur l'état survolé (:hover) mais vous pouvez très bien l'utiliser comme état permanant.

    votre commentaire

  • Fenêtre d'information

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Cliquez LA pour faire apparaître une fenêtre d'informations.

    Comme vous le voyez, il est possible de les personnaliser entièrement.

    Superposez cette fenêtre d'information à une vraie fe,être d'informations et vous remarquez qu'on peut la décomposer en 9 parties : c'est un genre tableau.

    Vous avez en vert les bordures, en rouge les coins et en bleu le fond. Voici le code CSS :

    .window_handle_content {background: valeur;}
    .window_handle_left{  background: valeur;}
    .window_handle_right{ background:valeur;}
    .window_content{ background:valeur;}
    .window_content_wrapper1{ background: valeur;} 
    .window_content_wrapper2{ background:valeur;} 
    .window_bottom_wrapper1{ background:valeur;} 
    .window_bottom_wrapper2{ background:valeur;} 
    .window_bottom{ background:valeur;}

    Expliquons dans l'ordre :

    .window_handle = Fond du titre. L'image se répète horizontalement
    .window_handle_left et .window_handle_left sont respectivement les coins gauche et droit du titre
    .window_content = le contenu
    .window_content_wrapper1 et .window_content_wrapperé sont respectivement les marges gauche et droite
    .window_bottom_wrapper1 et .window_bottom_wrapper2 sont respectivement les coins gauche et droit du bas
    .window_bottom est le bas

          

            

          


    Si vous êtes courageux, vous n'avez plus qu'à faire 9 images (images par défaut ci-dessus).

    J'avoue, c'est long... Heureusement, il y a une autre possibilité qui va faire des heureux :

    .window{ propiété: valeur}

    Un seul code CSS (voire deux si vous voulez une image différente pour le titre) et vous pouvez modifier la fenêtre.
    Si vous voulez faire comme ça, copier tout le premier code (avec les 9 parties) dans votre code CSS et mettez "background: none" pour supprimer les images par défaut. 

    Voilà pour l'aspect général. Vous pouvez également modifier la police du titre grâce à ce code CSS :

    .window_title{ propriété: valeur;}

    Dans les fenêtres d'édition des articles, il y a un fond gris derrière les onglets

    Voilà le code CSSpour pouvoir les enlever :

    .window_tabs{ propriété: valeur}


    Et pour modifier les onglets article, chapô, option...


    Pour changer la couleur du bouton selectionné :


    .window_tabs span.window_tab_active {background-color: valeur;}

    et pour changer la couleur des 2 boutons non-selectionné:

    .window_tabs span {background-color: valeur;} 

    Boutons et champs de textes :

    .button_win,
    .window input[type=button],
    .window input[type=submit],
    .window button{ 
                       background: url("IMAGE") repeat-x;}
     
    .button_win:hover,
    .window input[type=button]:hover,
    .window input[type=submit]:hover,
    .window button:hover{ 
                       background: url("IMAGE") repeat-x;}

    Le rouge, est l'état survolé.

    Un peu moins utile pour les visiteurs : Modifier la couleur du menu dans "modifier le thème" comme sur le code CSS qui se trouvent ci-dessous :

    .window_blog_themeperso_block_menu {background-color: valeur;}


    Et pour avoir la couleur au survol:
     

    .window_blog_themeperso_block_menu a:hover {background-color: valeur;}

    votre commentaire

  • Menubar, les onglets

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Voici le code

    .menubar_section li { propriété: valeur; }
    .menubar_section li:last-child {
               propriété: valeur; }


    Si vous voulez mettre des images et que vous ne voulez pas modifier les tailles, faites le sur ce model là:



     


    Pour ceux qui veulent mettre des couleurs voici le code CSS :

    .menubar_section li { propriété: valeur; }
    .menubar_section li:hover { propriété: valeur; }
    .menubar_section li:last-child {propriété: valeur; }
    .menubar_section li:last-child:hover {propriété: valeur; }

    La ligne en rouge est ce qui sera affiché au survol

    Changer le fond de "contenue", "apparence"... 

     .menubar_section:hover div{
                       background: valeur;}

    Mettez "background: none" pour qu'il n'y ai ni image ni couleur.

    Menubar : Notifications

    #menubar_notifications:hover
    #menubar_notifications_btn{
                       background: valeur;}

    votre commentaire

  • Menubar : Notifications

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Mettez le code CSS suivant :

    #notifications_panel a,
    #notifications_panel div{ background:url("Adresse de l'image")no-repeat}

    Voilà maintenant voici quelques explications.

    Vous devez remplacer Adresse de l'image par une des créations suivant ce modèle :

    Menu Notifications

    Explications :

    Le premier rectangle blanc signifie les notifications auquel vous voyez habituellement. Le rectangle bleu clair signifie le moment où on a une nouvelle notifications. Le premier rectangle bleu foncé signifie n'importe qu'elle survol. Le deuxième rectangle blanc signifie le 'afficher les notifications' en mode normal et le deuxième rectangle bleu foncé signifie 'afficher les notifications" au survol.


    votre commentaire

  • Barre Eklablog

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Voici le sélécteur à utiliser pour modifier le fond, le type de police ou autre :

    #menubar {propriété: valeur;}

    Quelques exemple :

    Changer l'image :

    #menubar {background-image: url("Adresse de l'image");}

    Remplacez IMAGE par l'url de votre image, mais laisser les guillemets!

    Changer la couleur d'écriture (merci Jak-Ich_an)

    #menubar {color: #Couleur;}


    Si vous changer l'image, vous remarquez les traits de séparation qui ne font bien très beau. Si vous souhaitez les enlever, rajouter ce code:

    #menubar_section_content{
    background-image: none;
    }
    #menubar_section_appearance{
    background-image: none;
    }
    #menubar_section_interactions{
    background-image: none;
    }
    #menubar_section_manage{
    background-image: none;
    }
    #menubar_section_account{
    background-image: none;
    }
    #menubar_notifications{
    background-image: none;
    }
    #menubar_signin {
    background-image: none;
    }
    .menubar_button {
    background-image: none;
    } 


    Si vous remplacez le "none" par "url("Adresse de l'image")" vous mettez une image de fond

    Il reste la flèche à gauche. Si vous voulez la changer, a vos logiciel de graph et faite quelque chose comme ça:

    Il y avait quatre flèche comme ça dans l'image par défaut, alors je suis rester sur la même base.
    Et mettez ce code dans votre css

    #menubar_hide{ background-image: url("Lien de l'image");}

    Pour la flèche qui remet la barre, c'est ça:

    #menubar_show { background-image: url("Adresse de l'image");}



    Modifier les images au survole
    => Menubar, modifier les images au survole


    votre commentaire