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       22 373×

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

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

Obrázek ke článku Funkcie, makrá a dátové typy vo Windows API

Funkcie, makrá a dátové typy vo Windows API

V druhej časti seriálu o Windows API si povieme niečo o funkciách, makrách a dátových typoch. Spomenieme tiež dôležitý pojem handleru. Pri štúdiu Windows API funkcií je treba mať na pamäti fakt, že pre Microsoft bola spätná kompatibilita jednou z dôležitých priorít.

Obrázek ke článku Instalace nejnovější verze Apache 2.4, PHP 5.6, MySQL 5.6, PHPUnit, XDebug a Memcached na Windows 10

Instalace nejnovější verze Apache 2.4, PHP 5.6, MySQL 5.6, PHPUnit, XDebug a Memcached na Windows 10

Buďte při vývoji efektivní! Pomocí tohoto návodu během chvíle vytvoříte ze svého počítače lokální webový server. Vyzbrojíte jej vším, co budete při práci potřebovat: Apache 2.4, PHP 5.6, MySQL 5.6, PHPUnit, XDebug a Memcached. Je to plná polní pro webové vývojáře s Windows Vista, 7, 8 a 10. Navíc poradíme, jak mít na localhostu více projektů pomocí VirtualHost.

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