28172 sujets

CSS et mise en forme, CSS3

Effets de bordure

Bonjour,

J'ai actuellement une image en background mais j'aimerais si possible la remplacer par une bordure avec un effet de transparence.

Il y a des possibilités en CSS3.

Connaissez-vous des tutos ou exemples des propriétés de bordures en CSS ?

Merci d'avance.
Bonjour,

La seule proprité qui pourrait m'interreser est border-colors.

Mais j'ai cru comprendre que ce n'est accepté que par Firefox...

Pour un effet de transparence un peu sympa il faut encore avoir recours au background j'ai l'impression.
Bonjour,j

Je reviens sur le sujet avec une nouvelle question.

Border-top {3px solid #FFF}

Bordure blanche de ,3px.
Mais je veux ajouter un effet de transprence.

Border-top {3px solid #FFF; opacity: 50}

Non essayé mais cela m'étonnrait que celma marche.

Pas moyen de s'en sortir en CSS pur, il faut une image en background pour avoir cet effet ?
pour les couleurs avec transparence regardes du coté de rgba(x,x,x,x); ou hsla() et éventuellement background-clip (sans plus d'info/screen de ta part difficile d'être vraiment pertinent)
++
Modérateur
Salut,

boteha_2 a écrit :
La seule proprité qui pourrait m'interreser est border-colors.
Mais j'ai cru comprendre que ce n'est accepté que par Firefox...

Border-color fait partit de CSS1 donc est là depuis une éternité ! Donc supporté par Chrome1+ FF1+ Safari1+ IE4+ (toujours en retard celui là) etc http://www.w3schools.com/cssref/pr_border-color.asp

Du coup +1 pour rgba(); ca donne un truc du genre :
border-top : 3px solid rgba(255,255,255,0.5);


Et au passage pour ton test avec
opacity: 50;

Premièrement opacity va mettre en opacité TOUT le block et TOUT ses enfants et deuxièmement opacity prend des valeurs entre 0 et 1 (donc 50% = 0.5) http://www.w3schools.com/cssref/css3_pr_opacity.asp

Bonne soirée ! Smiley smile
+1 avec _laurent pour sa solution. Et pour répondre à boteha_2 :
boteha_2 a écrit :
La seule proprité qui pourrait m'interreser est border-colors. Mais j'ai cru comprendre que ce n'est accepté que par Firefox...

Il existe un site incontournable dédié à la compatibilité des règles CSS dénommé CanIUse...
Bonjour,

Merci de vos réponses.

A propos de border-color je me suis mal exprimé.
C'est le fait de déclarer plusieurs valeurs qui n'est supporté que par Firefox :
border-color {blue white red}


Ce que je veux faire exactement, voyez cette page sur mon site de tests

En bas de page, un menu fixe avec des liens vers ancres internes.

Généralement ce type de menu est fait avec un fond très foncé mais je n'aime pas trop.

J'aimerais garder mon fond blanc, ne pas mettre de bordure haute (j'ai essayé c'est pas beau) mais créer au-dessus du menu une zone de quelques pixels de haut avec transparence pour que le texte du flux apparaisse atténuié mais quand même visible.

C'est selon moi un bon moyen de montrer que la page continue plus bas.

Dans la structure actuelle, cela donne :

<div id="footer">
<p><button type="submit" name="choix" value="er &gt;">&crarr;<i>Alias pour &laquo;&nbsp;Ajouter au panier&nbsp;&raquo;</i></button><a href="#pro">&asymp;<i>Produits tr&egrave;s proches</i></a><a href="#ore">&equiv;<i>S&#039;orienter</i></a><a href="#D2099">Description</a><a href="#V2099">14 avis</a></p>
<ul id="ba"><li class="vh"><button>&crarr;</button></li><li id="w"><a href="#bas">V</a></li><li id="m"><a href="#tto">V</a></li><li><a href="#tel" class="der">&Lambda;</a></li></ul>
</div>


Il me semble que je suis obligé d'avoir :
div#footer {background-color: #FFF}


J'ai pensé à border-top avec rgba

div#footer {border-top: 5px solid rgba (255, 255, 255, 0.5)}


Mais ça ne marche pas même sur naviogateurs modernes, cela me semble pourtant correct.

Ou alors passer par border-top-image et envoyer un png blanc semi-transparent.

Ou alors mais c'est ignoble pour les puristes ajouter en haut de div id="footer" un conainer dont la seule fonction serait d'avoir en background une image semi-transparente.

Merci d'avance.
Je comprends mieux votre problème...

Est-ce que quelque chose comme ceci vous conviendrait ? :
box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);
Bonjour,

Merci de ta réponse mais n'oublie pas que :

Je souhaite un filet banc avec effet de transprence.

J'ai essayé :

 box-shadow: 0 0 0 5px rgba(255, 255, 255, .2);


Il n'y a pas d'effet de transparence.

Avec

 box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);


Il y a effet de transpence.

Dans le dernier cas il y a une bordure gauche et une bordure haute.

Je connais mal box-shadow, j'aimerais me débrasser de la bordure gauche pour n'avoir que la bordure haute, je vais chercher.
Modifié par boteha_2 (09 Aug 2015 - 14:12)
Bonjour,

On peut regretter qu'une propriété border-length n'existe pas.

Par exemple, pour obtenir un soulignement partiel du genre.

Lien_à_partiellement_souligner
______________

Comment obtenir facilement cet effet ?

Avec un background-image, avec :after, peut-être avec border-image, mais c'est tordu.

Alors que l'on peut rêver de :

{border-bottom-length: 50%}

Modifié par boteha_2 (06 Sep 2015 - 17:06)
Bonjour,

J'ai un peu de mal à comprendre ce que tu veux réellement, une bordure transparente, ou un fondu...

Pour la deuxième idée :
box-shadow: 0 -5px 15px #fff; /* à voir ensuite pour bouger les dimensions de l'ombre */


Sinon, une page de test que je m'étais faite pour des bordures transparente (à adapter bien sûr).
Bonjour,

Merci de tes réponses.

1) J'amerais un peu l'équivalent d'un effet opacity, tu appelles cela un fondu ?
Sur environ 10 ou 15px de haut le texte de la page apparaît un peu effacé, ce qui suggère l'idée d'une suite sachant que j'ai en bas de page un petit menu en position: fixed qui peut donner l'impression que c'est le bas de la page.

2) Super, j'essaye dès que j'ai le temps, au plus tard prochain week-end.
Bonjour,

Le week-end est passé sans que j'aie eu le temps de faire les essais mais ce n'est que partie remise.
Sujet clos
Aller à