Vytvořte si nabídku Start Windows 7 pomocí CSS3
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Vytvořte si nabídku Start Windows 7 pomocí CSS3Vytvořte si nabídku Start Windows 7 pomocí CSS3

 

Vytvořte si nabídku Start Windows 7 pomocí CSS3

Google       Google       19. 8. 2010       23 994×

Spousta lidí je fascinována tím, kolik zajímavých věcí se dá udělat jen za přispění CSS3. Mnohé prvky uživatelského rozhraní, které vyžadují obrázky proto, aby měly přijatelný vzhled, mohou být nyní stylizovány pouze technologií CSS3. Důkaz? Předvedeme si, jak jednoduše udělat menu podobné nabídce Start ve Windows 7 jen s malým využitím CSS3 a několika ikonek.

Reklama
Reklama

Nejdříve se podívejme na náčrtek, který nám celou situaci přiblíží, a pojďme si ujasnit, do jakých bloků budeme koncept uzavírat.

Rozložíme-li si předpokládané menu, získáme jeden element div, dva neuspořádané seznamy s pár odkazy a několik ikon. Podívejme se, jak jsou seznamy stylizovány.

Kontejner

Kontejner startmenu obsahuje dva neuspořádané seznamy, které slouží jako jednotlivá menu. Obsahuje lineární gradient se třemi základními barvami: světle modrou nahoře, tmavě modrou uprostřed a další odstín světle modré dole. Transparentnosti je dosaženo použitím funkce rgba(), která má čtyři parametry – klasické RGB a opacity (průhlednost). Oba okraje jsou vytvořeny vlastnostmi border a box-shadow.

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
             -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#619bb9;
             background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
             background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

Menu programů

Tento neuspořádaný seznam má bílé pozadí a dva okraje vytvořené pomocí vlastností border a box-shadow. Jeho odkazy, které obsahují ikony a názvy programů, využívají gradienty a stíny upřesněné ve stavu hover.

#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
            box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
            -moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; 
              color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce; 
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#cfe3fd;
             background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
             background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

Menu odkazů

Stejně jako v předchozím případě je menu odkazů poměrně jednoduché na vytvoření. Zajímavý tady zase bude stav hover. Každý odkaz má horizontální gradient se třemi barevnými změnami: tmavě modrá na levé a pravé straně a o kus světlejší modrá uprostřed. Na rozdíl od odkazů v menu programů má zde každý odkaz vnitřní element span, který obsahuje text. Tento element má ještě jeden gradient - vertikálně lineární přechod. Je průhledný v horní polovině a spodní část vychází z velmi tmavě modré až do téměř průhledné světle modré. Kombinace dvou průhledných přechodů pak ve výsledku vypadá přesně jako tlačítko ve Windows 7.

#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
              color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#658da0;
             background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
             background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); 
             }
#links a span { padding:5px; display:block; }
#links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
            background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), 
            color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

Takhle pak vypadá finální výsledek:

Kód v pořádku funguje ve Firefoxu 3.6+, Safari a Google Chrome. S nedostatky se trochu potýká v Opeře a Internet Exploreru.

Pro zájemce je k dispozici demo a zdrojový kód.

Článek je překladem tutoriálu z blogu Janko At Warp Speed.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

3 názory  —  3 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor je moderátorem sekce C++ na Fóru. Věnuje se programování v C++/C#, okrajově PHP, zajímá se o SW/HW novinky a o hudbu na internetu.

Nové články

Obrázek ke článku Facebook spouští službu Marketplace V ČR

Facebook spouští službu Marketplace V ČR

Společná platforma Marketplace usnadní lidem na Facebooku vyhledávání, nákup a prodej použitého zboží na lokální úrovni. Bude tak přímou konkurencí pro weby a aplikace se stejným zaměřením jako je například Letgo, Bazoš, Aukro, Sbazar a další.

Reklama
Reklama
Obrázek ke článku DistrCut – optimalizace pomocí distribuované inteligence

DistrCut – optimalizace pomocí distribuované inteligence

Optimalizační systémy, které jsem dosud popisoval, se týkaly vždy optimalizace na jednom zařízení. Optimalizovalo se dělení tyčového materiálu na jedné pile, vypalování plošného materiálu na jednom plazmovém stroji, řídilo se tavení na jedné elektrické obloukové peci.

Ve výrobním procesu je však často nutné optimalizovat činnost celého výrobního úseku, kde je více různých objektů odlišného typu a koordinovat činnost těchto objektů k dosažení společného cíle, zpravidla kvality finálního výrobku. Řešení tohoto problému umožňuje distribuovaná inteligence.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý