[CSS] Transparency?

[Heaget]

Beste mensen,

Ik ben nog nooit in deze hoek van GoT geweest en dat heeft een reden. Ik ben niet iemand die normaal met code/script werkt, beetje Flash en HTML gaat nog wel. Tot eergister, m'n baas kwam aanzetten met het geweldige idee de website te vernieuwen en er Joomla voor te gebruiken, leuk spul hoor, maar de CSS code erachter gaat mij echt te ver, ik snap er 20% van misschien.

Anyway, mijn vraag:

code:

.wrapper-bg2 { padding: 0px 15px 0px 15px;  background: #90c5ff; }

Dit stukje code zorgt voor de achtergrondkleur in mijn pagina. Nu ligt er onder deze "laag" ( ik weet niet hoe jullie dat noemen hier ) nog een vaste achtergrond met een plaatje. De bedoeling is dus dat mijn laag die er bovenop ligt een stukje transparant word. ( zodat je dus het achtergrondplaatje erdoorheen ziet ( doh))

Nou ben ik niet ver genoeg met dit soort dingen dat ik kan zeggen "ooohh dan plak je gewoon dit en dat erachter". Dus ik had gezocht op internet en vond dit:

code:

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Lekker mee zitten klooien, maar ik krijg het niet werkend. Het zou zomaar kunnen dat jullie nu ineens heel hard in de lach schieten en gaan vertellen dat ik het he-le-maal verkeerd doe, maar ik heb echt geen idee ( ik ben hier aangenomen als cameraman... )

Alle tips en hulp is welkom!

[RobIII]

Haal gewoon background: #blah weg

.wrapper-bg2 { padding: 0px 15px 0px 15px; background: #90c5ff; }

Oh, je wil 50% zie ik nu... da's andere koek

[ Voor 69% gewijzigd door RobIII op 16-10-2009 11:52 ]

[RobertMe]

opacity moet normaal gesproken werken, behalve dat de tekst in die div ook transparant word, daarvoor hebben ze intussen RGBA en HSLA uitgevonden (bij beide staat de A voor de alpha). Deze word alleen nog niet echt lekker ondersteund.

Een andere optie is die transparante div niet transparant te maken, maar hem een background image te geven wat hetzelfde is als het achterliggende plaatje, alleen dan al met photoshop (of whatever) die kleur erover te leggen waardoor het transparant lijkt. Een mooie demo en uitleg daarvan vind je hier

[Creepy]

CSS.. in PRG? Move -> Webdesign, Markup & Clientside Scripting

[Heaget]

RobertMe schreef op vrijdag 16 oktober 2009 @ 12:51:
Een andere optie is die transparante div niet transparant te maken, maar hem een background image te geven wat hetzelfde is als het achterliggende plaatje, alleen dan al met photoshop (of whatever) die kleur erover te leggen waardoor het transparant lijkt. Een mooie demo en uitleg daarvan vind je hier

dat zou een goeie optie zijn, maar het is zo dat de achtergrond mee veranderd met de beeldschermresolutie, dat is niet mogelijk dus.

[Da Weef]

Neem gewoon een transparante png van enkele pixels als achtergrond voor de div. Voor IE6 kun je dan nog eventueel in een conditional stylesheet iets vergelijkbaar doen als Robert voorstelt.

[Heaget]

Dan zou je er dus dit van moeten maken:

code:

.wrapper-bg2 { padding: 0px 15px 0px 15px;   background: url(../images/transparantje.png); }

[ Voor 5% gewijzigd door Heaget op 16-10-2009 13:41 ]

[Da Weef]

Heaget schreef op vrijdag 16 oktober 2009 @ 13:41:
Dan zou je er dus dit van moeten maken:

code:

.wrapper-bg2 { padding: 0px 15px 0px 15px;   background: url(../images/transparantje.png); }

Inderdaad en dan gebruik je een png met de background kleur die je wilde gebruiken, maar dan met transparantie (fotosjop)

[MoietyMe]

Zet het eens zo neer:

Cascading Stylesheet:

.class {
opacity:.5;
filter:alpha(opacity=50);
}

[Heaget]

En dan die hele regel die er staat weghalen?

[MoietyMe]

Je moet wel de rest van de stijling meegeven natuurlijk

Dit wat ik hier boven poste doet alleen de opacity aanpassen.

[Verwijderd]

Dus dan wordt het geheel:

Cascading Stylesheet:

.wrapper-bg2 { 
padding: 0px 15px 0px 15px;
background: #90c5ff; 
opacity: 0.5; 
filter: alpha(opacity=50); 
}

[MoietyMe]

Die '0' voor '.5' mag je weg laten

[Heaget]

Oke thanks! Het is nu natuurlijk weekend en ik kan wel gaan inloggen op de server, maja dat doen we natuurlijk niet he Maandagmorgen is het het eerste wat ik probeer!

[Cartman!]

Heaget schreef op vrijdag 16 oktober 2009 @ 13:04:
[...]


dat zou een goeie optie zijn, maar het is zo dat de achtergrond mee veranderd met de beeldschermresolutie, dat is niet mogelijk dus.

Eh... waarom precies? Enig idee op hoeveel verschillende resoluties gesurfd wordt? (vergeet niet dat niet iedereen fullscreen werkt op grotere schermen)

[Heaget]

Zo, maandagochtend, heel goed weekend gehad, en hatseflats, ik open de CSS en HTML bestanden, sleutel wat, en tadaaa het werkt! Erg bedankt voor de hulp mensen!

[Bosmonster]

Heaget schreef op maandag 19 oktober 2009 @ 09:35:
Zo, maandagochtend, heel goed weekend gehad, en hatseflats, ik open de CSS en HTML bestanden, sleutel wat, en tadaaa het werkt! Erg bedankt voor de hulp mensen!

En wat heb je dan gesleuteld dat het nu werkt?

[mcDavid]

Beetje mosterd na de maaltijd misschien, maar Joomla-templates zijn echt een ramp. Als je zelf wat wilt maken, zou ik echt eens verder kijken naar een ander CMS. _{(CMSMS is mijn personal favourite)}

[Heaget]

Bosmonster schreef op maandag 19 oktober 2009 @ 12:12:
[...]


En wat heb je dan gesleuteld dat het nu werkt?

in de HTML 2 wrappers weg gehaald, die stonden schijnbaar voor de achtergrond.

mcDavid schreef op maandag 19 oktober 2009 @ 12:19:
Beetje mosterd na de maaltijd misschien, maar Joomla-templates zijn echt een ramp. Als je zelf wat wilt maken, zou ik echt eens verder kijken naar een ander CMS. _{(CMSMS is mijn personal favourite)}

tell me about it, maar m'n baas moet en zal het in Joomla hebben....

[Tjolk]

Ah, zo één van: "Ik heb Joomla ooit gezien en ik vind het helemaal te-gek-cool-gaaf-wauw dus alles zal daar voortaan in gebeuren, ook al heb ik me er niet in verdiept"?

Een ramp, zulke mensen.

[Heaget]

Yessir! Joomla is in principe een prima systeem, hele mooie templates voor te vinden enzo. Maar je moet gewoon alleen doen waar het voor gemaakt is, content managen. Niet heel de CSS overhoop gaan trekken want dat is gewoon een kelere-werk.. Goed, het enige voordeel hieraan is dat ik aardig met CSS overweg begin te raken, iets wat ik nooit had verwacht ( en stiekum vind ik het nog leuk ook )

[mcDavid]

Wacht maar tot je met alleen CSS niet meer uit de voeten kunt en de templates moet gaan wijzigen... Laat staan dat je zelf from scratch een template wilt maken... Dan kun je jezelf wel opvreten!

CMSMS werkt met smarty, een template maken is zo makkelijk als het lorem-ipsum in je ontwerp vervangen door {content}. Letterlijk.

[Tjolk]

Ach, dat geldt voor zoveel CMS'en. Drupal en MODx werken wat dat betreft ook goed. CMSMS heb ik zelf geen ervaring mee, maar dat schijnt inderdaad ook goed te werken. Toen ik voor het eerst een CMS uitkoos kwam ook iemand met Joomla aanzetten, maar aangezien ik zelf een template wilde maken had ik die al héél snel terzijde geschoven.

Overigens heb ik enige tijd geleden gehoord dat de nieuwere versies van Joomla wat templating betreft beter zijn. Kan iemand dat bevestigen?

PS: we gaan wel erg offtopic nu...