[CSS]Ozdoba tekstu Opcje

[Hosiek]

Mam problem, chodzi o to ze chce zrobic ladny tekst w css, nie moge zrobic odpowiedniego, bo moge uzyc albo zwykly, wtedy jest brzydki, albo pogrubiony wtedy jest znowu za gruby, szukam odpowiedniej dekoracji do tekstu w css, chodzili by mi o taki efekt najlepiej (IMG:http://iv.pl/images/78474414370619801284.png)
to jest zrobione w ps (Czciąka: Arial Styl:Twarde: Wielkosc: 12)

[Kildyt]

Czcionka na zdjęciu jest po prostu z efektem wygładzania. Na stronie to już zależy od systemu użytkownika.
Możesz użyć font-face z CSS3 i załadować jakąś czcionkę z pseudo-wygładzaniem.
Możesz także poeksperymentować z text-shadow z CSS3 jeżeli chcesz osiągnąć coś pomiędzy normal a bold.

[cypeczek]

Tylko musisz pamiętać ze każdy może to potem inaczej widzieć zależnie od przeglądarki, bo z CSS3 niestety nie wszystkie sobie radzą (IMG:style_emoticons/default/smile.gif)

[Hosiek]

Dzieki, poproboje tego (IMG:style_emoticons/default/party.gif)

[Damonsson]

uje się nie kreskuje, bo się zostaje ...ujem (IMG:style_emoticons/default/winksmiley.jpg)

Nie ma co się oszukiwać, musisz sporo czasu spędzić, żeby dopasować font do każdej przeglądarki i systemu, jeżeli chcesz uzyskać przyzwoity efekt. Jak chcesz iść na łatwiznę, zainteresuj się magicznym słowem (IMG:style_emoticons/default/czarodziej.gif) cufon (IMG:style_emoticons/default/czarodziej.gif)

Ale jeśli chodzi Ci o 12 Ariala, powinno to w miarę dobrze wyglądać, więc nie wiem czy jest sens.

[modern-web]

Wiem, że to trochę głupi pomysł ale jeśli koniecznie chcesz mieć IDENTYCZNY tekst to może warto podzielić tę treść na poszczególne litery, po czym pokombinować z <span>a</span> ustawiając dla niego odpowiedni background - w tym wypadku obrazek ze znakiem "a"... Zdaję sobie sprawę, że zwiększa to drastycznie transfer, a także ilość kodu na stronie lecz jeśli ktoś przykłada najwyższą wagę do wyglądu witryny to rzeczywiście sposób ten jest najlepszy (efekt identyczny na wszystkich przeglądarkach, a także widoczność w wyszukiwarkach jak dla normalnego tekstu - po to jest właśnie <span>) (IMG:style_emoticons/default/smile.gif)

Pozdrawiam!

Ten post edytował modern-web 21.12.2010, 20:53:22

[Hosiek]

Poroboje z wszystim co mi odpowiedziliscie, dzieki wszystkim bardzo (IMG:style_emoticons/default/guitar.gif)

[Kildyt]

@modern-web traktowałbym ten pomysł tylko w ramach teorii bo osobiście nie wyobrażam sobie takiego czegoś wprowadzać do użytku. (IMG:style_emoticons/default/smile.gif)

@Hosiek, wydaje mi się, że zbytnią wagę przywiązujesz do tego typu rzeczy. Jeżeli jest to newralgiczny punkt strony to daj grafikę, a generalnie użytkownicy nie zwracają uwagi na te sprawy. Taką ma czcionkę i już.

[modern-web]

@modern-web traktowałbym ten pomysł tylko w ramach teorii bo osobiście nie wyobrażam sobie takiego czegoś wprowadzać do użytku. (IMG:style_emoticons/default/smile.gif)

@Hosiek, wydaje mi się, że zbytnią wagę przywiązujesz do tego typu rzeczy. Jeżeli jest to newralgiczny punkt strony to daj grafikę, a generalnie użytkownicy nie zwracają uwagi na te sprawy. Taką ma czcionkę i już.

Ja także... ;P Dlatego podałem ten przykład jako skrajne posunięcie (IMG:style_emoticons/default/aaevil.gif)

Zgadzam się... Jeśli ma to być zwykły portal to po prostu walnij jak najlepszą czcionkę za pomocą CSS. Natomiast jeśli jest to jakieś studio graficzne albo coś co ma wywołać wyjątkowe wrażenie na odwiedzającym to faktycznie mój `czysto teoretyczny` sposób wydaje się najbardziej użyteczny (IMG:style_emoticons/default/haha.gif) (Pamiętaj, że to nie jest to samo co <img src=""/>... Znacznika IMG nie wypozycjonujesz tak jak poszczególnej litery w span)

[Hosiek]

Nie chce mi sie z tym w sumie kombinowac, najlepiej wybrac najlepsza czciake css, zna ktos jakies ustawienia zeby to ladnie wygladalo ?
a gdzie mogle m to grafike wstawilem, jednak nie wszedzie sie da

[modern-web]

[HTML] pobierz, plaintext 
P.TWOJA_KLASA { font-family: arial; font-size: 12pt; color: #000000; font-weight: none; margin: 2pt 2pt 2pt 2pt; padding: 0pt; text-align: left; line-height: 14pt; }
[HTML] pobierz, plaintext 

Pokombinuj z tym (IMG:style_emoticons/default/smile.gif)

Ewentualnie zerknij tutaj: http://code.google.com/webfonts
Może Cię to zaciekawi (IMG:style_emoticons/default/biggrin.gif)

Pozdrawiam!

[Hosiek]

Dobra, dzieki

[Kildyt]

PS @modern-web nie none dla font-weight a normal. (IMG:style_emoticons/default/smile.gif)

[modern-web]

Według podrecznika - tak ;d
Według mnie - none też zadziała (IMG:style_emoticons/default/haha.gif) (a właściwie to nie zadziała, bo normal daje ten sam efekt)

Dzięki za poprawienie ^^

Ten post edytował modern-web 21.12.2010, 22:04:24