[HTML] Cadres transparents ?

Cadres transparents ? [HTML] - HTML/CSS - Programmation

Marsh Posté le 13-08-2002 à 17:55:26    

Est ce faisable....je sais que oui mais comment exactement ?
Existe t il un javascript ?
 
Merci de me renseigner un peu a ce sujet.
 
:jap:

Reply

Marsh Posté le 13-08-2002 à 17:55:26   

Reply

Marsh Posté le 13-08-2002 à 17:57:01    

qu'est-ce que tu entends par "cadre" :heink:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 13-08-2002 à 18:03:06    

cadres, tableaux ou tout elements ou je pourrais afficher des infos => bon disons ici table translucide

Reply

Marsh Posté le 13-08-2002 à 18:20:15    

ça doit être quelque chose en CSS


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 13-08-2002 à 18:39:42    

Arf ca m aide un peu mais g tjs rien trouve pourtant a partir de google je viens de tomber sur un cours assez precis des css 2.0
 
 
QQun connait il la soluce ou pourrait il me dire de quelle proprietes cela vient ?
 
thx ;)

Reply

Marsh Posté le 13-08-2002 à 19:28:42    

Un truc comme ça ? http://www.w3.org/Style/CSS/ (cf le menu en haut à droite. À voir avec un vrai navigateur, Mozilla par exemple :ange: )
 
Ou alors ça : http://www.meyerweb.com/eric/css/e [...] /demo.html ?


Message édité par gm_superstar le 13-08-2002 à 19:29:04
Reply

Marsh Posté le 13-08-2002 à 19:29:11    

css:
.cadre {
  border: 1px solid;
  border-color: #EEEEEE #888888 #888888 #EEEEEE;
}
 
html:
<div class=cadre">Mon texte tout beau...<br />
voila il y a un cadre autour.
</div>
 
ça te convient ? à toi de voir les couleurs que tu souhaites.


---------------
...oups kernel error...
Reply

Marsh Posté le 14-08-2002 à 14:09:37    

gm_superstar a écrit a écrit :

 
 
Ou alors ça : http://www.meyerweb.com/eric/css/e [...] /demo.html ?




 
oui un peu comme celui la....mais j ai pas encore teste ce que m a donne ethernal.
C a peu pres ca ?
 
thx ;)

Reply

Marsh Posté le 14-08-2002 à 14:14:44    

