• Couleur du texte

    Par Nagalia dans Propriétés le 30 Octobre 2011 à 21:06

    Le propriété color concerne uniquement la couleur du texte et s'écrit de la façon suivante :

    sélecteur {
       color: #COLOR;
    }

    Voyons maintant quelques exemple concrets :

    p {
       color: red;
    }
    p a {
       color: green;
    }

    Tout le texte à l'intérieur de mon paragraphe est rouge, et les liens sont verts

    Vous pouvez utiliser les couleurs nommées, les code hexa, le rgb, ainsi que le rgba pour avoir du texte transparent

    p {
       color: rgba(255,0,0,0.5);
    }

    Le texte de mon paragraphe est rouge avec une transparence de 50%

    Référez-vous à cet article si vous voulez en savoir plus sur l'utilisation des couleurs

    Retour aux Propriétés

    8 commentaires

  • Pseudo-element

    Par Nagalia dans Cours le 30 Octobre 2011 à 18:40

    Les pseudo-element, qu'est-ce que c'est? Ce sont d'autres élément css qui vont permettre d'affiner le style de certaines classe

    Pseudo-element dynamique:

    hover => lors du survole

    sélecteur:hover {propriété: valeur}


    active => Lors du clique

    sélecteur:active {propriété: valeur}


    focus => Séléctionné avec le clic ou par tabulation

    sélecteur:focus {propriété: valeur}



    Pseudo-element de liens
    Ne peuvent s'utiliser qu'avec des liens

    link => Lien n'ayant pas encore été visité

    sélecteur a:link {propriété: valeur}


    visited => Lien ayant été visité

    sélecteur a:visited {propriété: valeur}



    Pseudo-element de texte
    Ne peut s'utiliser qu'avec du texte

    first-line => Applique un style spécial à la première ligne du texte

    sélecteur p:first-line {propriété_de_texte: valeur}


    first-letter => Applique un style spécial a la première lettre du texte

    sélecteur p:first-letter {propriété_de_texte: valeur}

    Introduction au CSS

    26 commentaires

  • Transition

    Par Nagalia dans Propriétés le 30 Octobre 2011 à 16:28
    /!\ Ne fonctionne qu'avec les dernière version de Google Chrome, Mozilla Firefox et Safari (autre navigateur non testé) et ne marche absolument pas avec Internet Explorer

    /!\ Ce code n'est pas à la porté des débutant en css. Il faut savoir maitriser les pseudo-classe.


    A savoir également que le CSS3 n'étant pas encore correctement implémenter (même dans les dernières versions des navigateur), il faut rajouter un petit truc devant la propriété en question :

    "-webkit" fonctionne pour google chrome et safari
    "-moz" fonctionne pour mozilla
    La dernière ligne est en prévision de quand tout les navigateur reconnaîtrons ce code (c'est pas demain la veille, mais bon)

    sélecteur { propriété: valeur;
                       -webkit-transition-propriety: propriété;
                       -moz-transition-propriety: propriété;
                       transition-propriety: propriété}

    Le "transition-propriety" indique a quelles propriétés on va appliquer l'effet entre l'état normal et celui survolé/cliqué.

    • si vous voulez que toutes les propriété soient animé, mettez "all" comme valeur 
    • si vous voulez que seules quelques propriété soient animé, mettez ne nom des propriété séparé par des virgule 
    • si vous ne voulez pas d'animation, mettez "none" comme valeur
    sélecteur { propriété: valeur;
                       -webkit-transition-duration: Xs;
                       -moz-transition-duration: Xs;
                       transition-duration: Xs;} 

    "transition-duration" indique le temps que durera la transition. Vous pouvez donner comme uniqter la seconde (ex: 2s) ou la milliseconde (ex: 30ms).
    Si vous avez préciser plusieurs propriété pour la transition, vous pouvez mettre différente durées, séparé par des virgule.

    sélecteur { propriété: valeur;
                       -webkit-transition-timing-function: valeur;
                       -moz-transition-timing-function: valeur;
                       transition-timing-function: valeur;}

    Le "transition-timing-function" Précise la fonction de transition à utiliser (accélération...) Désolé pour les allergique aux math, mais on va parler fonction X)
    Vous pouvez mettre comme valeur un des mot suivant:

    • ease : Rapide sur le début et ralenti sur la fin. 
    • linear : La vitesse est constante sur toute la durée de l'animation. 
    • ease-in : Lent sur le début et accélère de plus en plus vers la fin. 
    • ease-out : Rapide sur le début et décèlere sur la fin. 
    • ease-in-out : Le départ et la fin sont lents. 

    Pour que ça soit plus simple a comprendre, voici les courbes (emprunté à Alsacréation)

    sélecteur { propriété: valeur;
                       -webkit-transition-delay: Xs;
                       -moz-transition-delay: Xs;
                       transition-delay: Xs;} 

    Le "transition-delay" détermine le départ de la transition. La transition commence par défaut quand l'élément est déclenché (survol, clique...) mais on peu la retarder.

    Pour éviter d'encombrer votre page css, on peu raccourcir les code, en notant simplement la propriété "transition"

    sélecteur { propriété: valeur;
                       -webkit-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       -moz-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";} 

    Remplacer les propriété "transition-property", "transition-duration"... par leur valeur.


    74 commentaires

  • Fonds qui se répète

    Par Nagalia dans Fond le 28 Octobre 2011 à 09:53
    Fond qui se répète

    Fonds qui se répète  Fonds qui se répète  Fonds qui se répète  Fonds qui se répète  Fonds qui se répète

    22 commentaires

  • Horloge

    Par Nagalia dans Flash le 27 Octobre 2011 à 13:56

    <object width="180" height="180" data="http://ekladata.com/At2USffGwBrX3sMiJwIDwWhhLmI/etoile.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://ekladata.com/At2USffGwBrX3sMiJwIDwWhhLmI/etoile.swf" /></object>

     

    <object width="200" height="200" data="http://ekladata.com/PCOGsrsHchnHfnL3jf2AmmK8XV4/halloween.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://ekladata.com/PCOGsrsHchnHfnL3jf2AmmK8XV4/halloween.swf" /></object>

     

    <object width="180" height="180" data="http://ekladata.com/6l6oZ71-8n9Kjwe_hke4lihArgQ/fma1.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://ekladata.com/6l6oZ71-8n9Kjwe_hke4lihArgQ/fma1.swf" /></object>

     

    <object width="180" height="180" data="http://ekladata.com/8L-XXTtKO2hVzqy9coK5ScaAkfE/fma2.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://ekladata.com/8L-XXTtKO2hVzqy9coK5ScaAkfE/fma2.swf" /></object>

     

    <object width="320" height="240" data="http://ekladata.com/on9R5ReeyyEzz9GfCZe9jHqAETg/sans-nom6.swf" type="application/x-shockwave-flash"><param name="src" value="http://ekladata.com/on9R5ReeyyEzz9GfCZe9jHqAETg/sans-nom6.swf" /><param name="wmode" value="transparent" /><param name="base" value="http://world-of-graphe.eklablog.fr/" /></object>

     

    <object width="190" height="200" data="http://ekladata.com/Mj-Z7Yx2zcwfp6Ge-yy7er9uumI/bleu.swf" type="application/x-shockwave-flash"><param name="src" value="http://ekladata.com/Mj-Z7Yx2zcwfp6Ge-yy7er9uumI/bleu.swf" /><param name="wmode" value="transparent" /><param name="base"/></object>

    <object width="400" height="300" data="http://ekladata.com/J2VKqbA1Q4WurOWm8jjrpbdXFCk/sans-nom7.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="src" value="http://ekladata.com/J2VKqbA1Q4WurOWm8jjrpbdXFCk/sans-nom7.swf" /><param name="wmode" value="transparent" /><param name="base" value="http://world-of-graphe.eklablog.fr/" /></object>

    <object width="200" height="200" data="http://ekladata.com/WEbO__5hdfvLUo9ZLJ3ylVZEfRQ.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never"/><param name="wmode" value="Transparent"/></object>

    <object width="180" height="180" data="http://www.imabox.fr/upload_7/11020819001PaH96sa5poIfQT22.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://www.imabox.fr/upload_7/11020819001PaH96sa5poIfQT22.swf" /></object>

    <object width="180" height="180" data="http://www.imabox.fr/u8/11100819266LrWoHyZe0sAQ7s22.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://www.imabox.fr/u8/11100819266LrWoHyZe0sAQ7s22.swf" /></object> 

    <object width="200" height="200" data="http://www.imabox.fr/u8/110608113irWCD3fGvnngR4L11.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://www.imabox.fr/u8/110608113irWCD3fGvnngR4L11.swf" /></object>


    <object width="180" height="180" data="http://www.imabox.fr/upload_7/110508122wOW3mRj8JetOcKW43.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://www.imabox.fr/upload_7/110508122wOW3mRj8JetOcKW43.swf" /></object>


    <object width="200" height="226" data="http://www.imabox.fr/upload_7/1128071536I3NLqZOHntqs2Si56.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="src" value="http://www.imabox.fr/upload_7/1128071536I3NLqZOHntqs2Si56.swf" /></object>

    58 commentaires



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires