Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 07 CSS3 Avancé

    Transféré par

    ghaithsoui05
    18 vues2 pages

    Titre original

    TP-07-CSS3-avancé

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    18 vues2 pages

    TP 07 CSS3 Avancé

    Transféré par

    ghaithsoui05

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    ISET Sfax Semestre1- AU : 2023/2024

    Matière : Ateliers Web1

    Groupes : INFO 15
    TP 07 : CSS3 avancé (1.5 h)

    Exercice1 :
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link rel="stylesheet" href="anim.css"/>
    </head>
    <body>
    <div>
    <p id="premier">C'est un premier paragraphe</p>
    <p id="deuxieme">C'est un deuxième paragraphe</p>
    </div>
    </body>
    </html>

    Les styles appliqués à la page animation.html sont écrits dans le fichier


    anim.css et sont décrits dans le tableau suivant :

    Balise Style
    div Couleur de fond écran : greenyellow
    Largeur :400px
    Hauteur :500 px

    #premier Couleur de fond écran : orange


    Largeur :200px
    Hauteur :200 px
    #deuxieme Couleur de fond écran :orchid
    Largeur :250px
    Hauteur :250 px
    Position :absolue
    Animation : de nom mymove qui dure
    10s en mouvement infini

    animation Début : du haut 10px


    Taille de police :3em
    Coleur de fond : rouge
    Fin : du haut 200px
    Taille de police :1.5em
    Coleur de fond : jaune
    Exercice2 :
    Soit le fichier diaporama.html suivant :
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="transition.css"
    </head>

    <body>
    <div id="diaporama">
    <ul class="galerie">
    <li><a href="#"><img src="css.png" /></a></li>
    <li><a href="#"><img src="css.png" /></a></li>
    <li><a href="#"><img src="css.png" /></a></li>
    <li><a href="#"><img src="css.png" /></a></li>
    <li><a href="#"><img src="css.png" /></a></li>
    <li><a href="#"><img src="css.png" /></a></li>
    </ul>
    </div>
    </body>
    </html>

    Définir l’attribut diaporama et au survol de chaque miniature, effectuer une


    transition vers une rotation et une nouvelle échelle.

    Balise Style
    #diaporama Position flotante : gauche
    Espacement :20px

    Les <li> dans .galerie Position flotante : gauche


    Espacement :10px
    Marge :10px
    Bordure: solid 1px de couleur #ddd
    Pas de style de liste
    Lors de survol du lien de l’image ombre :4px 4px 10px de couleur
    rgba(25,25,25,0.5)
    Transformation :
     grossissement de la taille de
    l’image de 1.5 fois
     Rotation de -10 deg
     Une translation dans l’axe des
    Y :50px

    Les <img> de <a> dans .galerie Position flotante : gauche


    Largeur :70px
    Une transition de la transformation qui
    dure 1s en vitesse lente du début au
    fin

    Vous aimerez peut-être aussi