WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   css filter - border på text (https://www.wn.se/forum/showthread.php?t=9250)

FredrikMH 2005-08-09 05:00
Är det möjligt att lägga en stroke på en text i en viss färg?

Jag har hittat Css-filter där man kan göra outer glow och shadow men jag vill ha en kant runt om allting. Är detta möjligt? Eller skulle man kunna göra det på ett fult sätt och lägga samma text bakom men göra den fet eller något. Det rör sig bara om en rad men behövs för att få ett korrekt utseende.

koala 2005-08-09 05:20
Det är väl inte någon hit att göra det i css, eftersom det bara fungerar i Internet Explorer (så vitt jag vet). Att lägga feta bokstäver bakom fungerar inte heller alltid, men har du tur kan det väl gå med just din text. Jag skulle använt en bild.

FredrikMH 2005-08-09 05:43
Bild går så länge jag kan ändra färgerna på text och kanten. Hur jag ska göra det har jag däremot ingen aning om.

Robert 2005-08-09 09:38
Att lägga texten bakom blir inte rätt då dess storlek sväller på ett helt annat sätt. Du måste isåfall lägga 4 kopior av texten bakom, det kan bli ganska snyggt OM det hade gått att använda kantutjämning (jag har gjort så själv. Kolla på sista siten i min footer nedan, på väderkartan. Där ser du vit text med svart kant, men det krävdes som sagt 4 kopior bakom för att få det bra + kantutjämning)

festiz 2005-08-09 12:53
Om du kör php, phpgenerera bilden med GD efter din css-mall.. skulle kunna fungera?

FredrikMH 2005-08-09 17:45
Citat:
Ursprungligen postat av festiz
Om du kör php, phpgenerera bilden med GD efter din css-mall.. skulle kunna fungera?
Färgerna kommer från en xml-fil som php redan läst in så det vore inga problem. Jag har dock ingen aning om hur jag ska göra det. Kanske lika bra att jag exakt berättar vad jag håller på med för att underlätta. Jag gör ett script som öppnar thm-filer (Theme) för Sony Ericsson mobiltelefoner. Filen är egentligen en tar-fil. Nu vill jag visa resultatet för användaren innan personen i fråga laddar ner temat. Detta går att göra med en printscreen men gör allting mycket jobbigt. Då jag enkelt vid kunna godkänna användarnas egna teman utan att ladda ner och pilla i photoshop.

Om ni tar en titt på detta temat:
gallery.mobile9.com/f/19914/

Så ser ni att "Sony Ericsson" och tid/datum har en kant. Det bästa hade nog varit php men css går fint det med.


<!--QuoteBegin--Robert @ Aug 9 2005[/i]@ 09:38

Kolla på sista siten i min footer nedan, på väderkartan. Där ser du vit text med svart kant, men det krävdes som sagt 4 kopior bakom för att få det bra + kantutjämning
[/quote]
Jag ser tyvärr ingen text. Men är nyfiken på hur der ser/såg ut.

koala 2005-08-09 18:08
Citat:
Originally posted by FredrikMH@Aug 9 2005, 17:45
Jag har dock ingen aning om hur jag ska göra det.
Lite lusläsning i php-manualen om GD kan nog vara till hjälp. Bör inte vara allt för svårt att lista ut hur du ska göra med hjälp av kommentarerna där etc.

Tobias Bergius 2005-08-09 20:21
Jag lekte lite: http://www.tobiasbergius.se/lab/css/stroke/_index.html

Förstår inte exakt hur du menar och vad som behöver kunna ändras, men du kan iaf justera färgen på texten och färgen på kantlinjen.

Om du vill att det ska stå annan text och/eller annan bakgrundfärg/bild måste du skapa nya bilder dock.

bo82 2005-08-09 20:51
på den här länken http://www.deltatangobravo.com/ så är rubrikerna bilder.. men jag gissar att han inte sitter och gör bilder i ps varje gång han postar. vet någon hur det går till? kanske är OT eller är det detta ni menar man kan göra i PHP?

koala 2005-08-09 20:55
Citat:
Originally posted by bo82@Aug 9 2005, 20:51
på den här länken gallery.mobile9.com/f/19914/ så är rubrikerna bilder.. men jag gissar att han inte sitter och gör bilder i ps varje gång han postar. vet någon hur det går till? kanske är OT eller är det detta ni menar man kan göra i PHP?
Fel länk? Jag ser inte några rubriker som är bilder... men ja, det är det man kan göra i PHP.

bo82 2005-08-09 20:58
Citat:
Ursprungligen postat av koala
Citat:
Ursprungligen postat av bo82
på den här länken gallery.mobile9.com/f/19914/ så är rubrikerna bilder.. men jag gissar att han inte sitter och gör bilder i ps varje gång han postar. vet någon hur det går till? kanske är OT eller är det detta ni menar man kan göra i PHP?
Fel länk? Jag ser inte några rubriker som är bilder... men ja, det är det man kan göra i PHP.
Du han svara innan jag han edita! Vasst.. Men ja det var fel länk den rätta länken ska vara http://www.deltatangobravo.com/

koala 2005-08-09 20:59
Citat:
Originally posted by Tobias Bergius@Aug 9 2005, 20:21
Jag lekte lite: http://www.tobiasbergius.se/lab/css/stroke/_index.html
Förstår inte exakt hur du menar och vad som behöver kunna ändras, men du kan iaf justera färgen på texten och färgen på kantlinjen.
Om du vill att det ska stå annan text och/eller annan bakgrundfärg/bild måste du skapa nya bilder dock.
Du borde ställa in fix teckenstorlek bara, annars ser det inte bra ut när man ändrar den :)

