MNIEJ Samouczek CSS Projektowanie paska nawigacji menu zręcznego

Ten artykuł jest częścią naszego „Seria samouczków HTML5 / CSS3” - dedykowane, aby pomóc Ci stać się lepszym projektantem i / lub deweloperem. Kliknij tutaj aby zobaczyć więcej artykułów z tej samej serii.

Świat projektowania i rozwoju stron internetowych szybko się rozwija. Widzimy to w ogromnej liczbie nowych rzeczy wprowadzanych codziennie do społeczności (prawie), czy to w przypadku aplikacji, czy nowych ram, które sprawiają, że nasza codzienna praca jako projektantów stron internetowych lub programistów jest bardziej skuteczna i wydajna.

Jedną z tych, które zwróciły moją uwagę z dzisiejszego rozwoju stron internetowych, jest LESS, programowalny język arkuszy stylów, który rozszerza sposób, w jaki piszemy składnię CSS, łącząc niektóre koncepcje programowania, takie jak zmienne, miksy, funkcje i operacje.

Otwiera nowe możliwości pisania składni CSS. Na przykład, stosując miksy w CSS, tak jak robimy to w programie, możemy teraz przechowywać domyślne style i wartości, które można zastosować w całym pliku, gdy tylko jest to możliwe. Dzięki temu nie będziemy musieli ciągle pisać tych samych stylów.

Cóż, zróbmy kilka ćwiczeń z LESS, aby uzyskać lepszy wgląd w to, co ma do zaoferowania.

Projektowanie za pomocą LESS

W tym samouczku postaramy się zaprojektować zgrabny pasek nawigacyjny menu, który jest inspirowany tym w Apple.com. Ponieważ jest „zainspirowany” oryginalnym produktem, pamiętaj, że nasz końcowy produkt samouczka nie będzie dokładnie taki sam jak oryginał.

Aby rozpocząć, możesz najpierw przeczytać poniższe pomocne zasoby. Wyjaśniają podstawowe implementacje języka LESS, które będą pomocne dla Ciebie, zanim przejdziesz dalej do tego samouczka.

• MNIEJ jest więcej: ułatw kodowanie CSS dzięki LESS
• Napisz Better CSS za pomocą Less
• Wprowadzenie do MNIEJ, a porównanie do Sassa

Przygotowanie

Po pierwsze, w tym małym projekcie potrzebujemy kilku istotnych rzeczy, czyli:

1. MNIEJ Edytor tekstu

Będziemy potrzebować edytora tekstu, aby zakodować menu nawigacyjne. Jednak większość edytorów tekstu dostępnych obecnie na rynku (takich jak Dreamweaver, Notepad ++, InType, Sublime Text 2) nie ma jeszcze obsługi .mniej domyślnie rozszerzenia plików, więc składnia może nie być dobrze zaznaczona.

Na potrzeby tego tutoriala użyjemy specjalnego edytora tekstu dla LESS o nazwie ChrunchApp. Możemy otwierać i edytować .mniej pliki rozszerzeń i skompiluj je do statycznego CSS za pomocą tej aplikacji. Ponieważ jest to aplikacja Adobe Air, można ją zainstalować na każdym głównym systemie operacyjnym (Win, OSX i Linux).

W edytorze HTML możesz użyć dowolnego edytora, z którego już teraz wygodnie korzystasz. Osobiście lubię Sublime Text 2.

2. Less.js

Następnie pobierz LESS JavaScript Library z oficjalnej strony, aktualna wersja to 1.2.1. W tym celu umieść go w folderze treningowym.

Następnie połącz plik z dokumentem HTML.

3. Bez prefiksu

Wykorzystamy również kilka funkcji CSS3, aby uzyskać pewne efekty w menu nawigacyjnym, które będą zawierać prefiksy dostawcy (-moz-, -o-, -webkit-) aby wyświetlał się poprawnie w różnych przeglądarkach. Jednak osobiście nie faworyzuję używania prefiksów, ponieważ spowoduje to rozszerzenie pliku CSS.

Z tego powodu postanowiłem użyć wolnej od prefiksów biblioteki JavaScript stworzonej przez Lea Verou, która będzie automatycznie obsługiwać przedrostki dostawcy w tle. Musimy więc jedynie napisać oficjalną składnię z W3C.

Pobierz plik i połącz go z plikiem HTML.

W porządku, wszyscy jesteśmy ustawieni; zacznijmy teraz od strukturyzowania kodu HTML.

HTML Markup

