28172 sujets

CSS et mise en forme, CSS3

[Résolu] Deux border-radius

Bonjour,

Je rencontre un petit problème lors de l'intégration de mon site. Je suis en pleine application des nouvelles propriétés CSS3 et je souhaiterais réaliser deux bordures arrondies, une en bordure et une en background mais je ne sais pas si c'est possible.

Je joins une photo de mon cas.

Et voici mon code CSS :

#col1 {
float: left;
width: 200px;
padding : 20px;
margin-right: 10px;
border: solid 15px rgba(117, 175, 63, 0.5);
border-radius: 10px;
box-shadow: 4px 3px 10px #4e4924;
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
text-align: justify;
}

Merci upload/42338-bordure.jpg
Bonjour,

Je ne vois pas trop ce que tu veux faire. Tu veux faire comme sur ta photo, car il y a qu'une bordure qui est arrondi?
Modifié par mel2412 (17 Apr 2012 - 14:15)
Bonjour,

La photo, c'est ce que j'ai actuellement. Je voudrais que mes coins blancs deviennent arrondis comme les verts.
Crées une div, appliques lui le fond vert, un border-radius et un padding de 15px. Encapsule-y un paragraphe contenant le texte, appliques lui un fond-blanc, un padding de 20px et le même border-radius que la div. En gros.
Ok, c'est ce que j'avais fait au départ mais je pensais qu'on pouvait faire les deux dans une seule div. Par contre, lors de ce premier essai, ma div de couleur verte ne s'adaptait pas autour de la div blanche. Je veux dire qu'elle ne descendait pas avec celle-ci en fonction du texte. Dois-je mettre une balise spéciale ?

Merci !
Si tu ne fais pas sortir du flux le bloc blanc contenant le texte avec un positionnement en float ou absolute, ça devrait marcher tout seul.
Je le positionne comment alors ? En relatif ? Ou en rien du tout !
Je ne comprend pas encore bien tous ces positionnements .... Smiley biggol
Salut,

Si tu ne veux pas surcharger le DOM tu peux faire un compromis et faire en sorte d'avoir un 
border-radius
supérieur à ton 
border
.

Exemple : 

border-radius: 15px;
border: 10px solid rgba(117, 175, 63, 0.5);
margotte7887 a écrit :
Je le positionne comment alors ? En relatif ? Ou en rien du tout !
Je ne comprend pas encore bien tous ces positionnements .... Smiley biggol


En "rien du tout". Il gardera son positionnement en "static" par défaut.

Tu trouveras quelques éclaircissement sur le positionnement en CSS par là :
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
margotte7887 a écrit :
Bonjour,

Je rencontre un petit problème lors de l'intégration de mon site. Je suis en pleine application des nouvelles propriétés CSS3 et je souhaiterais réaliser deux bordures arrondies, une en bordure et une en background mais je ne sais pas si c'est possible.

Je joins une photo de mon cas.

Et voici mon code CSS :

#col1 {
float: left;
width: 200px;
padding : 20px;
margin-right: 10px;
border: solid 15px rgba(117, 175, 63, 0.5);
border-radius: 10px;
box-shadow: 4px 3px 10px #4e4924;
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
text-align: justify;
}

Merciupload/42338-bordure.jpg


Bonjour,

il y a aussi la possibilité avec box-shadow de générer des ombre sans dégradé qui ressemble du coup a des bordures pleines.

Je te propose de reprendre ton css en dessinant cette bordure en ombre pleine pour qu'elle suive le border-radius.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title>test bordure radius externe seulement - CSS3</title>

  <style media="screen">
div {
float: left;
width: 200px;
padding : 20px 35px;
margin-right: 10px;
border-radius: 10px;
box-shadow: 0 0 0 15px rgba(117, 175, 63, 0.5), 0 0 0 15px #fff,  4px 3px 10px  15px #4e4924;
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
text-align: justify;
}
</style>
</head>
<body>
<div>
<p>Novo denique perniciosoque exemplo idem Gallus ausus esuando 
dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi
 per tabernas palabatur et conpita quaeritando Graeco sermone, 
 cuius erat inpendio gnarus, quid de Caesare quisque sentiret. 
 et haec confidenter agebat in urbe ubi pernoctantium luminum 
 claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, 
 si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens 
 ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis 
 gementibus agebantur.</p>
</div>
</body>
</html>

explications:
Generation de 3 ombres superposées supplémentaire:
1° en rgba qui dessine la bordure , opaque a 50% selon ton codage.
2° une blanche totalement opaque pour masqué la 3eme de la premiere ....
3° l'ombre initialement recherchée et agrandie pour quelle déborde sous la "fausse" bordure.

Ce n'est pas forcement la solution idéal,mais cela te montre que box-shadow peut generer plus d'une ombre. (idem pour text-shadow by the way)

Cordialement, GC
border-radius: 15px;
border: 10px solid rgba(117, 175, 63, 0.5);


Je plussoie pour çà aussi. A toi de voir ce qui correspond le mieux à ta mise en page.
Sujet clos
Aller à