Tamás

fancy.heading.generatr

©   Tamás   |   hwsw

És az a mém megvan, hogy minden webkettes logóban Trebuchet MS Bold betűtípus van, az alján helyes kis tükröződéssel, az utolsó betű kötelezően r, és más színnel kell megjelennie? Na, az egyik ügyfelemnek is megvolt.

Olyannyira megvolt neki, hogy kitalálta, hogy ilyen cikkfejléceket akar a portáljára. Ez ugye maga után vonja, hogy bármi is van a cikk címébe írva, annak ilyen giccses tükröződéssel kell megjelennie. A dolog első megoldásaként arra gondoltam, hogy ezt már biztos megírta valaki (így kódol a lusta programozó), úgyhogy elkezdtem keresni a weben kész implementációk után. Nem találtam. Illetve van egy Reflection.js nevezetű cuccos, ami nagyon ügyesen megcsinálja a trükköt JavaScript bűvészkedéssel, de sajnos csak képekre, szövegre nem. (A trükknek egyébként itt annyi a lényege, hogy normális böngészők alatt egy CANVAS tag által létrehozott területre rendereli a cuccot az eredeti kép alapján, Internet Explorerben meg DirectX effektekkel szimulálja ugyanezt). Kitaláltam, hogy akkor majd a szövegből generálok képet egy PHP script segítségével on-the-fly, és akkor azt tükrözöm, de ez meg azért nem jó, mert a baseline alá lelógó betűk miatt hülyén néz ki az egész (ott kezdődik a tükröződés, ahol a lelógásnak vége van, nem a baseline-on). Találtam még egy Web2.0 Logo Creator nevű csodát is (sHaMaLt blogjából kiindulva, köszi!), ez jó lett volna, de ennek meg nincs forráskódja. Úgyhogy körülbelül másfél órányi hekkeléssel (beleértve a GD library használatának megtanulását is), összehegesztettem egy ilyet:

fancy.heading.generatr

PHP script, a logóra kattintva letölthető, haszna egyébként kb nulla, kivéve ha valaki pont ugyanebbe a problémába fut bele, mint én. (Lehet vele pl blogbejegyzésekhez fancy címeket generálni, vagy ilyesmi). Majd egyszer írok hozzá dokumentációt is, de úgyis fel van kommentezve szépen.

RSS: hozzászólások ehhez a bejegyzéshez 10 hozzászólás

Szólj hozzá Te is!

mármint milyen logóra kattintva tölthető le?

csak nem Adblock Plus? az kiszűri a counter szó miatt az urlben..

egyébként: www.sixdegrees.hu/…/fancy.headin…

Az a logó URL-je, nem a scripté De akkor itt egy másik link, ebben nincs counter:

fancy.heading.generatr at six degrees of separation

Oh wow thx Hát ez jópofa Mármint a logó és az adblock egyaránt

Egyébként a magyar politikai elit is tiszta Web2.0:
OrbánViktr

és hogy a másik oldal se maradjon ki:
MedgyessyPétr


Tamás

Egyébként ügyes kis kód, gratula hozzá.


jep AdBlock rlz.

Fancyr is király lett!

bugfix: a nagy ékezetes betűk teteje néha kilógott (bizonyos fontoknál), de most már nem. Tud továbbá most már hosszú címeket több sorba törni.
Hozzászólásod:


Nem vagy bejelentkezve, de...

A)
hozzászólhatsz regisztrálatlanul...

B)
ha regisztrálva vagy, bejelentkezhetsz...