Nawigacja jest dość prosta. Będzie miał pięć menu owiniętych w nieuporządkowany znacznik listy. Otwórz swój ulubiony edytor HTML i umieść następujący znacznik:

MNIEJ Stylizacja

W tej sekcji zaczniemy stylizować nawigację za pomocą języka LESS. Dla tych, którzy są nowicjuszami w języku programowania, pisanie składni CSS za pomocą LESS byłoby trochę dziwne i niewygodne. Ale nie martw się, kiedy już zaczniesz ćwiczyć, z pewnością będzie to bardziej przyjemne niż sposób, w jaki piszemy czysty CSS (to moje doświadczenie, jest też trochę uzależniające).

Przyjrzyjmy się stylowi nawigacji z naszego źródła inspiracji.

Jak widać na powyższym zrzucie ekranu, nawigacja Apple.com ma 6 głównych wspólnych stylów:

• cień
• granica
• rozdzielacz
• gradienty
• efekt zawisu
• tekst

Będziemy przechowywać te style i zapisać je w środku config.less jako styl domyślny Konfiguracja; niektórzy projektanci również mogą to nazwać lib.css co oznacza Biblioteka. Połącz ten plik z naszym dokumentem.

Upewnij się, że umieściłeś go przed biblioteką JavaScript LESS.

Zdefiniuj bazę kolorów za pomocą zmiennych

W tym kroku zdefiniujemy bazę kolorów nawigacji za pomocą zmiennych. Zmienna w LESS jest deklarowana przy użyciu @ symbol.

@ motyw: # 555;

To @motyw zmienna jest naszym standardowym kolorem; użyjemy go w każdy możliwy sposób, aby dopasować idealną kolorystykę i aby kompozycja kolorów stała się bardziej spójna.

Zdefiniuj domyślny styl cienia za pomocą miksów

Jedną z cech, które uwielbiam z LESS, są Mixins. Jest to koncepcja programowania, która przechowuje kilka predefiniowanych stylów, które w LESS mogą być dziedziczone w klasach lub ids później w arkuszu stylów.

.shadow box-shadow: 0 1px 2px 0 @theme; 

W powyższym kodzie nie uwzględniłem prefiksowanej wersji box-shadow właściwość, ponieważ biblioteka wolna od prefiksów obsługuje je automatycznie. Ponadto kolor cienia jest dziedziczony ze zmiennego koloru motywu.

Zdefiniuj styl obramowania z miksami parametrycznymi

Pasek nawigacyjny będzie wymagał wyraźnego koloru obramowania z lekko zaokrąglonym rogiem. Możemy skompilować styl obramowania za pomocą miksów parametrycznych. W rzeczywistości ma taką samą funkcjonalność jak Mixins, jedyną różnicą jest to, że ma również zmienne parametry, więc wartości są bardziej regulowane.

.border (@radius: 3px) border-radius: @radius; border: 1px solid @theme - # 050505; 

W powyższym kodzie ustawiamy domyślną granicę @promień dla 3px i jak wspomnieliśmy wcześniej, wartość tę można zmienić później.

Zdefiniuj styl gradientu, dzielnika i najechania za pomocą operacji

Operacja to po prostu język programowania, w którym możemy zastosować formułę matematyczną, taką jak dodawanie, dzielenie, odejmowanie i mnożenie, aby uzyskać pożądany wynik. Spójrzmy na następujący kod:

.divider border-style: solid; border-width: 0 1px 0 1px; border-color: transparent @theme - # 111 transparentny @ motyw + # 333; 

W powyższym kodzie odejmujemy @motyw zmienna wg # 111, w ten sposób wyjście koloru lewej granicy byłoby nieco ciemniejsze. Podczas gdy prawy kolor obramowania pochodzi z dodania @motyw zmienna z kolorem szesnastkowym # 333, wyjście byłoby lżejsze.

Poziom schematu kolorów

Dla niektórych z was, którzy mogą być pomyleni z formułami, przyjrzyjmy się poniższemu schematowi kolorów, aby uzyskać lepsze zrozumienie:

Maksymalny ciemny ton to # 000 (czarny), podczas gdy maksymalny ton światła jest #fff (biały) i nasza aktualna baza kolorów to # 555. Więc jeśli chcemy, aby baza kolorów była 3 poziomy ciemniejsze od prądu, możemy po prostu odjąć go o # 333. Ten sam sposób można również zastosować do rozjaśnienia koloru.

Następnie użyjemy koloru gradientu.

.gradient tło: liniowy gradient (góra, motyw + # 252525 0%, motyw + # 171717 50%, @ motyw - # 010101 51%, motyw + # 151515 100%);  .hovereffect background: linear-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Zdefiniuj styl tekstu za pomocą miksu strażników

Planujemy mieć 2 kolory na pasku nawigacyjnym, ne ciemny kolor i jedno światło. Stosujemy dwie instrukcje warunkowe dla tekstu przy użyciu Guard Mixins.

Po pierwsze, gdy tekst ma kolor, który ma jasność równą lub większą niż 50%, cień tekstu powinien stać się ciemny, w tym przypadku kolor # 000000.

.textcolor (@txtcolor) when (jasność (@txtcolor)> = 50%) kolor: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Następnie, gdy tekst otrzyma kolor, że jasność jest mniejsza niż 50% cień tekstu zmieni kolor na biały.

.textcolor (@txtcolor) when (jasność (@txtcolor)) 
Importowanie MNIEJ
 
Stwórzmy teraz inny .mniej plik o nazwie styles.less i importuj config.less w tym:
 
@import „config.less”;
 
Dodaj rodzinę czcionek
 
Aby pasek nawigacyjny wyglądał atrakcyjniej, dołączymy nową rodzinę czcionek @ font-face reguła. Zaskakująco, @ font-face reguła jest już obsługiwana od IE6!
 
Tym razem użyjemy czcionki Asap. Pobierz go z kolekcji czcionek Font Squirrel. Następnie wstaw następujące style do naszego niedawno utworzonego styles.less plik.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url (format „fonts / Asap-Regular-webfont.eot? #iefix”) („embedded-opentype”), url („fonts / Asap-Regular-webfont.woff”) w formacie („woff”), adres URL (format „fonts / Asap-Regular-webfont.ttf”) („truetype”), url (format „fonts / Asap-Regular-webfont.svg # AsapRegular”) („svg”); waga czcionki: normalna; styl czcionki: normalny;  
 
Stylizacja funkcji Body with Color
 
Teraz podamy kolor tła ciało (powinien być lżejszy niż baza kolorów), a także określenie rodziny czcionek i rozmiaru czcionki. Efekt możemy osiągnąć za pomocą funkcji kolorów:
 
Poniższy kod rozjaśni tło o 30%.
 
ciało tło: rozjaśnienie (@theme, 30%); font-family: AsapRegular, sans-serif; rozmiar czcionki: 11pt; 
 
 
 
Stylizacja nawigacji za pomocą zagnieżdżonej reguły
 
W LESS jesteśmy w stanie zagnieżdżać style bezpośrednio pod rodzica. Spójrzmy na poniższy kod.
 
The nav tag, który zawiera wszystkie niezbędne elementy do nawigacji, otrzyma następujące style.
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; 
 
Zwróć uwagę, że zamiast podać kilka reguł CSS, włożyłem tylko .granica aby nadać styl graniczny i .cień dodać cień. W rzeczywistych przypadkach te zestawy klas mogą być ponownie użyte w innym elemencie, gdziekolwiek jest to potrzebne.
 
 
 
Następnie podajemy style dla ul w środku nav mieć zero dopełnienia i marginesu. Nie tak dawno podejdziemy do stylu, pisząc coś takiego:
 
nav … nav ul …
 
Nie ma nic złego w tym podejściu, w rzeczywistości robiłem to za każdym razem i jestem z tym całkiem zadowolony. Jednak ta metoda, jak powiedział wielu projektantów CSS, jest werbalna, aw niektórych przypadkach niełatwa do opanowania.
 
Teraz możemy zrobić coś takiego:
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; ul padding: 0; margines: 0; 
 
 
 
Następnie menu zostanie wyświetlone z rzędu za pomocą display: inline własność.
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; ul padding: 0; margines: 0; li display: inline; 
 
 
 
W poniższej składni określamy styl znacznika kotwicy menu i dodajemy nasze predefiniowane style, są to: .kolor tekstu, .rozdzielacz, .gradient.
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; ul padding: 0; margines: 0; li display: inline; a dekoracja tekstowa: brak; wyświetlacz: blok śródliniowy; float: left; szerokość: 156px; wysokość: 45px; wyrównywanie tekstu: środek; wysokość linii: 300%; .textcolor (# f2f2f2); // Możesz zmienić tę linię .divider; .gradient; 
 
W powyższym kodzie stosujemy kolor szesnastkowy # f2f2f2 w których jasność jest uważana za powyżej 50%, więc spodziewamy się, że cień stanie się ciemny (automatycznie). Pozostała część kodu, którą jestem pewien, jest dość oczywista.
 
 
 
Jeśli jednak spojrzymy na bieżący wynik powyżej, każde z menu ma dzielniki, co powoduje, że ostatnia sekcja przelewa się na dół. Musimy więc pominąć styl obramowania dla pierwszego i ostatniego dziecka paska nawigacji.
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; ul padding: 0; margines: 0; li display: inline; a dekoracja tekstowa: brak; wyświetlacz: blok śródliniowy; float: left; szerokość: 156px; wysokość: 45px; wyrównywanie tekstu: środek; wysokość linii: 300%; .textcolor (# f2f2f2); // Możesz zmienić tę linię .divider; .gradient;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Stan unoszący
 
W ostatnim kroku dodamy efekt zawisu. W MNIEJ możemy dodać pseudoelement Jak na przykład :wahać się za pomocą & symbol.
 
nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; .granica; .cień; ul padding: 0; margines: 0; li display: inline; a dekoracja tekstowa: brak; wyświetlacz: blok śródliniowy; float: left; szerokość: 156px; wysokość: 45px; wyrównywanie tekstu: środek; wysokość linii: 300%; .textcolor (# f2f2f2); // Możesz zmienić tę linię .divider; .gradient; &: hover .hovereffect;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Zmień motyw kolorów
 
Oto fajna część LESS. Jeśli chcemy zmienić ogólny motyw kolorów, możemy to zrobić przy mniejszej liczbie zmian linii niż w czystym CSS.
 
W takim przypadku zmienię kolor nawigacji, aby był nieco lżejszy. Po prostu zmień następujące dwie linie.
 
@theme: #ccc; //Zmień to
 
.textcolor (# 555); //I to
 
A oto rezultat.
 
 
 
Skompiluj MNIEJ do CSS
 
Kiedy nadal korzystamy z LESS JavaScript, pobierze .mniej plik i przetłumacz go na statyczny CSS, aby standardowa przeglądarka mogła go zinterpretować. Jest to podwójne zadanie po stronie klienta, nie wspominając już o nadmiarowości i marnowaniu przepustowości. Głównym celem LESS jest przepływ pracy w celu uproszczenia naszej praktyki w kompilacji statycznego CSS, aby był bardziej dynamiczny i programowalny.
 
Tak więc, kiedy zamierzamy umieścić pasek nawigacyjny na stronie internetowej, ważne jest, aby skompilować plik LESS na statyczny CSS.
 
Kliknij Crunch It! duży przycisk.
 
 
 
Zapisz plik .less w naszym pliku ćwiczeń, połącz go z dokumentem HTML i rozłącz .mniej & less.js plik z dokumentu.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; border-width: 0 1px 0 1px; kolor obramowania: przezroczysty # 444444 przezroczysty # 888888;  .gradient background: linear-gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url (format „fonts / Asap-Regular-webfont.eot? #iefix”) („embedded-opentype”), url („fonts / Asap-Regular-webfont.woff”) w formacie („woff”), adres URL (format „fonts / Asap-Regular-webfont.ttf”) („truetype”), url (format „fonts / Asap-Regular-webfont.svg # AsapRegular”) („svg”); waga czcionki: normalna; styl czcionki: normalny;  body background: # a2a2a2; font-family: AsapRegular, sans-serif; rozmiar czcionki: 11pt;  nav margin: 50px auto 0; szerokość: 788px; wysokość: 45px; border-radius: 3px; granica: 1px bryła # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; margines: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; wyświetlacz: blok śródliniowy; float: left; szerokość: 156px; wysokość: 45px; wyrównywanie tekstu: środek; wysokość linii: 300%; kolor: # f2f2f2; text-shadow: 1px 1px 0px # 000000; border-style: solid; border-width: 0 1px 0 1px; kolor obramowania: przezroczysty # 444444 przezroczysty # 888888; tło: gradient liniowy (góra, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
Spójrzmy jeszcze raz na wynik.
 
 
 
I skończyliśmy, nie krępuj się eksperymentować z tym.
 
Wniosek
 
Nauczyliśmy się dzisiaj wielu rzeczy o LESS języku, takich jak:
 

• Zmienne.
• Mieszanki
• Mieszanki parametryczne
• Operacje
• Chronione miksy
• I zagnieżdżone reguły

Chociaż jest wiele rzeczy, które można omówić dalej i wiele możliwości do pokazania i wyjaśnienia, mamy nadzieję, że spodobał Ci się ten podstawowy samouczek.

• Próbny
• Pobierz źródło