Code Bloc à bords arrondis

benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   -  
 gronobo -
Bonjour,

Je voudrais savoir comment mettre en place le code pour bloc à angles arrondis qui est sur cette page : http://www.webdemark.fr/webdesign/css/angles-arrondis-en-css/

Avec la méthode "Avec la propriété CSS border-radius".

Merci !
A voir également:

11 réponses

Réponse 1 / 11
gronobo
 
Pour ceux qui cherchent à faire des bloc aux bords arrondis qui puissent s'animer sans lag et donc sans CSS3 ( j'avoue c'est très spécifique ) je vous recommande ce tuto : http://gronoblog.blogspot.com/2010/12/bloc-de-taille-variable-en-css.html
3
Réponse 2 / 11
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
http://www.roundedcornr.com/
0
Réponse 3 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
Non me donner le code entier parce que je ne sais pas comment l'assembler.
Merci
0
Réponse 4 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
Merci c'est super ton site !
Merci a vous deux !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
Désolé je ne sais toujours pas comment placer le code css dans le site que tu m'as proposé ...
0
Réponse 6 / 11
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Pour le code donne sur le site
si tu veux le faire avec le css embarque cela doit donner ca par exemple 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>RAD ZONE Webcreation</title>
  <meta name="author" content="http://radservebeer.free.fr" />
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <style type="text/css">
  .roundedcornr_box_312833 {
	background: url(roundedcornr_312833_tl.png) no-repeat top left;
}
.roundedcornr_top_312833 {
	background: url(roundedcornr_312833_tr.png) no-repeat top right;
}
.roundedcornr_bottom_312833 {
	background: url(roundedcornr_312833_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_312833 div {
	background: url(roundedcornr_312833_br.png) no-repeat bottom right;
}
.roundedcornr_content_312833 {
	background: url(roundedcornr_312833_r.png) top right repeat-y;
}

.roundedcornr_top_312833 div,.roundedcornr_top_312833,
.roundedcornr_bottom_312833 div, .roundedcornr_bottom_312833 {
	width: 100%;
	height: 66px;
	font-size: 1px;
}
.roundedcornr_content_312833, .roundedcornr_bottom_312833 {
	margin-top: -19px;
}
.roundedcornr_content_312833 { padding: 0 66px; }
  </style>
</head>
  <body>
   <div class="roundedcornr_box_312833">
   <div class="roundedcornr_top_312833"><div></div></div>
      <div class="roundedcornr_content_312833">
         <p>Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.</p>
      </div>
   <div class="roundedcornr_bottom_312833"><div></div></div>
</div>
 </body>
</html>


tu telecharge les images et c est bon

RAD
0
Réponse 7 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
Merci, j'ai aussi vu sur le site du zero comment faire avec une page css externe mais j'ai un petit problème concernant le 3eme model avec des bordures où le bloc est a moitié coupé a la fin (essaie et tu verras).
0
Réponse 8 / 11
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
la taille ne dois pas depasser 1024 px !!!!!!

l image roundedcornr_288242_bl.png ne fais que 1024 px
0
Réponse 9 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
J'ai essayer une nouvelle méthode qui marche et qui est plus modifiable mais un peut moins design: http://www.webdemark.fr/webdesign/css/angles-arrondis-en-css/
C'est la 4eme methode et je voudrais savoir comment peut on déplacer les blocks car je réussi en changeant la ligne : .examplesGoHere {text-align:center; margin: 3px; } (j'ai changé les 3px) mais lorsque l'on change ça, le bloc se déplace en diagonal et pas horizontalement de gauche à droite.

Merci de votre précieuse aide.
0
Réponse 10 / 11
benji^^ Messages postés 100 Date d'inscription   Statut Membre Dernière intervention   10
 
Nouveau problème et ne vous attardez pas sur le précédent ^^
J'ai utiliser la méthode radius et je voudrais savoir si il était possible de déplacer le bloc.

Voila !
Merci !
0
Réponse 11 / 11
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
tu veux qu'on te répète ce qu'il y a de marqué dans ce tuto ?
-1

Discussions similaires

sertissage des cables rj45
lekludo -
brupala -

7 réponses