Posez votre question Signaler

Code Bloc à bords arrondis

benji^^ 121Messages postés 4 janvier 2008Date d'inscription - Dernière réponse le 17 janv. 2011 à 17:32
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 !
Lire la suite 

Code Bloc à bords arrondis »

11 réponses
Réponse
+3
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
tu veux qu'on te répète ce qu'il y a de marqué dans ce tuto ?
Ajouter un commentaire
Réponse
+0
moins plus
http://www.roundedcornr.com/
Ajouter un commentaire
Réponse
+0
moins plus
Non me donner le code entier parce que je ne sais pas comment l'assembler.
Merci
Ajouter un commentaire
Réponse
+0
moins plus
Merci c'est super ton site !
Merci a vous deux !
Ajouter un commentaire
Réponse
+0
moins plus
Désolé je ne sais toujours pas comment placer le code css dans le site que tu m'as proposé ...
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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).
Ajouter un commentaire
Réponse
+0
moins plus
la taille ne dois pas depasser 1024 px !!!!!!

l image roundedcornr_288242_bl.png ne fais que 1024 px
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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 !
Ajouter un commentaire
Ce document intitulé « Code Bloc à bords arrondis » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?