Non, ce que propose ethernal c'est juste un cadre avec une bordure autour. Il n'y a pas de notion de transparence (enfin si vu que son cadre n'a pas de fond, on voit ce qu'il y a en dessous mais j'appelle pas ça de la transparence ;) )
 
D'ailleurs, le lien 'complexspiral' ce n'est pas non plus de la transparence, mais l'effet est pas mal. Le gars utilise plusieurs images de fond fixe (une bour le body, une pour les boutons et une autre pour le cadre bleuté). Tout est expliqué sur le lien.

Reply

Marsh Posté le 14-08-2002 à 14:26:13    

oui g vu qu il y avait de l explication ....mais je ne suis pas tres doue en anglais je l avoue.
Perso je voudrais faire des table transparente...
Je pense meme qu une fois c fait je peux faire de la transparente que si le pointeur de ne se trouve pas dessus avec une gestion d evenement.
Je voudrais qu on puisse voir le logo de mon clan en dessous des tables.
 
G recup qq pages html expliquant le CSS 2 que je ne connais pas vraiment mais rien la dessus.
 
un petit coup de main me serait utile...
thx :jap:

Reply

Marsh Posté le 14-08-2002 à 14:26:13   

Reply

Marsh Posté le 14-08-2002 à 14:47:44    

MkRacing66 a écrit a écrit :

Je pense meme qu une fois c fait je peux faire de la transparente que si le pointeur de ne se trouve pas dessus avec une gestion d evenement.
Je voudrais qu on puisse voir le logo de mon clan en dessous des tables.



En théorie c'est possible de faire ce que tu dis mais ça ne marchera pas avec avec IE pour Windows. Comme il est dit dans ce lien http://www.meyerweb.com/eric/css/e [...] lassy.html IE ne supporte pas les fonds fixes pour autre chose que le BODY.
 
 
Pour avoir un fond fixe il faut définir pour ton body les propriétés CSS suivantes :
 
body {
    background: white url("image.png" );
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%; /*pour centrer l'image*/
}
 
Toutes les propriétés pour les fonds sont là : http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2 A toi de jouer avec pour voir ce que ça fait.
 
Ensuite tu construis ta page normalement en mettant par dessus un cadre ou tablau sans fond (comme l'a fait ethernal)


Message édité par gm_superstar le 14-08-2002 à 14:49:44
Reply

Marsh Posté le 14-08-2002 à 14:59:42    

http://www.meyerweb.com/eric/css/e [...] /demo.html
 
c franchement de la gruge, mais bon ça trompe...
sinon pour faire de la vrai transparence:
 
http://msdn.microsoft.com/workshop [...] frame=true

Reply

Marsh Posté le 14-08-2002 à 15:00:48    

Ok merci bcp v faire fouiller tout ca et si besoin je reviendrai en parler dans qq jours si je coince...
 
Merci bcp ;)

Reply

Marsh Posté le 14-08-2002 à 15:06:49    

stb a écrit a écrit :

http://www.meyerweb.com/eric/css/e [...] /demo.html
 
c franchement de la gruge, mais bon ça trompe...
sinon pour faire de la vrai transparence:



Sinon pour faire de la vrai transparence il y a truc tout bête les PNG.


[:rofl][:rofl][:rofl]

Reply

Marsh Posté le 14-08-2002 à 17:58:11    

ouais la transparence 48bits avec des PNG c pas pour demain... meme sous IE, surtout si tu te moque de moi avec mes solutions made in $MS$.
 
d'ailleurs j'insiste, ces filtres D3D sont tres bons et tres rapides:
http://msdn.microsoft.com/library/ [...] erence.asp
 
(en plus la pluparts marchent sous Mozilla)


Message édité par stb le 14-08-2002 à 18:04:31
Reply

Marsh Posté le 14-08-2002 à 18:24:54    

stb a écrit a écrit :

ouais la transparence 48bits avec des PNG c pas pour demain... meme sous IE, surtout si tu te moque de moi avec mes solutions made in $MS$.



Pourtant IE 5 pour Mac supporte parfaitement le canal alpha des PNG... Pourquoi pas celui de Windows ?

stb a écrit a écrit :

d'ailleurs j'insiste, ces filtres D3D sont tres bons et tres rapides:
http://msdn.microsoft.com/library/ [...] erence.asp



Oui oui, c'est peut être techniquement très bon mais :
1. C'est beaucoup plus compliqué à utiliser qu'une simple image PNG.
2. Ça ne marche que sous Windows (et Internet ne se limite pas à Windows)
3. (qui découle du précédent) c'est propriétaire, et je crois que le développement Web a assez soufert des extensions propriétaires. Il y a aujourd'hui des normes libres qui font (mieux) le même boulot.

stb a écrit a écrit :

(en plus la pluparts marchent sous Mozilla)



Permet moi d'en douter très fortement. Mozilla ne reconnait pas la propriété CSS 'filter' qui est nécessaire pour faire fonctionner ces filtres. À partir de là, je ne vois pas comment ça pourrait marcher dans Mozilla.
 
Mais je demande à voir. Si tu as un exemple où ces effets fonctionnent avec Mozilla je suis preneur.

Reply

Marsh Posté le 15-08-2002 à 12:47:33    

Heu les gars c tres interessants tout ca....
Mais pourrait m expliquer c qu est un PNG car pour le moment a part me faire penser a PNJ des jeux de role je ne sais pas ce que c est....
 
Je sais ....Google mais la g vraiment pas le temps avec le boulot que g et je fais ca dans mon temps libre et en plus je suis a Londres donc connex que pendant les heures de boulot.
 
Alors soyez sympa expliquer moi.
 :hello:  
thx
 
Ps: c pas moi qui ai introduit ca dans le topic donc double raison de ne pas m engueler si je pose la kestion...;)

Reply

Marsh Posté le 15-08-2002 à 12:58:21    

Le PNG est un format d'image qui vise à remplacer le GIF.
 
antp est un fan de ce format. Il a fait une page très bien faite dessus : http://www.antp.be/PNG/ Bonne lecture ;)

Reply

Marsh Posté le 15-08-2002 à 15:06:29    

Reply

Marsh Posté le 16-08-2002 à 10:26:42    

Bon g fouille tout ce que vous m avez donne et c etait super interessant....
Particulierement ce lien sur le site de antp avec les PNG.
J avais entendu parler d une nouvelle norme pour le jpeg : le superjpeg ou un truc comme ca offrant une meilleure compression (sans altere l image ca j en sais rien...) mais pas du PNG.
 
Mais bon au final je ne sais tjs pas comment faire mon truc....
Je voudrais mettre une image de fond pour le body centree et non repetitive.
Ensuite je voudrais faire des tableaux "translucide" pour faire apparaitre ce logo si un tableau se trouve dessus...car mes tableaux seront creer par une boucle suite a une recuperation de donnees dans une bdd.
N etant pas doue graphiquement je voudrais savoir quelle methode j applique ?
 
Je m en fout total pour le moment de la compatibilite des browsers pour le moment...je veux juste que ca marche sous IE donc est ce que je dois faire un PNG avec une couleur de fond en y appliquant un filtre (je vois 256 filtres possibles ?) ou alors utiliser la methode stb avec les filtres crosoft ?
 
Thx pour votre aide une fois de plus...
 :)  ;)  :jap:  


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 16-08-2002 à 10:56:11    

Heu au fait tant que j y suis il y a moyen de faire des bordures de tableaux arrondies ? je crois l avoir vu sur frontpage ou dreamweaver ou autres mais je ne retrouve plus.... :pt1cable:  
 
Ca existe bien pourtant.....non ?


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 16-08-2002 à 11:18:00    

MkRacing66 a écrit a écrit :

Mais bon au final je ne sais tjs pas comment faire mon truc....
Je voudrais mettre une image de fond pour le body centree et non repetitive.



Déjà ça, tu l'as fait ? J'ai tout indiqué en-dessus comment le faire.

MkRacing66 a écrit a écrit :

Ensuite je voudrais faire des tableaux "translucide" pour faire apparaitre ce logo si un tableau se trouve dessus...car mes tableaux seront creer par une boucle suite a une recuperation de donnees dans une bdd.
N etant pas doue graphiquement je voudrais savoir quelle methode j applique ?
 
Je m en fout total pour le moment de la compatibilite des browsers pour le moment...je veux juste que ca marche sous IE donc est ce que je dois faire un PNG avec une couleur de fond en y appliquant un filtre (je vois 256 filtres possibles ?) ou alors utiliser la methode stb avec les filtres crosoft ?



Etant donné les limitations de IE, tu dois utiliser la méthode de stb en effet. Je ne peux, hélas pas t'en dire plus.
 
Cela dit, si à terme, ton objectif est d'être compatible avec plus de navigateurs, il n'est pas raisonnable de partir sur cette solution "IE-Windows only" car tu devras refaire pas mal de choses.

Reply

Marsh Posté le 16-08-2002 à 11:19:11    

MkRacing66 a écrit a écrit :

Heu au fait tant que j y suis il y a moyen de faire des bordures de tableaux arrondies ? je crois l avoir vu sur frontpage ou dreamweaver ou autres mais je ne retrouve plus.... :pt1cable:  
 
Ca existe bien pourtant.....non ?



Soit tu crées un tableau de 3 colonnes et de 3 lignes et tu mets des images de cadre arrondi aux 4 coins.
 
Soit tu repompes cet exemple : http://www.sovavsiti.cz/css/corners.html (qui ne te dispense pas d'avoir les 4 coins arrondis sous forme d'image)

Reply

Marsh Posté le 16-08-2002 à 11:35:59    

Merci bcp.....
 
C bon g toutes mes reponses je crois que le sujet est clos ben j espere.
 
 

Citation :

Déjà ça, tu l'as fait ? J'ai tout indiqué en-dessus comment le faire.  


 
Ouais ouais ca no pb g me suis mis au CSS ca me change la vie ca c clair....
 
 
Merci a toi et a bientot ;)


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 16-08-2002 à 11:54:37    

tiens dans ta signature :
"le cv devient impressionant meme si je n ai pas encore une reelle xp : C/C++,Vb,Delpi,HTML,XML,Php,MySQL,Oracle,etc....  "
 
