login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:
Tutorials > CSS > Transparantie
Pagina:

Reacties op de tutorial Transparantie


Offline  zamna
Gepost op: 01 september 2007 - 22:34
HTML beginner
Mooi overzicht.

Misschien ook vermelden dat ieder child de transparantie-eigenschappen van zijn parent overneemt. Dus een transparante div in een andere zal dus niet gaan.

Offline  vinTage
Gepost op: 01 september 2007 - 22:55
Nieuw lid
over die IE7 heb ik mn twijfels, ik heb NIET uitgezocht naar welke tag die wél precies luistert, maar op een site waar ik atm aan werk gebruik ik géén filter:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. progid:DXImageTransform.Microsoft.Alpha(opacity=...);
en werkt perfect!

vb wat in ie6 en ie7 en ff en netscape en opera werkt
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #alphaDiv{
  2.   position:relative;
  3.   margin-left:197px;
  4.   top:10px;
  5.   background-color: #EF9A21;
  6.   width:197px;
  7.   height:310px;
  8.   filter: alpha(opacity=70);
  9.   -moz-opacity:0.7;
  10.   opacity: .70;
  11. }


Je hebt in je voorbeeld voor opera opacity: 0.90 staan, dit werkt niet, dit moet opacity:.90 zijn

Offline  JoWannes
Gepost op: 02 september 2007 - 10:07
HTML interesse
@ Zamna: idd, zal kijken of ik het er ergens tussen krijg.  

@ vinTage: Ja, je hebt gelijk.
Je kan de filter van IE6 ( filter: alpha(opacity=89); ) gebruiken, maar dan moet je er ook een 'width' bij zetten, anders werkt het niet.
Dit ga ik even aanpassen.  

Offline  Stijn
Gepost op: 02 september 2007 - 16:10
PHP expert
Om toch geldige css te hebben kan je die transparantie laten schrijven door Javascript.

Offline  vinTage
Gepost op: 05 september 2007 - 00:09
Nieuw lid
reminder:
in je tut staat het opera gedeelte nog steeds fout!

Offline  JoWannes
Gepost op: 05 september 2007 - 13:58
HTML interesse
@ Vintage:
Er staat geen fout in. Ik neem aan dat je het over 0.90 hebt dat jij vindt dat dat .90 moet zijn; maar bij mij werkt dat probleemloos in Opera.  

Zodoende herken ik deze 'fout' niet en zie ik (voorlopig) geen reden om dit aan te passen.

Overtuig me van je gelijk.   

Screenshot: Klik hier

Offline  Jero3n
Gepost op: 14 september 2007 - 14:58
PHP interesse
stijn1989 schreef:
Om toch geldige css te hebben kan je die transparantie laten schrijven door Javascript.


Hoe dan??
Want het zou wel heel lekker zijn als er een manier is om transparantie te gebruiken EN je site nog steeds valid laten zijn.
Natuurlijk kan het ook gewoon met .png plaatjes 

Offline  vinTage
Gepost op: 14 september 2007 - 23:04
Nieuw lid
nikske png files, ie6 snapt die gevaarten niet (en de eerste 100% werkende png fix moet ik nog tegenkomen)

via javascript

if(ie5) document.getElementById('id').filters.alpha.opacity = 50;
if(ns6) document.getElementById('id').style.MozOpacity = 0.5;

Offline  jerone
Gepost op: 16 september 2007 - 13:45
JS gevorderde
Ik gebruik zelf het volgende style script:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. filter:alpha(opacity=70);  /**IE**/
  2. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  /**IE old**/
  3. opacity:0.7;  /**CSS3**/
  4. -moz-opacity:0.7;  /**Mozilla**/
  5. -khtml-opacity:0.7;  /**KHTML**/

Zoals je kunt zien staat bij opacity:0.7 CSS3, dit komt omdat in CSS3 opacity is toegevoegd (Opera ondersteund dit al).
Ook heb ik de KHTML-browsers code erbij gezet.
Trouwens de -moz code is van Mozilla en dus niet alleen ondersteund door Firefox, maar alle Mozilla-browsers.

