Recyklace a animace ikon pomocí CSS
V nedávné minulosti se dozvídáme o revolučních technikách pro záchranu požadavku HTTP a KB podobně pomocí obrazových skriptů. Tyto sprites se skládaly z desítek nebo dokonce stovek ikon, uspořádaných v obrazovém souboru, který byl později spojen a sloužil různými způsoby na celé webové stránce.
Dobrou techniku jsme využili a prakticky každý web, který se týká škálovatelnosti, ji využívá.
Díky nástupu vlastností Transformace a přechodu CSS3 můžeme tento krok učinit dalším krokem a pomocí několika stručných řádků kódu přeměnit šablony základních ikon na nové ikony pro budoucí použití a dokonce hodit animaci do mixu pro další bonus !
Technika je stejně jednoduchá a intuitivní jako obrazové skvrny a umožňuje rychlé nasazení nových ikon, aniž by někdy museli měnit obrazové skvrny.
Recyklace ikon pomocí CSS
Podívejte se na tento sprite převzatý z knihovny rozhraní jQuery. Při procházení si všimnete, že mnohé z zde uvedených ikon jsou ve skutečnosti variace na základních šablonách. Jedna ikona by mohla být zastoupena v tuctu různých způsobů a umístěna ve stejném souboru. Mnoho ikon je doslova jen rotační verze jejich rodičů. Dobrou zprávou je, že při využití CSS můžeme použít přesně stejnou techniku, aniž bychom museli zahrnout změny v image sprite.
Z výše uvedeného příkladu můžeme vzít jednu ikonu a znovu ji vytvořit pro vlastní účely, např. Jednoduchý vkus z druhého řádku dolů. S transformační vlastností jsme schopni otočit tento šoupátko 45deg, 90deg, 180deg, zřejmě a neurčitě, abychom vytvořili mnoho různých forem od stejné šablony.
Základní šablona (šipka nahoru):
Následující kód vytáhne knoflíky směrem nahoru z obrazového skřítka a bude sloužit jako základní šablona.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Vytvořte správné arr
Transformace naší šipky 90deg bude ukazovat šipku doprava, jak je ukázáno níže:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Vytvořte šipku vpravo nahoře
Otočte jej jen o 45 ° a dostanete pěkný malý pravý pravý rohový šíp:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Je to tak jednoduché. Pomocí této metody můžeme začít s jednoduchým dvěma ikonami a s velmi malým úsilím vytvořit šestkrát tolik ikon pro použití v našem rozhraní, což je samozřejmě jen počátek toho, co lze udělat.
Několik transformací, nějaké fantazijní umístění a naše rodina ikon vzrostla docela málo!
Přidání animace do mixu
Pro vražedný zážitek můžeme do mixu přidat animaci. Nejen že budeme tyto ikony přeměňovat, převedeme je tak, aby transformace byla viditelná pro uživatele. Podívejme se na další příklad, počínaje znamením plus viděným výše.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Jednoduchá rotace o 45 ° změní ikonu plus na praktickou ikonu.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nyní, když naše transformace funguje správně, můžeme do mixu přidat přechod. Představte si, že máte na svém webu funkci pro sdílení aktuální stránky prostřednictvím různých sociálních sítí. Klepnutím na ikonu plus se otevře seznam možností sdílení. Během otevření seznamu se přechod na jemnou animaci převede do zavřené ikony. Nejlepší implementace, kterou jsem zjistil, je v aplikaci iPad aplikace FontBook. Podívejte se na jejich implementaci:
Je to hvězdné. Podívejme se na to, jak tuto krásu ožít. Začněte pomocí ikony plus vytvořené výše. Chcete-li jej animovat, jednoduše přidejte vlastnost přechodu do ikony. V našem přechodu specifikujeme vlastnost (transformace), trvání (0,2 s) a nakonec jakou funkci časování chceme použít (lineární).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Opět je to tak jednoduché. Nejen, že budeme vytvářet nové ikony pro naši knihovnu pouze s CSS, můžeme animovat a dát život určitému prvku!
Použití opacity pro větší odrůdu
Konečná část recyklace ikon přichází hrát v podobě vlastnosti opacity. Duplikování hlavních ikon pro černobílé vám umožní generovat nekonečný počet odstínů / variant pro použití na vašem webu nebo aplikaci.
Varianta čtyř obrazů (jak je vidět dole) výše uvedeného sprite může být snadno použita k vytvoření deseti krát více ikon a zvýšením nebo snížením krytí můžete je umístit tam, kde to bude zapotřebí, a stále je to vypadat skvěle.
Je čas jít zeleně: recyklovat pomocí CSS
Jak CSS3 získala trakci, moje kopie aplikace Photoshop CS5 začala shromažďovat prach a z dobrých důvodů! Tato technika recyklace ikon umožňuje nepřetržitě nasazovat nové verze a varianty do vašich rozhraní, aniž byste museli otevírat zdrojové soubory a přidávat těžkopádné ikony k stále se rozšiřujícím skriptům.
Doba údržby klesá a váš čas strávený čtením knih, jako je 4hodinový týden práce, stoupá! Je to všechno zlato.
Samozřejmě nejvíce zřejmá nevýhoda je podpora prohlížeče, nicméně, s nedávným tlakem, všichni používat moderní prohlížeče, budeme moci využít nové a vzrušující progresivní techniky. Nebojte se procházet některé příklady této techniky.
Jaké jsou jiné způsoby, jakým jste byli schopni recyklovat vaše webové stránky?