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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

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

Google       Google       19. 8. 2010       24 655×

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 Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Největší platforma pro přímý prodej a pronájem domů a bytů Bezrealitky.cz představila novou podobu svého portálu. Redesign zásadně zjednodušuje všechny transakce, mění způsob, jakým zájemci o bydlení komunikují s majiteli nemovitostí, přináší nejpřesnější filtrování nabídek na trhu, ale také umožňuje prověřovat důvěryhodnost zájemců. 

Reklama
Reklama
Obrázek ke článku Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Do ostrého nasazení nařízení GDPR, které upravuje nakládání s osobními údaji, zbývá pár dní, a vzbuzuje vrásky u řady provozovatelů služeb, které pracují s profilací návštěvníků na stránkách a personalizací obsahu. Český personalizační nástroj Samba.ai(dříve Yottly) zajišťující personalizaci webu a prediktivní automatizaci email marketingu je však slovy svého CEO Davida Vyskočila na GDPR plně připraveno. 

Obrázek ke článku Jak se liší metody šifrování dat?

Jak se liší metody šifrování dat?

Jaké výhody má celodiskové a souborové šifrování? A co vám přinese šifrování virtuálního disku? Ochranu důležitých dat řeší firmy různě. Mohou využít přístupových práv, zálohování, VPN nebo šifrování. Právě šifrování považují odborníci na kybernetickou bezpečnost za nejspolehlivější řešení.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý