Scribd Logo
Upload

Welcome to Scribd!

  • Coinsarrondis

    Uploaded by

    clglonguyon
    9 views5 pages
    The document discusses creating rounded corners for elements in HTML and CSS. It provides two examples of div elements with different border radii, as well as links and a menu with rounded corners. Styles are defined using CSS3 properties like border-radius and behavior to add rounded corners to blocks, text, and navigation elements.

    Original Description:

    Original Title

    coinsarrondis

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses creating rounded corners for elements in HTML and CSS. It provides two examples of div elements with different border radii, as well as links and a menu with rounded corners. Styles are defined using CSS3 properties like border-radius and behavior to add rounded corners to blocks, text, and navigation elements.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views5 pages

    Coinsarrondis

    Uploaded by

    clglonguyon
    The document discusses creating rounded corners for elements in HTML and CSS. It provides two examples of div elements with different border radii, as well as links and a menu with rounded corners. Styles are defined using CSS3 properties like border-radius and behavior to add rounded corners to blocks, text, and navigation elements.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Coins arrondis

    Exemple 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello!</title> <style> .arrondi { background-color: #FF0066; width:250px; height:50px; line-height: 2.5em; text-align: center; border-radius: 25px; } </style> </head> <body> <div class=arrondi> Coin arrondi </div> </body> </html>

    Exemple 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /* Styles globaux */ body { background:#000; font-family:Arial, Helvetica, sans-serif; padding:3em; font-size:110%; } p{ color:#fff; } a{ width:300px; color:#369; background:#ddd; border:2px solid #89a; text-decoration:none; padding:10px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; behavior: url(script/PIE.htc); } a:hover,a:focus { color:#369; background:#fff; } /* Bloc */ .arrondi { width:450px; background:#FFCCFF; margin-bottom:3em; margin-top:3em; padding:0.5em 0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;

    behavior: url(script/PIE.htc); text-align: center } .arrondi1 { width:250px; background:#FF3366; margin-bottom:3em; margin-top:3em; padding:0.5em 0; -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px; behavior: url(script/PIE.htc); text-align: center; } arrondi p { color:#FF6666; margin:1em; } /* Menu */ #menu { list-style:none; padding:0; margin-bottom:3em; margin-top:3em; } #menu li { display:inline; } #menu li a { background:#98B924; color:#fff; border:1px solid #89a; text-decoration:none; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; behavior: url(script/PIE.htc); margin:0; padding:5px 20px; } #menu li a:hover,#menu li a:focus

    { background:#b8da40; color:#000; } </style> <title>Des coins arrondis avec CSS3Pie</title> </head>

    <body>

    <div class="arrondi"> <p>Arrondi Longueur 450px</p> </div>

    <div class="arrondi1"> <p>Arrondi Longueur 250px</p> </div>

    <p><a class="arrondi" href="#">Un lien avec border</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="arrondi1" href="#">Un lien avec border</a></p> <ul id="menu"> <li><a href="*">onglet 1</a></li> <li><a href="*">onglet 2</a></li> <li><a href="*">onglet 3</a></li> <li><a href="*">onglet 4</a></li> <li><a href="*">onglet 5</a></li> </ul> <p><a href="http://www.google.fr">Lien sur Google</a></p> </body> </html>

    You might also like