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       21 243×

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.

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 Web ostrý jako břitva: Nechte se nakopnout správným směrem!

Web ostrý jako břitva: Nechte se nakopnout správným směrem!

„Nemá smysl se ptát klienta, co chce na webu,“ zostra píše Jan Řezáč v jedné z prvních kapitol knihy. Vysvětluje, že webdesignér je člověk, který má držet otěže vývoje webu pevně v rukou a neměl by se podlomit v kolenech pod tíhou nesmyslných požadavků klienta. Klient rozumí svému byznysu, ale webdesignér musí vědět, jak udělat fungující web, který přinese konverze, umí vydělat peníze, respektive.

Obrázek ke článku Analýza a optimalizace procesů 3

Analýza a optimalizace procesů 3

V minulých článcích jsme si ukázali, jak připravit datový soubor pro analýzu výrobních procesů, která pak bude zdrojem pro jejich optimalizaci. V tomto článku se již budeme zabývat první fází optimalizace procesů, analýzou připravených dat pomocí neuronových sítí. Ukážeme si nejčastější typy sítí, možnosti jejich využití v průmyslových informačních systémech a popíšeme základní parametry ovlivňující jejich učení.

Obrázek ke článku LaTeX 4. – Základy typografie

LaTeX 4. – Základy typografie

Typografie je dnes chápána především jako nauka o písmu a jeho správném užití v sazbě - knižní i počítačové. Do seriálu o LaTeXu jsme ji zařadili proto, že pro správnou sazbu je její znalost nezbytná.

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 © 20032015 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý