[CSS]? Hoe tekst op deze manier automatisch laten opmaken

[Robbeke]

Hoi,

Ik ben bezig met de ontwikkeling van een dynamische website. Het is de bedoeling dat menu-items in een mySQL database geplaatst worden en geparsed worden via PHP, om zo makkelijk items te kunne toevoegen en verwijderen.

Het probleem is echter dat ik een design gemaakt heb in Photoshop en ik niet weet hoe ik het gebruikte lettertype moet genereren. Heb al geprobeerd met andere opmaak maar dan komt het veel minder goed over.
Het lettertype is gewoon Arial Wit, maar er zit een 1 Pixel zwarte rand rond.

Iemand een idee hoe dit in CSS mogelijk is? heb al geprobeerd met border maar dit werkt niet

tnx in advance

[Bosmonster]

Kan niet... Niet zo'n handig design gemaakt dus

[Blauw]

dit is wel heel laag niveau

p{
font: 11px arial;
color: white;
}

EDIT: owwacht, je hebt het in photoshop gedaan

[ Voor 27% gewijzigd door Blauw op 01-07-2004 15:30 ]

[Verwijderd]

Dingen zoals dit dus: http://www.ssi-developer.net/css/visual-filters.shtml

<span style="FILTER: Glow(Color=#000000, Strength=1); width:200px;font-size:20pt;color:#ffffff;">Glow Filter</span>

Glow Filter

edit: nee, niet echt een aanrader om te doen, niet crossbrowser, valideert nimmer, ranzige CPU/resources hog etc. Het was ook meer om aan te tonen dat het wel kán. Dat je beter voor andere oplossingen kan kiezen is wel duidelijk...

[ Voor 92% gewijzigd door Verwijderd op 02-07-2004 01:53 ]

[Verwijderd]

Verwijderd schreef op 01 juli 2004 @ 15:30:
Dingen zoals dit dus: http://www.ssi-developer.net/css/visual-filters.shtml

Volgens mij zijn deze filters niet echt firefox-compatible...over andere browsers kan ik niks zeggen, maar zou het IE only zijn, dan is dit niet zo netjes natuurlijk.

Volgens de W3 CSS validator:

quote: http://jigsaw.w3.org/css-...ofile=css2&usermedium=all

Fouten
URI : http://217.120.48.160/filters.html

* Regel: 8

Parse Error - Color=#000000, Strength=1)

^{Dan mats ik je met die # bij color=ffffff}

[ Voor 97% gewijzigd door Verwijderd op 01-07-2004 15:48 ]

[disjfa]

Jozzz schreef op 01 juli 2004 @ 15:29:
dit is wel heel laag niveau

EDIT: owwacht, je hebt het in photoshop gedaan

Ja maar hoe wil je de zwarte rand eromheen krijgen dan

[Bosmonster]

Jozzz schreef op 01 juli 2004 @ 15:29:
dit is wel heel laag niveau

p{
font: 11px arial;
color: white;
}

EDIT: owwacht, je hebt het in photoshop gedaan

En die 1 pixel zwarte rand eromheen zie je over het hoofd denk ik

Het is wel handig te weten wat de mogelijkheden en beperkingen zijn van HTML/CSS voordat je een ontwerp gaat zitten maken.

[Blauw]

Bosmonster schreef op 01 juli 2004 @ 15:32:
[...]


En die 1 pixel zwarte rand eromheen zie je over het hoofd denk ik

Ook dat nog

[Robbeke]

bedankt voor de reacties, maar ik ga het eens proberen op de manier dat euss het voorstelde.

[Bosmonster]

Bedenk dan dat het traag is (zeker als je er hele menu's mee wilt vullen) maar belangrijker: incompatible.

De verschillende IE versies gaan er zelfs anders mee om. IE-filters zijn GEEN dingen die je in een productie-omgeving toe wilt passen

Bovendien geeft die Glow een verre van strak 'pixel' effect... het maakt er eerder een ranzige puinhoop van.

[ Voor 19% gewijzigd door Bosmonster op 01-07-2004 15:49 ]

[OkkE]

Misschien dat het evt. een mogelijkheid is om on-the-fly images te maken met PHP, en dan eerst de zwarte tekst die iets groter is als de witte?

Anyways, ik zou m'n ontwerp aanpassen.

[Blaise]

Je kan eventueel ook verschillende lagen tekst over elkaar heenzetten met absolute of relatieve positionering, en dan de onderste laag zwart bold en de bovenste laag wit met een extra spacing.

(maar ik denk dat je beter het ontwerp kan aanpassen)

[Spruit_elf]

wat je ook kan doen, is een custom font kiezen dat allleen uitde buitenste lijnen bestaat
zoiets als dit http://www.1001fonts.com/font_details.html?font_id=40

en dan color: white; background: black;
oid

ik weet niet hoe custom fonts ondersteund worden, maar volgens mij is het wel mogelijk om zoiets te gebruikn

maar idd ik zou me ontwerp aanpassen

[ Voor 7% gewijzigd door Spruit_elf op 01-07-2004 19:42 ]

[djluc]

Is het geen idee om die teksten met behulp van GD-lib en een scripttaal als PHP automatisch aan te laten maken? Uiteraard sla je de gegenereerde afbeeldingen op de server op als cache.

[crisp]

puur HTML en CSS:
Glow FilterGlow FilterGlow FilterGlow FilterGlow FilterGlow Filter

[T-MOB]

crisp schreef op 01 juli 2004 @ 21:32:
puur HTML en CSS:
Glow Filter

LOL!

offtopic:
ik heb zelf ook nog zitten kutten met fontsize, letterspacing en 2 layers. 4 layers is natuurlijk über!!! Nooit meer geklaag dat je dingen niet in 4-voud hebt aangevraagd

[Bosmonster]

Leuk 3D effect

[LEiPiE]

Als je toch PHP hebt draaien kun je eens kijken naar de GD lib en dan een scriptje maken dat on-demand er een titel uitspuugt (en plaatje opslaat als soort van cache, dat je niet voor elke refresh hetzelfde plaatje maakt )
voordelen:
- je hoeft niet elke dat er een nieuwe kop nodig is een nieuw plaatje te maken
- je kunt met je titel doen wat je wilt (kleurverlopen e.d.)
nadelen:
- werkt niet met een echt dynamische vormgeving (als in: als men in de browser 't font groter zet dan gaan de letters niet mee... heel misschien dat je dat met javascript kunt uitlezen, naar ene php script kunt sturen en in een sessie zetten of zo en daarmee dan weer andere fontsizes genereren, maar ik denk dat wel een behoorlijke omweg is )
- is uiteraard iets zwaarder voor zowel gebruiker als server

(heb helaas geen werkend voorbeeld meer op dit moment.. ik doe tegenwoordig alles met zo min mogelijk plaatjes )

[Verwijderd]

misschien heb je hier wat aan?

http://www.alistapart.com/articles/dynatext/