C'est plus sérieux si y a pas de faute des les noms des softs :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 16-08-2002 à 14:17:55    

Mouarf....avait pas vu
 
Arf petite erreur mais corrige grace a toi now.
 
PS: pas evident de jongler toute la journee entre un clavier AZERTY et un QWERTY (cf clavier anglais) ;)


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 16-08-2002 à 14:48:17    

MkRacing66 a écrit a écrit :

 
PS: pas evident de jongler toute la journee entre un clavier AZERTY et un QWERTY (cf clavier anglais) ;)




 
m'en parle pas, à la maison j'ai un qwerty hollandais et au boulot un azerty belge.
Enfin je m'y suis bien habitué :)
Par contre je me suis tellement habitué que si je fous un azerty sur mon PC de la maison je fais plein de fautes, alors qu'au boulot pas de prob :heink:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 16-08-2002 à 15:09:46    

un dernier truc.....les filtres de crosoft ne fct que sous IE mais sous les autres nav les effets ne marcheront pas c tout ? ca va pas me foutre des gros cadres avec une croix rouge dedans... ;)


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 18-08-2002 à 20:21:49    

gm_superstar>
le web n'est pas windows, tu ne peux donc pas non plus ecarter le fait le IE ne supporte pas la transparence 48b pour les png...
 
extrait de http://antoine.buypin.com/PNG/alpha/index.html
------------------------------------------------------------------
Ci-dessous une image PNG 32 bits utilisant des transparences (alpha channel). À gauche l'image en transparence au-dessus d'un fond non uni. À droite une capture d'écran de ce que devrait donner l'image dans un navigateur supportant les PNG transparents. À part Internet Explorer pour Windows, tous les navigateurs récents devraient afficher l'image sans problèmes.
------------------------------------------------------------------
le fait est que l'image s'est affichée correctement, donc j'en conclue que ie6 possede la gestion de la transparence png.
 
Soyon claire j'aime bien ie, je pense que l'on a le droit de ne pas vouloir faire des sites qui lui sont reservés mais on peut en faire tellement plus... alors la solutions pour que tt le monde soit content consiste à faire de belles choses en flash/shockwave... qui ne sont pas plus libres, et comme je conchie flash...
 
pour ce qui est de la compatibilité mozilla, je crois bien que ça marche, des que j'ais un bonne demo t'as ton MP


Message édité par stb le 18-08-2002 à 20:29:41
Reply

Marsh Posté le 18-08-2002 à 22:03:33    

stb a écrit a écrit :

gm_superstar>
le web n'est pas windows, tu ne peux donc pas non plus ecarter le fait le IE ne supporte pas la transparence 48b pour les png...



Oui (et d'ailleurs je n'ai pas conseillé à mkracing66 de solution à base de PNG). Cela dit il y a une différence : le PNG est une recommendation officielle du W3C (l'organisme qui fait les normes de l'Internet, et dont Microsoft fait partie) alors que la solution que tu proposes est ultra-propriétaire. J'estime donc que le PNG a un peu plus de légitimité que DirectX et que donc, il doit être encouragé.
 
Je répète : le temps des extensions propriétaires est terminé. Cela était peut-être valable à une époque où il n'y avait pas encore de normes publique, mais aujourd'hui il n'y a plus d'excuses.

stb a écrit a écrit :

 
extrait de http://antoine.buypin.com/PNG/alpha/index.html
[...]
le fait est que l'image s'est affichée correctement, donc j'en conclue que ie6 possede la gestion de la transparence png.



Euh je viens de vérifier à l'instant avec IE6 et l'image de gauche n'apparait pas transparente...

stb a écrit a écrit :

Soyon claire j'aime bien ie, je pense que l'on a le droit de ne pas vouloir faire des sites qui lui sont reservés mais on peut en faire tellement plus... alors la solutions pour que tt le monde soit content consiste à faire de belles choses en flash/shockwave... qui ne sont pas plus libres, et comme je conchie flash...



Non non la solution pour que tout le monde soit content et de suivre les normes (XHTML, CSS, DOM) et de s'en tenir au minimum commun. Ca marche déjà pas mal (même avec IE6). Reste le cas des anciennes versions de ces navigateurs (NS 4, IE 5...), mais ça c'est un autre problème.

