Zvolené téma: "Moderní web"

CSS transition a vytvoření jednoduchého JS carouselu

CSS transition a vytvoření jednoduchého JS carouselu

V minulém článku jsem sliboval, že bude další, ve kterém najdete návod na jednoduchý carousel vytvořený za pomoci JavaScriptu a CSS transition. Tak tady je. Pokud si na stránce zascrollujete trochu níž a vyhledáte v pravém sloupci "Mikroblog" a "Nejnovější články", tak přesně to bude výsledek. Pokud se vám metoda fade in/fade out nelíbí, v druhé části článku se můžete podívat, jak slider upravit na posuv ze strany na stranu. Jak potom dostat obě metody do jediné funkce, to si můžete zkusit sami; funkce to budou opravdu jednoduché a jejich úprava nebude nijak složitá. JavaScript zde bude ještě jednodušší než styly; takže asi taková bude náročnost. Ale i tak si všechno krok po kroku projedeme. Se vším nám pomůže knihovna jQuery.

Celý článek

CSS transition: animace přes změnu třídy - základy

CSS transition: animace přes změnu třídy - základy

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu. Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

Celý článek

Tipy na moderní web: Font Awesome, šipky pomocí CSS

Tipy na moderní web: Font Awesome, šipky pomocí CSS

Webdesign je oblast, která se pořád vyvijí a pokud chce člověk držet krok, je potřeba stále studovat nové technologie a využívat vše, co nám nynější prohlížeče dovolí. V dnešním článku si ukážeme jednu kodérskou vychytávku, a to, jak vytvořit jednoduché šipky pouze pomocí css. V druhé části představím piktogramové písmo Font Awesome spolu se stručnou ukázkou použití.

Celý článek

Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua