Posts with tag Grafika

Jak zjistit, o jaký font se jedná

Mar|30 2010

Narazil jsem na zajímavé řešení problému, který občas trápí nejednoho webdesignéra - jak zjistit jméno fontu z obrázku. Pokud máte data v dostatečném rozlišení, utilitka WhatTheFont může pomoci.

Po uploadu obrázku nabídne několik nejpravděpodobnějších variant fontů a vedle pro srovnání ten váš hledaný. Nástroj nefunguje sice stoprocentně, ale i tak se může hodit.

Tagy:Grafika | Prohlížeče | Počítače



CSS v akci ve čtyřech dílech

Mar|29 2010

Zaoblené rohy, stíny, transformace - to vše bude při tvorbě webu hračkou, jakmile se usadí nová verze CSS3.

Amber Weinberg z Nashvillu je nejen pohledná, ale i šikovná web developerka a bloggerka. V poslední době završila svojí čtyřdílnou sérii článků na téma CSS, které jsou doplněny příklady a obrázky výsledných efektů. V posledním dílu nahlíží i na nejnovější specifikaci CSS ve verzi 3.

Zajímavý přehled CSS a náhled do blízké budoucnosti webu najdete na:

http://spyrestudios.com/css-in-depth-margins-padding-the-box-model/

http://spyrestudios.com/css-in-depth-floats-positions/

http://spyrestudios.com/css-in-depth-all-about-text/

http://spyrestudios.com/css-in-depth-new-css3-styles/

Tagy:Grafika | Internet | Programování | Prohlížeče



Seznam galerií moderních webů

Mar|29 2010

V žádném případě nechci nabádat k vykrádání designu stránek, nicméně jako inspirace nejen při tvorbě grafiky dobře poslouží seznam galerií moderních webů na webu Martina Tomčíka. Seznam k dnešnímu dni obsahuje 92 odkazů, často i s odkazem na RSS feed. Pod těmito odkazy najdete větší či menší množství hotových návrhů stránek, funkčních webů, screenshotů atd.

Sice se tam najdou i nefunkční nebo celkem nezajímavé stránky, ale dost z nich skutečně obsahuje moderní, inspirativní designy, na které je radost pohledět.

Tagy:Grafika | Internet | Programování



Nechte uživatele zmenšit fotky ještě před uploadem

Mar|25 2010

Omezený upload, pomelé připojení uživatele, málo paměti na serveru apod. - může být mnoho důvodů, proč použít JumpLoader.

JumpLoaderJumpLoader je Java aplikace, která je jako applet integrována do webových stránek a umožňuje upravit obrázky na straně klienta, tedy předtím, než jsou nahrány na server.

Důvody, proč volit toto řešení, již byly zmíněny, zároveň se jedná o hotové řešení, které je pro nekomerční využití k dispozici zdarma.

Tagy:Grafika | Internet | Programování



Core AVC - HD filmy i na slabším počítači

Mar| 5 2010

HD kvalita filmů na počítači se starší nebo méně výkonnou grafickou kartou nemusí být jen slideshow. Část výpočtů, které běžně patří grafické kartě, můžete přenést na procesor, který při přehrávání nemusí být využit 100%.

K tomu budete potřebovat aplikaci CoreAVC, softwarový decodér Matrosky (.mkv). Ta ale není zadarmo. Alespoň legálně ne. Nicméně pro milovníky filmů nebude činit $10 takovou investici, narozdíl od koupi nové grafické karty.

Tagy:Zábava | Grafika | Počítače | Filmy



CSS a HTML generátor boxů s oblými rohy (rounded corner box)

Oct|21 2009

Dnes bych rád v rychlosti prezentoval jeden můj nástroj na podporu tvorby webu. Jedná se o generátor HTML a CSS pro boxy s oblými rohy.

Kdo dělá trochu do webdesignu ví, že vyrobit box s oblými rohy není jednoduché, má-li být jeho šířka přizpůsobena obsahu. Když se k tomu přidá stále používaný IE6, který má velké problémy s CSS atributem height: 100%, je vývoj takového boxu téměř nadlidský úkol. A co když má box mít navíc průhledné okolí rohů, aby byl box regulerně zobrazen na jakémkoliv pozadí? Tím se to ještě zesložití.

Já jsem si dal tento týden jasný úkol: Implementovat HTML a CSS tak, aby byly výše zmíněné body dodrženy. Zde jsou:

  • box z libovolné bitmapy (používám PNG, které může být i průhledné)
  • jeho velikost se přizpůsobuje obsahu na výšku i šířku
  • korektně zobrazen ve všech prohlížečích (toto se mi nepovedlo v IE6, místo toho je v případě velikosti závislé na obsahu zobrazen klasický box s jednou barvou; pokud se zvolí fixní šířka nebo výška, je to v pořádku)
  • co nejjednodušší HTML a CSS

Zjeména jsem se zaměřil na obecnost, což mělo za následek trochu dívočeší HTML definici, ale komu vadí deset tagů <b> za sebou? Mě ne.

Pro zjednodušení jsem zvolil na výběr čtyři varianty: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu).

Když už jsem měl po několika hodinách kódování správně navrhnuté HTML a CSS, napadlo mě vytvořit jednoduchý generátor, který by rozřezal zadaný obrázek a vytvořil odpovídající definici HTML a CSS.

Generátor jsem původně chtěl užívat sám, ale nakonec jsem z něho měl takovou radost, že jsem ho dal k dispozici i dalším.

Co tedy generátor umí?

  • rozřeže zadaný obrázek, který si nakreslíte v nějakém grafickém programu nebo vyberete z nabídky
  • zadáte velikost okrajů na každé straně zvlášť
  • zvolíte variantu rozměr: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu)
  • vygenerujete HTML a CSS

Jak vypadají výsledky se podívejte sami.

Tagy:Osobní | Grafika | Internet | PHP | Programování | Prohlížeče | Počítače