• Onglets coulissant

    Par Nagalia le 14 Février 2012 à 15:48

    Et revoici le tuto pour faire des onglets coulissants (comme sur le côté gauche du blog) en plus développé, mais plus simple à coder ;)

    /!\ Compatible seulement avec les dernière version de Chrome, Safari et Firefox. Ne fonctionne pas avec IE. Autre navigateur non testé.

    Commençons par le css:

    .coulissant {
    z-index: 99;
    position: fixed;      
    height: Xpx;         
    width: Xpx;          
    left: -Xpx;              
    top: Xpx;              
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .coulissant:hover{
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
    }

    Explications:
    Modifiez les Xpx
    Pour height, par la hauteur de vos onglets
    Pour width, par la largeur de vos onglets

    Top indique à combien de px du haut de la page sont placé les onglets
    Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px. 

    Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px.

    Si vous voulez les onglets à droite, remplacez "left" par "right"
    Si vous voulez les onglet en haut  gauche, inversez "top" et "left"
    Si vous voulez les onglets en haut à droite, remplacez "top" par "right" et "left" par "top"


    Voici le css de base. Rajoutez des bordures, de la couleur ou autre pour faire quelque chose de joli ;) 

    Passons au HTML. Mettezr le code suivant dans un module simple de votre blog

     <div class="coulissant">DU TEXTE; DES IMAGES...</div>
     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div> 

    Structure de base pour 4 onglets. Pour éviter qu'ils ne se chevauchent, il faut rajouter "stlyle="top: Xpx"" à partir du deuxièmes: Remplacez Xpx par la hauteur de l'onglet (+les marges). Pour le troisième, remplacez Xpx par la hauteur de 2 onglets (+les marges) etc...

    Pour les connaisseur, je pense que je n'ai pas besoin d'en dire plus, vous aller me personnaliser tou ça ;)
    Pour ceux qui ne comprenne pas grand chose, je vous propose un exemple de personnalisation. Après, vous faie comme vous voulez ;)
    => Apperçu 

    CSS

    .coulissant { z-index: 99;
    position: fixed;
    height: 80px;
    width: 150px;
    left: -130px;
    top: 40px;
    background: #B7E5C7;
    border: 2px solid #50B27C;
    box-shadow: 0 0 10px #50B27C, inset 0 0 5px #50B27C;
    border-radius: 0 10px 10px 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    }
    .coulissant:hover{ left: -2px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    }
    .coulissant img {max-height: 70px;
    padding-top: 5px;
    margin-right: 5px;
    }
    .bout { -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    float:right;
    margin-right: -10px;
    height: 80px;
    line-height:80px;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #D1FFE9
    }

    HTML

    <div class="coulissant">
    <img style="float: left;" src="http://data0.ek.la/test-blog/mod_articles646820_1.jpg?2008" />
    <div class="bout">Accueil</div>
    Bienvenu sur mon blog!
    </div>

    <div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="#">Clique ICI</a>
    </div> 

    Voilà sur deux onglets quelques exemple de ce que vous pouvez faire =)

    Tuto d'Eklatuce plus simple pour faire un lien sur les image =) 


    310 commentaires

  • Contenu hors des articles

    Par Nagalia le 18 Janvier 2012 à 18:00
    Sur EklaBlog, nous n'avons pas accès au code source de la page, il est donc un petit peu compliqué d'ajouter des éléments dans le header ou en dehors de la page par exemple. Voici donc une petite astuce pour remédier à ce problème.
     

    Créer votre nouvel élément dans un module simple en HTML. En le plaçant dans un module simple, il sera visible sur toutes les pages. Mais vous pouvez également le mettre dans un article, auquel cas il ne sera visible que sur la page de l'article en question.

    <div id="element">DU TEXTE, DES IMAGES...</div>

    Ensuite, dans votre CSS, vous devez placer votre élément en "position : absolute;" pour le rendre indépendant de votre module. Positionnez le ensuite grâce à "top : Xpx;" et "left: Xpx", respectivement sa position par rapport au haut et à la gauche de la fenêtre.

    #element {position: absolute;
              top: Xpx;
              left: Xpx;
              propriété : valeur;
    }

     


    97 commentaires

  • Couleur

    Par Nagalia le 26 Décembre 2011 à 18:02

    Il existe trois moyens différents de noter les couleurs pour les navigateurs les reconnaissent : avec leur nom (anglais), un code hexadécimal ou en RGB

    Couleur nommées

    Il s'agit d'utiliser le nom de la couleur dans le code. Voici un petit aperçu des couleurs pouvant être utilisé de cette façon.

    Red

    Blue

    Yellow

    Green

    Maroon

    Lime

    Gray

    Fuchsia

    Purple

    Silver

    Teal

    White

    Aqua

    Olive

    Navy

    Black

    Il en existe d'autre, mais je vous laisserais le soin de les chercher sur internet.

    C'est la méthode la plus simple pour utiliser rapidement un couleur.

    CSS

    sélecteur {   color: red;}

    HTML

    <balise color="red" />

    Code Héxadécimal

    Permettant de faire plus de 16 millions de couleurs, cette façon d'écrire les couleurs est beaucoup plus complète que la précédente.
    On utilise la notation suivante :

    #RRVVBB

    On utilise ensuite des chiffres de 1 à 9 et des lettres de A à F que l'on associe par paire pour indiquer les intensités de rouge, de vert et de bleu de la couleur voulue. Les deux premier correspondent au rouge, ceux du milieu au vert et les derniers au bleu. Le F est la teinte la plus intense, et le 0 la plus sombre. Ce type de code est toujours précédé du symbole #

    Ainsi, si je veux du rouge,j'obtiens le code suivant:

    CSS

    sélecteur {   color: #ff0000;}

    HTML

    <balise color="#ff0000" />

    Couleur RGB

    Ce type d'écriture fonctionne de la même manière qe les couleurs héxa: il faut définir 3 valeurs, une pour le rouge, le vert et le bleu.

    rgb(R,V,B)

    Gardons la couleur rouge. J'obtient le code suivant :

    CSS

    sélecteur {   color: rgb(255,0,0);}

    HTML

    <balise color="rgb(255,0,0)" />

    255 est la valeur maximum que peut prendre cette couleur. Si ce nombre ne vous parle pas, vous pouvez utiliser la même notation avec des pourcentages

    CSS

    sélecteur {   color: rgb(100%,0,0);}

    HTML

    <balise color="rgb(100%,0,0)" />

    Canal Alpha

    Il est également possible de créer des couleurs transparentes en rajoutant un canal dans la notation rgb : le canal alpha. Il permet de gérer l'opacité de la couleur entre 0 (invisible) et 1 (visible)

    Dans l'exemple suivant, j'ai un rouge à 50% d'opacité.

    CSS

    sélecteur {   color: rgba(255,0,0,0.5);}

    HTML

    <balise color="rgba(255,0,0,0.5)" />

     

    12 commentaires

  • Encadré simple

    Par Nagalia le 25 Décembre 2011 à 00:00

    Voici un encadré sympa et simplissime à réaliser

    Un titreEt du blablablbalbla.... Ou bien des images, ou autre ;)
    On peu mettre un paquet de chose la dedans... Et avouez que ça rend bien ^^ 


    Sans plus attendre, voici le code:

    <fieldset style="width: Xpx;"><legend>TITRE</legend>CONTENU</fieldset>

    fieldset, c'est l'encadré. Si vous voulez changer sa largeur, modifiez le Xpx
    legend, c'est ce qui permet de faire une coupure dans l'encadré pour mettre un titre


    39 commentaires

  • Spoiler

    Par Nagalia le 5 Novembre 2011 à 12:01
     

    /!\ Le javascript doit être activé pour pouvoir faire ça!

    Un spoiler, qu'est ce que c'est? Cliquez sur le bouton en dessous:

    Cliquez sur le bouton =>

    Et magique!! Du texte apparaît!!! Bon, on peu mettre ce qu'on veut dedans (image, tableau....)

    Voilààà. Pratique non ? Bon bref, voilà le code:

    <div style="margin: 20px; margin-top: 5px;">
    <div class="quotetitle">
    <strong>TEXTE AVANT LE BOUTON</strong>
    <input style="height: HAUTEUR DU BOUTON; width: LARGEUR DU BOUTONpx; font-size: TAILLE DE LA POLICE DU BOUTONpx; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" type="button" value="TEXTE DU BOUTON" /></div>
    <div class="quotecontent">
    <div style="display: none;">
    <p>TEXTE SPOILER</p>
    </div>
    </div>
    </div>

    Il faut remplacer les textes en majuscule par vos propre valeur.

    Vous pouvez également modifier son apparence en CSS avec les deux classes suivantes :

    .quotetitle {propriété: valeur;}

    Cette classe est pour le texte visible lorsque le spoiler est caché et le bouton (le bouton est a personnaliser avec "input" en css)

    .quotecontent {propriété: valeur}

    Voici la classe de votre texte caché.  

    Avec ça, vous avez un spoiler entièrement personnalisable ;)


    74 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique