[CSS] Coin rond et transparentRésolu/Fermé

Question

Bonjour,

     J'aimerais savoir comment faire en css/div un fond pour ma page d'accueil, semi transparent aux coin arondis comme sur limage ci-dessous.

J'ai beau chercher, je ne trouve rien du tout, je vous remercie beaucoup!

Voici l'image en question
http://img687.imageshack.us/img687/4986/ccm.png

scriptiz · Accepted Answer

Bon pour recontredire Vendetta je vais bien tout expliquer en détais car oui la transparence est accessible sur tous les navigateurs sans aucune intervention de l'utilisateur, tout comme les PNG transparents le sont aussi toujours sans aucune intervention de l'utilisateur. C'est juste au codeur de rajouter quelques petites choses.

Il existe deux façon d'obtenir des zones/images transparentes.

1) Avec des images PNG
Cette méthode fonctionne par défaut sur les navigateurs suivants : IE 7 et +, Firefox, Chrome, Safari, Opera, ...
Pour IE 5.5 et 6 qui malgré tout existent encore il te suffit tout simple d'implémenter sur ton site la librairie jQuery et plus particulièrement le plugin PNG-Fix que voici : 
http://jquery.andreaseberhard.de/pngFix/

Grâce à ce petit plugin qui est très facile à intégrer à ton site (tout est expliquer sur la page que je t'ai juste au-dessus), même les utilisateurs de IE 5.5 et 6 verront tes PNG en transparence (le canal alpha quoi ^^) sans avoir rien à changer chez eux.

==> CONCLUSION : Les PNG transparents fonctionnent sur "tous" les navigateurs pour peu que tu utilise ce plugin, contrairement à ce que disait Vendetta.



2) Avec le CSS :
Cette méthode pour peu que l'on utilise les bons attributs, fonctionnera elle aussi sur tous les navigateurs.
Voici la classe qui rendra transparent à 50% sur TOUS les navigateurs
.transpa {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // Pour IE8
	filter: alpha(opacity=50);	// Pour IE5 à 7
	opacity: 0.5;	// Pour les autres
}
Note : attention à bien respecter cet ordre !

Il te suffit donc de mettre cette classe css sur un div ou une image pour le rendre transparent à moitié.
Si tu veux changer le degré de transparence tu dois simplement changer les 3 valeurs suivante à chaque ligne : 
50 = 50%
50 = 50%
0.5 = 50%

==> CONCLUSION : le filtre de transparence du navigateur est accessible pour tous les navigateurs et ce de nouveau sans aucune intervention de l'utilisateur, c'est juste à toi de rajouter un tout petit peu de code comme ci-dessus.



Sur ce bonne continuation, et Vendetta s'il te plait n'affirme pas des choses dont tu n'es pas certain car cela bloque des utilisateurs qui auraient put trouver tout cela tout seuls sur le net.



PS : Les coins ronds
Malheureusement en CSS les coins ronds ne sont pas, à ma connaissance, supportés par IE (toutes versions) et Opera, par contre il est possible de faire des coins ronds en utilisant des images PNG transparentes. Il te faut donc commencer par intégrer le plugin PNG-Fix comme je l'ai mis plus haut pour que IE 5.5 et 6 gèrent les PNG transparents, ensuite tu fait des images pour les coins, et en assemblant ces images dans un tableau, tu parviendra à faire une zone avec des coins arrondis.

Si tu veux un exemple dit le moi je serais ravi de te le fournir.

scriptiz · Answer

Pour les coins ronds c'est l'attribut CSS suivant : 
border-radius:25px;

Et pour la transparence : 
opacity:0.5;

Après ces deux attributs ne sont pas encore supportés par Internet Explorer mais le sont par Google Chrome, Firefox, Safari, ...

Zayer · Answer

Merci pour la piste scriptiz, mais j'aurais plutot aimé faire ca avec des images... est-ce possible?

Et j'aimerais que ce soit compatinle avec IE meme si jutilise Firefox, pour que chaque personne puisse profiter des meme "bénifice"... si on peut dire.

Quelqu'un a une idée?

Vendetta01 · Answer

Si tu veux faire ça avec des images, convertis ton image en png, donne lui une légère transpa puis une transparence totale dans les angles pour former des arcs de cercle.

Mais le problème n'est plus en CSS mais en retouche d'image.. Et de toute façon les vieux IE n'interprètent pas du tout le canal alpha.. Donc peu importe ce que tu voudra faire, ça marchera pas pour ces vieux navigateurs. (et la solution full css fonctionnera forcement un jour.. Quand IE sera à jour avec le CSS3 :D )

enark78 · Answer

ba si c'est pas possible, c'est pas possible...

scriptiz · Answer

Faux, il existe des fix pour les vieux IE 5.5, 6, ... pour afficher la transparence des PNG (cherche PNG-Fix sur Google).

enark78 · Answer

Je ne fais que rappeler ta premiere réponse: "Après ces deux attributs ne sont pas encore supportés par Internet Explorer mais le sont par Google Chrome, Firefox, Safari, ... "

scriptiz · Answer

Ici je parlais pour les PNG et non pour les attributs CSS ;)

Pour l'attribut CSS opacity il existe aussi un hack pour IE que voici : 
filter:alpha(opacity=70);

Et pour les coins arrondis il me semble qu'il existe des méthodes (faut chercher sur Google) mais elles sont souvent assez lourdes.

Vendetta01 · Answer

Bien sur pour les png il existe une méthode pour que les vieux IE supportent la transpa...
Mais c'est aux utilisateurs de faire la démarche. Et s'ils ne l'ont pas fait, aucune transpa ne marchera.
Voila où je voulais en venir.

Oublie ton idée de rendre transparent pour tout le monde.

Et au final la méthode par png est la plus simple. Tu peux aussi t'amuser à découper des images dans tous les sens et les remonter tel un puzzle si ça t'amuse.
En plus rares sont les utilisateurs de vieux IE.. Et ceux qui l'utilisent savent souvent que rien ne marche avec ^-^

Zayer · Answer

Merci a tous pour vos réponses, je vais travailler la dessus, 

Mais je ne sais pas comment monté la structure avec les Div :S en faite je crois que c'Est mon plus gros soucis :\...


Merci encore et n'hésitez pas a répondre!

Vendetta01 · Answer

J'aimerais bien voir où tu me contredis ^-^

scriptiz · Answer

Tu as dit : 

"Mais c'est aux utilisateurs de faire la démarche. Et s'ils ne l'ont pas fait, aucune transpa ne marchera.
[...]
Oublie ton idée de rendre transparent pour tout le monde."

Hors il n'y a aucune démarche à faire de la part des utilisateurs pour avoir des PNG transparents avec PNG-Fix, ou même des zones transparentes en CSS (3 attributs au lieu de 1...).

Je trouvais ça dommage que tu lui dise que ce n'était pas faisable et que du coup il allait abandonner son idée alors que c'est tout à fait faisable voir même très facile :)

Vendetta01 · Answer

Alors oui j'me suis trompé sur ce point (j'étais sur qu'il fallait télécharger un truc pour que son Ie prenne en compte les png)
Mais en aucun cas il est possible de faire ce qu'il veut faire.. Pour tout le monde.

Perso j'ai toujours considéré (et peut-etre que je le fais mal) que lorsque l'on a un projet en tête, il doit fonctionner avec tous les navigateurs. Voire avec des plus pour certains (je pense au javascript ou à l'ajax qui ne doivent pas être nécessaire ou handicapants s'ils sont absents).
Pour moi les contours arrondis sont des plus pour lesquels il est inutile de se casser la tête avec une insertion de tableau (à la rigueur pour apprendre oui, mais ça s'arrête là).
La transpa peut être nécessaire.. Mais là c'est une erreur de conception du site. Le rendre utilisable uniquement pour certains ? (même s'il représentent 95% des utilisateurs)
Si elle n'est utilisée que pour faire joli, bah tant mieux pour ceux chez qui ça marche, tant pis pour les autres (et oui on peut aussi chercher à faire fonctionner pour un max de personnes.. Mais là encore devoir pénaliser une majorité pour une amélioration visuelle chez une minorité..
(ben ouais.. Un bg en png est plus lourd à charger qu'un bg coloré et transpa)

J'me suis bien éloigné du sujet.. Et pour y revenir : Jamais tu ne pourra obtenir le rendu que tu veux pour tout le monde. (et si pour y arriver chez une minorité il faut flinguer la majorité, tu peux.. Mais j'y vois pas d'interet)

scriptiz · Answer

C'est ton avis,

Moi je trouve qu'avec les outils d'aujourd'hui, le nombre de hack pour IE, ... il est tout à fait possible de faire des choses un peu plus jolies (trucs transparents, bords arrondis) qui soit compatibles avec tous les navigateurs, IE 6 compris.

Après au pire si tu ne veux pas te casser la tête avec un tableau pour tes coins arrondis, ça ne rendra pas pareil sous IE d'accord mais ce n'est pas pour autant que ce sera mortel.

[CSS] Coin rond et transparent

14 réponses

Discussions similaires

Newsletters