stb a écrit a écrit :

pour ce qui est de la compatibilité mozilla, je crois bien que ça marche, des que j'ais un bonne demo t'as ton MP



J'ai hâte de voir ce miracle. Et j'espère que tu en feras profiter tout le monde.

Reply

Marsh Posté le 18-08-2002 à 22:06:23    

stb a écrit a écrit :

 
 
extrait de http://antoine.buypin.com/PNG/alpha/index.html
le fait est que l'image s'est affichée correctement, donc j'en conclue que ie6 possede la gestion de la transparence png.




 
mon site devient célèbre :D :sol:
 
si le PNG s'affiche de la même manière dans les deux cases sous IE c'est que t'as installé un plugin genre Quicktime pour la prise en charge du PNG je pense.
Dans la version de base de IE y a pas de support des transparences des PNG 32 bits, même dans IE 6


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 18-08-2002 à 22:10:31    

Tiens, Quicktime gère aussi la transparence ?

Reply

Marsh Posté le 18-08-2002 à 22:28:18    

j'ai cru lire ça un jour, que c'était la solution pour avoir des PNG dans IE, mais je sais pas si c'est vrai, ou si c'est un autre plugin qui fait ça.
Faudrait que quelqu'un teste :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 19-08-2002 à 00:03:06    

oula je m'emballe:
 
pour ce qui est de la transparence:
j'ai été abusée par un site dont il faudras que je decortique le "code" pour savoir la maniere dont il fait sa transparence... quasi parfaite sous mozilla.
donc, oui les effets directx (cela semble logique, mais j'y croyait jusqu'au bout), ne sont pas supportés par mozilla.
 
Quand à la transparence png avec un canal alpha sur 8 bits, j'ais du avoir une bonne alucination!
 
bref je parle trop vite!
 
mais je rappel juste que l'on parlait de VRAIE transparence...

Reply

Marsh Posté le 19-08-2002 à 10:48:19    

Bon je viens de lire un peu toute vos reponses sur le sujet et j avoue que je suis un petit peu largue sur certains trucs...
 
Bon g teste les filtres crosoft qui sont il est vrai tres tres bien mais bon ultra-proprietaire comme le disait gm_superstar.
 
Bon j avoue que je n ai jamais utilise mozilla,ni opera et donc je ne sais pas exactement leur possibilite.
kestion : je sais bien que certains de ces browsers sont tres utiles sous Linux - Unix et autres OS mais bon IE est tout de meme cense represente 90% du parc info (bon je sais bien que c tres tres disparate entre les vrais informaticiens et les utilisateurs occasionnels) ?
 
Bon sinon pour mon appli perso j avoue que je me contre balance totalement de la compatibilite avec tous les autres browsers car c juste un petit site perso pour mon clan.
Mais j aimerais juste connaitre les consequences de l utilisation de ces filtres : plantage total ou juste une opacity de 100% qd utilisation de transparence ? et sur l utilisation du filtre pour les degrades ?
 
thx ;)


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 19-08-2002 à 10:51:19    

MkRacing66 a écrit a écrit :

 IE est tout de meme cense represente 90% du parc info  




 
quand AOL va passer à Netscape pour ses abonnés le pourcentage va changer :D (bon ok IE sera toujours majoritaire)


Message édité par antp le 19-08-2002 à 10:51:33
Reply

Marsh Posté le 19-08-2002 à 11:25:05    

Mouhahahahaha....oui mais bon bon entre temps le deploiment de l adsl aura progresse et tous les abonnes auront lache AOL pour prendre nettissimo comme moi (je parle pour la france)
 
Sinon serieux quels sont les consequences sous un autre browser de l utilisation de ces filtres ?


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le 19-08-2002 à 11:37:47    

je parlais au niveau mondial pas au niveau français (ha la la ces français :D)

Reply

Marsh Posté le 19-08-2002 à 11:43:01    

et ben la france c le centre du monde Mouhahahhaha ;)
 
sinon joli ton site antp et pas mal le stratego ;)
 
PS : n oubliez pas ma kestion.....heu mes kestions devrais je dire :'(


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui ! [Pierre Desproges]
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed