Barevné varianty CSS snadno a rychle [skript]

Občas potřebujete jako přidanou hodnotu webu (nebo jen ze zájmu, pokud je to pro Vás 🙂 vytvořit více barevných variant jednoho vzhledu. Možná to znamená přepisovat celý stylopis a v grafickém editoru upravovat každý jeden obrázek zvlášť. Jelikož mě to samé čekalo taky, napsal jsem si pro ten účel v PHP jednoduchý skriptík, který to zvládne za pár sekund a variant můžu mít doslova mraky.

Co to dělá?

Skriptu předhodíte stávající CSS soubor (pokud jich máte víc, musíte po jednom), skript v něm změní všechny barvičky podle funkce v kódu a uloží ho do výstupního CSS. Zároveň převede barvy i ve všech obrázcích, které v CSS najde a uloží je do nové složky. Zpracovat umí obrázky PNG, JPEG a GIF – paletovým jen převede paletu a zachová průhlednost, TrueColorové mění pixel po pixelu a u nich alfa kanál bohužel zachovat neumí.

Nebudu popisovat, jak to funguje, podstatné jsou tři proměnné a jedna funkce na začátku skriptu:

// source CSS = vstupní, stávající, CSS
$infile = "style.blue.css";

// destination CSS = nové CSS, které skript vytvoří
$outfile = "style.green.css";

// destination dir for images, must exist = adresář pro výstup obrázků,
//   musí existovat před spuštěním skriptu, jinak se obrázky nepřevedou
$outimages = "negative/";


// specify color transformation = funkce, která upravuje barvy -
//   v tomto případě jen prohodí kanály zelené a modré
function transform($color){                                                                                                               
                                                                                                                                          
  $newcolor[r] = $color[r];                                                                                                     
  $newcolor[g] = $color[b];                                                                                                     
  $newcolor[b] = $color[g];                                                                                                     
                                                                                                                                          
  return $newcolor;                                                                                                                       
                                                                                                                                          
}                                                                                                                                         

Jak to spustit

Snadno, pokud máte nainstalované PHP včetně knihovny GD. Pokud nemáte, jak na to hledejte na Google.

Pokud máte, výborně. Oproti zvyklostem nejde o webový skript, ale o shellový skript. Pro linuxáky či jablíčkáře stačí stáhnout skript, umístit ho nejlépe do adresáře s CSS styly, poeditovat výše uvedené proměnné a funkci na začátku skriptu, nastavit spouštěcí práva a spustit.

Pro wokýnkáře to bude o fous náročnější – umístění do složky s CSS a editace parametrů Vás čeká taky, ale samotné spuštění budete muset udělat následujícím příkazem:

php -f transform.php.sh

A to je vše! Pokud se vše povedlo, skript vypsal zpracované soubory a ve složce na vás čeká nový CSS styl a složka s obrázky. Nový CSS styl jen stačí přidat do hlavičky (X)HTML a podívat se, jak to dopadlo!

Skriptík ke stažení alias Download

Licenční ujednání: blablabla.. můžete šířit a upravovat bez omezení.. blablabla.. za nic neručím.. blabla 🙂

transform.php

3 thoughts on “Barevné varianty CSS snadno a rychle [skript]”

  1. Lze doplnit článek nějakou ukázkou, ať si využití umíme představit i my s horší představivostí?

Leave a Reply

Your email address will not be published. Required fields are marked *