Tayo
Astuce et Tutorial » Programmation / Developpement » css-et-design » Astuce rédigée par Zabuza
Description de cet article : Sans image, petite technique pour faire un div arrondi
Lire les commentaires

Faire un div arrondi sans image  en .css


Grâce à cette astuce, il vous sera possible de réaliser un div aux formes arrondies, et de couleur paramétrable, tout ceci facilement !


 Div Arrondi




L'idée est relativement simple, mais s'avère simplement géniale. En fait, le principe du script de ce  "div arrondi" est d'utiliser une très fine zone de texte (invisible) pour créer nos côtés.


Pour se faire, voici le conteu du "script" css. Il devrait être placé (sans les balises <style et </style, première et dernière ligne donc dans votre fichier .css. Si vous voulez juste tester, placez l'intégralité de  ce code dans votre page web.


 


 


Code css pour réaliser un div arrondi sans image nécessaire :


[code=css]


<style type="text/css">



.divarrondi { background:#0099CC; width:345px;  }



b.dtop, b.dbas{display:block;background:#FFFFFF; font-size:1px; }

b.dtop b, b.dbas b{display:block;height: 1px; font-size:1px;

    overflow: hidden; background:#0099CC;}

b.r1{margin: 0 5px ; font-size:1px;}

b.r2{margin: 0 3px ; font-size:1px;}

b.r3{margin: 0 2px ; font-size:1px;}

b.dtop b.r4, b.dbas b.r4{margin: 0 1px;height: 2px; font-size:1px;}

</style>


[/code]


Explication et détails :


N'oubliez pas la partie font-size:1px. Cette dernière s'avère importante, en effet, elle empêche un vilain bug d'affichage d'internet explorer.


La partie du .divarrondi sera celle qui devrait être modifié. width signifie donc sa taille (exprimée ici en px), et le background sa couleur de fond.


b.dtop, b.dbas{display:block;background:#FFFFFF; Ceci va donner comme couleur d'arrière plan ( à nos côtés ) une valeur "blanche". Changez là si votre page est d'une autre couleur.




Et voici le contenu de notre div arrondi  à intégrer dans une page de votre site :


 


 








<div class="divarrondi">

  <p><b class="dtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><h1>Titre</h1> Et Blabla Blabla bla! <br/>

    <span class="Style2">Voici notre super div arrondi ! </span></p>

  <p>Pour r&eacute;aliser ce div, merci de lire l'explication :o)  <b class='dbas'><b class='r4'></b><b class='r3'></b><b class='r2'></b><b class='r1'></b></b></p>

</div>

 


La partie contenu dans notre Tout ce qui commence avec <h1> et finit par le <b class='dbas'> peut être modifié pour intégrer du texte, des images, des tableaux (table) ou autre.



réduireNews
réduireTutoriel lié
  • Faire un div arrondi sans image en .css
    Sans image, petite technique pour faire un div arrondi
  • Round Javascript : Arrondir un nombre.
    Comment arrondir un nombre en javascript ?
  • Faire facilement des boutons 3D photoshop
    Réaliser aisément de jolis boutons web 2.0 grâce au logiciel Photoshop
  • Redimensionner une image php
    Code php pour Redimensionner une image quelque soit son type en php
  • Dans la même catégorie : css-et-design

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Faire tourner un div d'un certain angle en css
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 6
    Note: 6 sur 10

    Donnez votre note à ce tuto sur 10 :

    Comment éviter les longs mots de détruire le désign ?

    Faire tourner un div d'un certain angle en css

    Liste des commentaires pour Faire un div arrondi sans image en .css [-A-]


    Il y a 8 années, 1 mois
    très sympa ce tuto. Merci à toi.
    mais je pense que l'utilisation d'un script javascript(roundy, ect) pour IE, doublé d'une propriété CSS adéquate (raduis) pour les autres browsers reste la meilleure soution.
    Il y a 8 années, 6 mois
    Qqun n'a pas un problème de compatibilité avec Internet Explorer? Moi j'ai un rectangle qui apparait en bas :s
    Il y a 9 années, 3 mois
    grfdesz
    Il y a 9 années, 5 mois
    Merci :D
    Il y a 9 années, 11 mois
    très pratique ! merci bien
    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).