Om het toch valid te maken gebruik ik eigenlijk altijd dit javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setOpacity(n) {  // set opacity from 0 t/m 100 %
  2. 	return opacity = "filter:alpha(opacity=" + n + ");" + /**IE**/
  3. 	"filter: progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ");" + /**IE old**/
  4. 	"opacity:" + (n/100) + ";" + /**CSS3**/
  5. 	"-moz-opacity:" + (n/100) + ";" + /**Mozilla**/
  6. 	"-khtml-opacity:" + (n/100) + ";"; /**KHTML**/
  7. }
aangeroepen door bijvoorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. setOpacity(70)

Hopelijk hebben jullie hier nog wat aan.

Offline  tim2005
Gepost op: 05 oktober 2007 - 11:28
Nieuw lid
Let er wel op dat je tekst dan ook transparant wordt, en dat kan bij een hogetransparantie slecht uitkomen.

Stel: Zwarte achtergrond met grijs patroon
Stel: tekst is wit
Stel: transparantie met hogewaarde

Gevolg: Je tekst wordt grijs achtig, aangezien wit + zwart grijs is... Het is maar om ff rekening mee te houden  

Offline  Ibrahim
Gepost op: 22 oktober 2007 - 16:21
PHP expert
Dan zet je je tekst toch buiten de transparante div 

Offline  citroen
Gepost op: 31 oktober 2007 - 07:18
Onbekend
Let er vooral op dat Internet Explorer 7.0 geen transparantie toelaat van div's met png achtergrond die alpha blending gebruiken.

Offline  mark92
Gepost op: 08 december 2007 - 16:03
Gouden medaille

Nieuw lid
Met dank aan jerone:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.  
  3. function opacity(t,n){ //'CSS tag','Percentage transparantie(0-100)'
  4.  
  5. 	if(n<0) n=0;        //voor de zekerheid
  6. 	if(n>100) n=100; //idem
  7.  
  8. 	if(document.all){ //IE
  9. 		document.write('<style type="text/css">div.item_child{filter: progid:DXImageTransform.Microsoft.Alpha(opacity='+n+');filter: alpha(opacity='+n+');}</style>');
  10. 	} else if(document.getElementById&&!document.all){ //NS MZ FF etc.
  11. 		document.write('<style type="text/css">'+t+'{opacity:'+(n/100)+'; -moz-opacity:'+(n/100)+';}</style>');
  12. 	} else { //Overigen
  13. 		document.write('<style type="text/css">'+t+'{ -khtml-opacity:'+(n/100)+';}</style>');
  14. 	}
  15. }
  16.  
  17. opacity('div.item_child','100');
  18.  
  19. </script>

en dan zet je dat aan het einde van je head.

(het zal vast een fout zitten, maar dit is het idee. hij doet het overigens wel.)

Offline  jerone
Gepost op: 10 december 2007 - 17:45
JS gevorderde
Onderstaande code is ook mogelijk en maakt geen gebruik van 'document.write'. Tevens te vinden hierzo.

setOpacity
Zet onderstaande in een javascript script:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setOpacity(obj,n) {
  2. 	obj.style.opacity = (n / 100); /**CSS3**/
  3. 	obj.style.MozOpacity = (n / 100); /**Mozilla**/
  4. 	obj.style.KhtmlOpacity = (n / 100); /**KHTML**/
  5. 	obj.style.filter = "alpha(opacity=" + n + ")"; /**IE**/
  6. 	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ")"; /**IE old**/
  7. }

En roep bovenstaande functie aan met:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. setOpacity(obj,70)

Waar 'obj' naar een element wordt verwezen, en '70' het aantal procenten transparantie is.

Voorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var obj = document.getElementById('testDiv');
  2. setOpacity(obj,70)

Offline  grafisch
Gepost op: 22 maart 2008 - 01:38
Nieuw lid
Dus nu de vraag!

hoe zet ik nu de tekst in mijn "child"-div niet transparant?!

Offline  denniseik
Gepost op: 02 februari 2009 - 18:34
Lid
de transparantie kan je toch laten doen door javascript ?

edit: wat anderen al voor mij hebben gezegd

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.039s