Tobias Bergius 2005-08-09 21:05
För det första så går det inte. De flesta moderna webbläsare kan ändra textstorleken oavsett vilken enhet den är satt i.

För det andra så borde det gå att höja den. Vanligtvis kommer den nog inte röras alls av besökarna, men de som behöver höja den för att se vad det står får väl stå ut med att bakgrunden syns. Annars ser dom inte överhuvudtaget och det är ju ännu sämre.

Robert 2005-08-09 21:57
Citat:
Ursprungligen postat av FredrikMH
<!--QuoteBegin--Robert @ Aug 9 2005[/i]@ 09:38

Kolla på sista siten i min footer nedan, på väderkartan. Där ser du vit text med svart kant, men det krävdes som sagt 4 kopior bakom för att få det bra + kantutjämning


Jag ser tyvärr ingen text. Men är nyfiken på hur der ser/såg ut. [/quote]
Jag menar siffrorna på kartan...

koala 2005-08-09 22:01
Jag modifierade "Dynamic Heading Generator" så att en simpel border ritas ut. Resultatet kan ses här: dynamisk bild

Jag bifogar källkoden. Tänk på att ange rätt sökväg till teckensnittet som ska användas etc.

koala 2005-08-09 22:02
2 bifogad(e) fil(er)
Ett nytt försök att bifoga källkoden:

koala 2005-08-10 07:14
Motsvarande lösning gjord med CSS (bör dock snyggas till med klasser...):
Kod:
<font style="font-size: 500%;">

<div style="color: #9cf;
position: absolute;
left: 100px;
top: 20px;
z-index: 5;">Vanlig Text</div>

<div style="color: #000;
position: absolute;
left: 99px;
top: 19px;
z-index: 4;">Vanlig Text</div>

<div style="color: #000;
position: absolute;
left: 99px;
top: 21px;
z-index: 3;">Vanlig Text</div>

<div style="color: #000;
position: absolute;
left: 101px;
top: 21px;
z-index: 2;">Vanlig Text</div>

<div style="color: #000;
position: absolute;
left: 101px;
top: 19px;
z-index: 1;">Vanlig Text</div>

</font>
Här fungerar det utmärkt att ändra teckenstorlek med ctrl+scroll utan att resultatet blir fult.


Alla tider är GMT +2. Klockan är nu 14:38.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson