Je vous presenye la nouvelle version du site de Radio Actif Martinique
Vous avez accsés à de nouvelles rubriques tels que "les animateurs" et le "programme".
Un formulaire de contact est aussi placé pour nous joindre
Bonne visite sur Radio-Actif.Fr
Ils s'agit la en fait de la reprise d'une image qu'un jeune designer ne voulait faire qu'en css, son projet etait de (re)faire le site de radio-actif.fr
Je lui avait proposée ce mini tuto/demo, car cette tecnhique, (sujette a divites :) ) a l'avantages de pouvoir faire des boites arrondies extensibles tant en largeur que hauteur et elle me semblait donc approprié pour son projet et maleable a souhait une fois le principe (simple) compris.
Les petites explications :
L'idée: un conteneur que nous pouvons dimensionner acceuillera divers elements de type "block", qui occuperont les 100% de largeurs de ce conteneur.
Ces element serviront a construire l'aspect visuel de la boite aux coins arrondis (ou fantaisistes).
Pour creer ces formes arrondies, nous disposons d'une unité :le pixel, le plus petit point que votre ecran est en mesure de dessiner ... On peut donc "theoriquement" dessiner l'arrondi point par point.
Pour ce faire nous allons empiler des div d'1 pixel de hauteur, et ansi pouvoir dessiner une ligne horizontal d'un pixel (utile pour le haut et le bas de la boite. ou dessiner un point au extremitees gauche et/ou droite en leur appliquant une bordure d'1 pixel d'epaisseur ... une bordure d'1 pixel de large sur 1 pixel de hauteur, ça nous fait un point d'1 pixel. Voici donc, la tres bête et simpliste idée qui ne sera pas avare de "<div></div>" .
Ces div "coincés dans un conteneur s'etaleront jusqu'a ses bords.
En appliquant a chacun d'eux une marge exterieur differente, il sera possible de dessiner, par exemple, une ligne oblique en augmentant ou diminuant la marge d'1 pixel à chaques fois.
pour un simple effet d'arrondi, 2 fois 4 div supplementaires seront necessaires (4 en haut et 4 en bas).
Le xhtml et css de base pour des coins arrondis sur une hauteur de 4 pixel
un conteneur (sans attributs pour les fond et bordures, eventuellement les tailles)
4 "<div></div>" avec une "class" differente pour chacun
un "<div></div>" avec une class differente pour recevoir le contenu textes ou images de la zone .
et a nouveau les 4 "<div></div>" dans l'ordre inverse.
On n'oublie pas de refermer le conteneur
Ce qui donne comme base:
<div class="conteneur-arrondi ">
<div class="arrondi
un"></div>
<div class="arrondi
deux"></div>
<div class="arrondi
trois"></div>
<div class="arrondi
quatre"></div>
<div class="centrearrondi ">
<p>Le
contenu prendra place ici.</p>
</div>
<div class="arrondi
quatre"></div>
<div class="arrondi
trois"></div>
<div class="arrondi
deux"></div>
<div class="arrondi
un"></div>
</div>
Et voici le css pour le conteneur (qui peut-etre dimensionner, positionner en float, absolu, etc ... ou rien , juste dans le flux normale) et les differentes "class" appliquées aux elements de la boite "visuelle" .
Le css pour le conteneur comme dans l'exemple ci dessus..conteneur-arrondi{
padding:0;
width:47%;/* determine la largeur de la boite contenue */
float:left;
margin:1%;
}
Le css pour les 4 <div></div> dessinant l'arrondi . comme dans l'exemple ci dessus.
.un {
margin:0 4px;
height:1px;
background-color:#BFBFBF;
overflow:hidden;/*necssaire pour IE */
border:1px solid #BFBFBF;
border-top:0;border-bottom:0;}
Et la partie centrale recevant le contenu :
.centrearrondi {
border:1px solid #BFBFBF;
border-top:0;border-bottom:0;
margin:0 1px;
padding:0 2em;
min-height:150px;/* avec eventuellement une hauteur mini */
height:auto!important;
height:150px;
}
Et voilou une boite aux coins arrondis, ... en jouant sur le nombre de div et leur marges vous pouvez aisement donner/dessiner d'autres formes a vos coins ! ....