Dat zal 'm op de een of andere manier liggen aan de prioriteitsregels die in de css-cascades gehanteerd worden. In css-taal heet dat de "specificiteit" van een selector.
O ja, denk ik dan altijd als ik dat lees
- maar ik maak er geen sommen mee en klooi vervolgens op mijn eigen manier vrolijk verder.
Met Firebug kan je precies nagaan welke css-regel hier de border toepast, en daar dan een uitzondering op maken. Dat is de "manier-zoals-het-hoort".
Maar wie er op vertrouwt dat niet iedereen een regeltjes-freak is die de broncode van je pagina's gaat naspeuren op iets minder mooie maar wel zo praktische css die hetzelfde resultaat laat zien, ... (hap lucht) ...
... die kan ook voor een weg van mindere weerstand kiezen.
In jouw geval zal er om het blokje met het pdf-, print- en mail-img een container zitten, met waarschijnlijk al een id, bv.
HTML:
<div id="hulpjes">
<ul>
<li><a href="..."><img src="joomla-imagesmap/pdf.png" width="..." height="..." alt=""></a></li>
<li><a href="..."><img src="joomla-imagesmap/prnt.png" width="..." height="..." alt=""></a></li>
<li><a href="..."><img src="joomla-imagesmap/mail.png" width="..." height="..." alt=""></a></li>
</ul>
</div>
Dan zet je in de css:
Code:
#hulpjes ul li a img {
border: 0 !important;
}
Met het
!important kan je eventuele tegeninstructies ergens anders blokkeren, dan ben je waarschijnlijk van alles af.
=====
hoeveel vakliteratuur heb jij gelezen?
Ehm, geen boek gezien, maar goedgemaakt met regelmatig struinen op internet. En een tijdlang meedoen met het internationale
css-discuss forum, opgezet door de vroege css-goeroe Eric Meyer (
website), met
dit type dialogen. Dat scherpt de hersenpan!
- Ze hebben trouwens ook een geweldige css-wiki met 1001 voorbeelden, demo's, "vakliteratuur"-verwijzingen, enz.!
O, mbt de beeldbewerking: in een vorig leven (toen de eerste digitale camera nog uit de doka moest komen) was ik hoffotograaf van een beeldende kunstenaarskollektief. Schilders werken ook in laagjes, met kleurtemperaturen, contrastverhoudingen, enz. heb ik daar geleerd.
=====
De verlebberende jpg's
jpg verlebberen? op wat voor manier?
Ik zal ze even 5x uitvergroten (met in de png niet het wit, wat het onduidelijker zou maken); kijk:
Links weer de jpg, rechts weer de png. Nu zie je duidelijk het verlebberen: de jpg is door zijn compressiemethode aan het "blurren" geslagen: vlekken en uitlopende kleuren, zoals bv. in het blauw en rood van de vlag. Dat hoort steeds één kleur te zijn, niet met donkerder randjes! Ook de letters en het scheidingsstreepje zijn in de jpg niet gestoken scherp zoals de bedoeling is.
De png gebruikt een andere compressiemethode, en houdt gewoon de opgegeven kleuren vast.
Maar ... het kan verkeren!
Voor grafische dingen zoals dit logo is een png het beste, maar soms (bv. voor foto's) kan een jpg toch prima diensten bewijzen. Eigenlijk moet je per afbeelding kijken wat het beste is, ook gelet op de bestandsgrootte, want die kan uiteenlopen (niet altijd dezelfde kant op!).
=====
en dat witte randje, kan in photoshop met Bewerken - Omlijnen?
Misschien, maar ik weet het niet zeker. Hoe je 't anders wel in Photoshop moet doen weet ik niet, want ik red me met een oude PaintShopPro-6. Daarin gaat het als volgt:
- Een laagje onder het letter-laagje aanmaken met dezelfde letters in het wit.
- En dat nog een keer doen in een tweede laagje er onder.
- In dat tweede laagje het wit kopiëren, en er 1px links naast plakken. En ook een keer 1px rechts ervan inplakken.
- Dit samen kopiëren, en dan 1px erboven inplakken; en ook 1px eronder.
- Nu is er aan alle kanten van de letters evenveel wit-rand. Maar nog wel net zo scherp als de letters.
- Daar kan verandering in komen door er een onscherp-filter op los te laten. Hier werd een Gaussiaanse vervaging toegepast met een "bereik" van 1,20 (iets met het aantal naastsliggende pixels die gemixt worden).
Resultaat (met tijdelijke contrastkleur om te zien waar je zit):
Nu begin het schuiven en scharrelen!
De laagjes van de vlag er onder en de letters erboven aanzetten, de vergroting lekker groot zetten, en dan spelen met waar de "witte schaduw" precies onder de letters komt, en spelen met de transparantie van de witte letter-lagen.
De eerste WL-laag, die met de scherpe witte letters, kan net iets opgeschoven van de andere komen om het mooi te maken. Mijn oog kwam verder uit op 40% en 80% transparantie:
Eerst het laagjes-voorbereidingswerk als PSP-bestand opslaan, zodat er later nog wat veranderd kan worden, en dan alle lagen samenvoegen.
Blijkt uit te komen op in totaal 294 gebruikte kleuren.
- Kan daar wat van gemist worden? Ja! Met terugbrengen tot 256 kleuren (via de reductiemethode "geoptimaliseerd octaal" en "dichtstbij gelegen kleur") is er op het oog geen enkel verschil te zien. Dan doen we dus. En dan opslaan als png.
- Nog even gekeken met smush.it > die kan er nog 5,74% oftewel 255 bytes van af halen. Dan wordt het geen 4,35kB maar 4,1kB.
Alle bitjes tellen!
