pátek 28. února 2014

Zmenšení velikosti PNG obrázků

Často se mi pod ruku dostane obrázek ve formátu PNG, který je obvykle neoptimalizovaný a kvůli průhlednosti musí být právě ve formátu PNG. Výsledný soubor má potom velkou velikost a zbytečně zpomaluje načítání stránky.

Zvykl jsem si tento problém řešit pomocí online nástroje TinyPNG.

Do středové oblasti "Drop your .png files here" přetáhnete soubory a chvíli počkáte. Stránka vám dá najevo, že pracuje a po dokončení operace vám nabídne upravené soubory ke stažení.
Výsledné soubory mají obvykle 40-20% původní velikosti.

Celý proces pro jeden obrázek trvá cca 5 vteřin.

čtvrtek 27. února 2014

Custom checkbox & radio button generator

Narazili jste při kódování webu na potřebu implementovat nestandardní vzhled checkboxu nebo input radio Věc nebyla nikdy jednodušší.

Vzhledem k tomu, že IE8 již končí podpora a tak jej můžeme s veselím odpálkovat, můžeme použít online nástroj CSS Checkbox.

Nástroj na základě vámi dodaných grafických podkladů vytvoří kód potřebný pro implementaci do webu. Druhou možností je využití již předpřipravených radio inputů nebo checkboxů.

Jak na věc?


  1. Otevřete si generátor.
  2. Připravte si soubor - čtvercový obrázek s checkboxem nebo radio buttonem v nezaškrtnuté (nezvolené) verzi. Ten zvolte do Unchecked box.
  3. Připravte si soubor - čtvercový obrázek s checkboxem nebo radio buttonem v zaškrtnuté (nezvolené) verzi. Ten zvolte do Checked box.
  4. Zvolte, jestli se jedná o input radio nebo input checkbox a pokud si jste jistí, že se jedná o obrázky, na něž máte legální nárok, zaškrtněte políčko s malým textem.
  5. Klikněte na Create Checkbox.
  6. Web zachroustá a vám se stáhne soubor s obrázkem, vzorovým html kódem a css, které checkbox naimplementuje.
To, co se stáhne musíte samozřejmě dostat na váš web. Jak již bylo zmíněno výše, v IE8 tato metoda nefunguje.

Web fonts converter

Narazili jste na potřebu naimplementovat na stránky nějaký nestandardní, nesystémový font (písmo)? Pak jistě nejste sami, kdo čelí problému kompatibility ve všech prohlížečích.
Aby výsledné texty vypadaly stejně v IE, Firefoxu, Chrome, Opeře i Safari, musíte použít tento font v několika různých formátech.

Jak na to?

  1. Najděte (získejte, vytvořte, ukradněte... čechům se meze nekladou) soubor s fontem
  2. Font naimplementujte klasicky a zjistěte, že funguje jen někde (font-face)
  3. Otevřete stránku fonts2web a nahrajte do ní soubor s fontem
  4. Klikněte na Convert & download, web převede font do všech potřebných formátů a pošle vám soubor .zip
  5. Rozbalte stažený soubor a obsah .css souborů přidejte do svých souborů s kaskádovými styly a soubory fontů dejte do správného umístění
  6. Pokud něco nefunguje, máte špatně cesty k fontům
Umístění na web probíhá opět přes font-face, akorát s několika různými formáty.

Existuje ještě druhý zajímavý nástroj - Free Font Converter, který převede soubor písma na konkrétní jiný formát, který si zvolíte.

Závěrem článku je nutno podotknout, že ačkoliv jsou nestandardní fonty pěkné, profesionální design na nich nezávisí a dokáže k dokonalosti přizpůsobit fonty systémové.