HTML w stylu jabłkowym. Przyciski CSS w stylu Apple
Wstęp
Jeśli chodzi o design, jest jedna firma, której nie sposób nie zapamiętać. Taka jest firma Apple – każdy jej produkt jest efektem pracy zespołu projektantów. Strona internetowa tej firmy również zawsze przyciągała uwagę.
Na tej lekcji zrobimy galerię - pokaz slajdów „a la” Apple. Mniej więcej to samo jest używane na stronie Apple do prezentacji produktów firmy. Do jego stworzenia nie potrzebujemy PHP ani bazy danych.
KROK 1 - XHTML
Przyjrzyjmy się bliżej znacznikom XHTML:
Pomysł jest bardzo prosty - istnieją dwa główne kontenery DIV - jeden z id="menu" zawiera miniatury, drugi "slajdy" zawiera same slajdy.
Aby dodać nowy slajd, wystarczy dodać nowe elementy do obu kontenerów. Slajdy - zdjęcia w formacie JPG, miniatury - przezroczyste PNG. Możesz jednak użyć innych formatów.
Możesz także wkleić dowolny kod HTML. Na przykład możesz utworzyć odnośnik do konkretnego slajdu w formie obrazu.
Bardzo ważne jest, aby slajdy miały określoną wysokość i szerokość - na ich podstawie jQuery określa obszar przewijania.
Zwróć także uwagę na elementy figurek LI. Do pierwszej przypisana jest klasa fbar, która wyświetla pionową kreskę podziału. Inne elementy mają przypisaną klasę menuItem i służą jako przyciski sterujące pokazem slajdów.
Przejdźmy do następnego kroku.
Krok 2 – CSS
Przyjrzyjmy się naszemu arkuszowi stylów.
Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Reset strony */ margines:0px; padding:0px; ) body( /* Ustawienie domyślnego koloru tekstu, tło i stos czcionek */ kolor: #444444; rozmiar czcionki: 13 pikseli; tło: #f2f2f2; rodzina czcionek: Arial, Helvetica, bezszeryfowa */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; promień-dół-lewy:4px; -webkit-border-promień-dół-lewy:4px; 4px; -moz-border-promień-dolny prawy: 4px;:4px; obramowanie-dolny-prawy-promień:4px; obramowanie:1px jednolite białe; tło:url(img/panel.jpg) powtórz-x dolny środkowy #ffffff; overflow:hidden; ) #slides( /* To jest obszar slajdu */ wysokość:400px; /* jQuery zmienia później szerokość na sumę szerokości wszystkich slajdów. */ szerokość:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* To jest pojemnik na miniatury */ wysokość:45px; ) ul( margines:0px; dopełnienie:0px; ) li( /* Każda miniatura jest elementem li */ szerokość:60px; display:inline -block; styl listy: brak; wysokość: 45 pikseli; przepełnienie: ukryty; ) li.inact:hover( /* Stan nieaktywny, podświetlony po najechaniu myszką */ tło:url(img/pic_bg.png) powtórz; ,li.act:hover( /* Aktywny stan kciuka */ back:url(img/active_bg.png) no-repeat; ) li.act a( kursor:default; ) .fbar( /* Lewy- najbardziej pionowy pasek, obok pierwszej miniatury */ szerokość:2px; tło:url(img/divider.png) bez powtarzania w prawo; ) li a( display:block; tło:url(img/divider.png) no- powtórz w prawo; wysokość: 35 pikseli; górna część dopełnienia: 10 pikseli;
W tym arkuszu stylów użyliśmy kilku właściwości CSS3:
*box-shadow, w rogach galerii znajduje się mały cień. Korzystając z tej właściwości - musisz podać współrzędne X i Y (tutaj 0 0), rozmycie (w naszym przykładzie 3px) i kolor cienia;
* promień obramowania, okrągłe obramowania na dole galerii.
Niestety, te właściwości działają obecnie tylko w przeglądarkach Safari, Chrome i Firefox.
Teraz czas na magię jQuery.
KROK 3 – jQuery
Będziemy potrzebować następującego kodu:
$(dokument).gotowy(funkcja())(
/* Ten kod jest wykonywany po całkowitym załadowaniu DOM */
var totWidth=0;
var pozycje = nowa tablica();
$("#slajdy .slajd").each(funkcja(i)(
/* Przejdź przez wszystkie slajdy i zapisz ich skumulowane szerokości w totWidth */
pozycje[i]= totWidth;
totWidth += $(this).width();
/* Tablica position zawiera przesunięcie przemienne każdego slajdu od lewej części kontenera */
if(!$(this).width())
{
alert("Proszę podać szerokość i wysokość wszystkich obrazów!");
zwróć fałsz;
}
});
$("#slajdy").width(totWidth);
/* Zmień szerokość elementu div kontenera na dokładną szerokość wszystkich slajdów razem wziętych */
$("#menu ul li a").click(funkcja(e)(
/* Kliknij miniaturę */
$("li.menuItem").removeClass("akt").addClass("nieakt");
$(this).parent().addClass("act");
var pos = $(this).parent().prevAll(.menuItem).length;
$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Rozpocznij animację przesuwania */
e.preventDefault();
/* Zapobiegaj domyślnej akcji łącza */
});
$("#menu ul li.menuItem:pierwszy").addClass("akt").siblings().addClass("nieakt");
/* Podczas ładowania strony oznacz pierwszą miniaturę jako aktywną */
});
Główną ideą jest to, że slajdy powtarzają się cyklicznie, sumuje się szerokość slajdów i tę szerokość przypisuje się do kontenera. Ponieważ slajdy są wyrównane do lewej strony, mają dużo miejsca, aby usiąść obok siebie.
Po kliknięciu miniatury skrypt oblicza, który slajd wyświetlić, i przewija go, przypisując ujemną wartość dopełnienia za pomocą metody animate.
Tylko 40 linii kodu i nasza galeria pokazu slajdów jest gotowa!
Wniosek
Stworzenie super pięknej galerii w stylu Apple zajęło nam tylko trzy kroki. Może ozdobić każdą stronę internetową.
Projekt Yabłoko zawsze cieszył się dużym zainteresowaniem moich klientów. Jeśli chodzi o projekt, często słyszę: „Potrzebuję prostego projektu z jasnoszarym tłem” i podam jako przykład witrynę apple.com.
Jeśli trochę poszperasz po ich stronie, znajdziesz kilka naprawdę ładnych niebieskich przycisków. Tam są one wykonane w formie, więc jeśli chcesz mieć takie same na swojej stronie internetowej, będziesz musiał użyć Photoshopa.
Więc układam przyciski w czystym CSS:
Przycisk Apple (kursor: wskaźnik; dopełnienie: 3px 10px; dekoracja tekstu: brak; kolor: #fff; rozmiar czcionki: 13px; cień tekstu: 0 -1px 1px rgba(0 , 0 , 0 , .3) ; obraz tła :-webkit-linear-gradient(#52A8E8, #377 AD0 #377 AD0, #52A8E8) ; obraz tła: -o-linear-gradient(rgb (82, 168, 232), rgb (55, 122) , 208); kolor tła: #52A8E8; -moz-promień-obramowania: 23px; promień-obramowania: 1px stały #205 59A ; 2px rgba(0, 0, 0, .5), wstawka 0 1px 0 rgba(255 , 255 , 255 , .3) ; .apple-button :hover , .apple-button :focus ( obraz tła :-webkit -linear-gradient(#54A1D8, #196 7CA ) ; obraz tła :-moz-linear - gradient(0% 100% 90deg, #196 7CA, #54A1D8) obraz tła: -o-linear-gradient(rgb (84, 161, 216) , rgb (25, 103, 202)); : #52A8E8 ; cień ramki: 0 1px 0 rgba(255, 255, 255, .6), wstawka 0 1px 0 rgba(255, 255, 255, .3); ) .apple-button :aktywny ( kolor tła : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255, 255, 255, .5) , wstawka 0 2px 5px rgba(0, 0, 100, .5) ; )
Demo: przykład na żywo (spróbuj najechać na niego kursorem i kliknąć)
Kilka słów o kompatybilności między przeglądarkami. Ponieważ użyliśmy właściwości gradientu CSS, mogą pojawić się pewne problemy podczas wyświetlania w starszych wersjach przeglądarki Opera, a box-shadow jest właściwością CSS 3.
MiszaW ostatnich latach przez długi czas nie wiedziałem co zrobić ze stroną internetową, gdyż nie przynosi ona praktycznie żadnych zysków, jednak ostatnio uświadomiłem sobie, że moją misją jest promowanie rozpowszechniania WordPressa. W końcu WordPress to najlepszy silnik do tworzenia stron internetowych - zarówno dla tych, którzy są gotowi skorzystać z wbudowanej struktury tego CMS-a, jak i dla tych, którzy preferują rozwiązania headless.
Sam zetknąłem się z WordPressem w 2009 roku. Organizator. Nauczyciel w szkołach Epic Skills i LoftSchool.
Jeśli potrzebujesz pomocy ze swoją stroną internetową, a może nawet stworzenia od podstaw w WordPress / WooCommerce - . Ja i mój zespół zrobimy dla Ciebie wszystko na najlepszym poziomie.
Kult Apple nie pozostawia nikogo obojętnym i nie oszukujmy się: jednym z kluczowych czynników popularności Apple jest ich unikalny design. Zaprojektowane przez Apple w Kalifornii pokazuje, jak projektanci traktują swoje produkty jako sztukę.
Cupertino, Kalifornia — 16 listopada firma Apple ogłosiła wydanie nowej książki w twardej oprawie zatytułowanej „Designed by Apple in California”. Dwie dekady innowacji projektowych uchwycono na 450 fotografiach przeszłych i obecnych produktów firmy, od iMaca (1998) po Apple Pencil (2015). Książka powstawała 8 lat i została poświęcona pamięci Steve’a Jobsa.
„Pomysł stworzenia czegoś ważnego dla ludzkości motywował Steve'a od samego początku, ta idea jest naszym etosem i celem, z jakim Apple podąża w przyszłość” – mówi Jony Ive.
„Designed by Apple in California” to wynik ścisłej współpracy wielu zespołów projektantów i specjalistów z zupełnie różnych dziedzin. Wszyscy mają nadzieję, że dzięki tej książce ludzie zrozumieją, jak i dlaczego produkty Apple są tworzone i istnieją. Wszystkie zdjęcia zostały wykonane przez Andrew Zuckermana w technice, którą określa jako „styl celowo skromny”. Zdjęcia ilustrują szczegóły procesu projektowania, a także same gotowe produkty.
To książka o projektowaniu, ale nie o samych projektantach, procesie twórczym czy rozwoju produktu. Obiektywnie odzwierciedla styl, wizerunek i ideologię projektowania Apple. Wiele produktów wygląda tak przejrzyście, prosto i logicznie, że wydaje się, że nie mają rozsądnej alternatywy. Dla każdego urządzenia przemyślana jest nawet konstrukcja narzędzia, za pomocą którego jest wykonane.
„Jako projektanci żyjemy przyszłością, kochamy to, co już zrobiliśmy i mamy obsesję na punkcie tego, czego jeszcze nie zrobiliśmy”.
„Jedną z najważniejszych rzeczy, których nauczyliśmy się przez 20 lat wspólnej pracy, jest potrzeba wzajemnego słuchania, ponieważ najzdolniejsze pomysły to często te, które mówią bardzo, bardzo cicho”.
Zaprojektowana przez Apple w Kalifornii to limitowana edycja książki dostępna w dwóch formatach: małym (25,9 x 32,4 cm) za 199 dolarów i dużym (33 x 40,6 cm) za 299 dolarów. Drukowany jest na specjalnie wyprodukowanym papierze o specjalnej kolorystyce i matowo posrebrzanych krawędziach. Sprzedawane wyłącznie na Apple.com w USA, Australii, Wielkiej Brytanii, Niemczech, Hongkongu, Korei, Francji, Japonii i na Tajwanie oraz w wybranych sklepach Apple.
Witajcie drodzy czytelnicy! Projektowanie i tworzenie stron internetowych rozwija się bardzo szybko. Każdego dnia widzimy coraz więcej nowych produktów, czy to aplikacji, czy nowych usług, które czynią nasze życie online bardziej produktywnym i wygodnym. A projektowanie stron internetowych to po prostu nieograniczona przestrzeń, ograniczona jedynie talentem i umiejętnościami „artysty” (projektanta). Zatem dzisiaj porozmawiamy o LESS – dynamicznym języku znaczników stylów, który uprości pisanie stylów CSS.
LESS jest nadzbiórem CSS. Oznacza to, że dowolny kod CSS jest prawidłowy LESS, ale dodatkowe elementy LESS nie będą działać w zwykłym kodzie CSS. To świetnie, bo w istniejącym CSS już obowiązuje kod LESS, co zmniejsza barierę wejścia w nową technologię.
LESS dodaje wiele przydatnych właściwości dynamicznych do . Wprowadza zmienne, operacje, elementy i miksy. Możliwość modułowego pisania arkuszy stylów pozwoli Ci zaoszczędzić wiele kłopotów. 
LESS sprawia, że style pisania są znacznie łatwiejsze. Na przykład, używając miksów, tworzymy coś w rodzaju funkcji, które mogą przyjmować argumenty. Mieszanki umożliwiają włączenie wszystkich właściwości klasy do innej klasy poprzez proste dołączenie nazwy klasy jako wartości jednej z właściwości.
1 | Zaokrąglone rogi (@promień: 5px) ( |
Skompilowany CSS będzie wyglądał następująco:
1 | #nagłówek ( |
Załaduj bibliotekę prefix-free.js i połącz ją z indeksem.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Na tym zakończmy przygotowania i przejdźmy od razu do tworzenia menu w stylu Apple.com
znaczniki HTMLUkład menu jest dość prosty. Menu opiera się na liście nieuporządkowanej. Otwórz edytor HTML i wklej ten kod:
1 |
W tej sekcji zaczniemy pisać kod menu w języku LESS. Ci, którzy dopiero zaczynają programować, zarówno w pisaniu, jak i w składni LESS, nie martwcie się, postaram się wszystko rozłożyć na czynniki pierwsze, aby było jasne. Być może nawet komuś spodoba się ten sposób pisania stylów dla witryny, ponieważ jest naprawdę bardziej produktywny.
Przyjrzyjmy się, z jakich elementów będzie składać się menu: 
Jak widać na powyższym zrzucie ekranu, nawigacja Apple.com składa się z 6 głównych części:
- Używany jest cień;
- Granica;
- Separator pomiędzy pozycjami menu;
- Gradient tła;
- Efekt przyciemnienia po najechaniu myszką;
- Tekst menu.
Stylów pisanych można używać na dwa sposoby:
- Schrupać
Ważne: w przypadku korzystania z pierwszej metody plik Style.less musi zostać dołączony przed dołączeniem biblioteki less.js! Nie zapomnij także połączyć się bez prefiksu.
Zatem łączenie stylów wygląda następująco:
1 |
|
Wykorzystamy 2 pliki: config.less w nim zdefiniujemy wszystkie zmienne, miksy itp., po czym zaimportujemy go do drugiego (styles.less), w którym będziemy już tworzyć style dla elementów menu.
Teraz spójrzmy na kod w config.less. Zdefiniujmy kolor bazowy menu za pomocą zmiennych. Zmienna w LESS jest deklarowana przy użyciu symbolu @.
W powyższym kodzie nie umieściłem przedrostka dla box-shadow , biblioteka bez prefiksów automatycznie go doda. Dodatkowo kolor cienia jest dziedziczony z koloru zmiennej @theme.
Zdefiniujmy styl obramowań menu za pomocą miksów z parametremDo naszego menu będziemy potrzebować obramowania z zaokrąglonymi narożnikami. Miksowanie z parametrem - właściwie ma tę samą funkcjonalność co proste miksowanie, z tą tylko różnicą, że posiada również zmienny parametr.
1 | Obramowanie(@promień: 3px) ( |
W powyższym przykładzie ustawiliśmy domyślny @radius na 3 piksele i, jak powiedzieliśmy, wartość tę można zmienić.
Zdefiniuj styl gradientu, separatora i najechania za pomocą operacjiW LESS możesz używać operacji do zwiększania, zmniejszania, dzielenia i mnożenia zarówno wartości właściwości, jak i kolorów, co pozwala określić złożone relacje między właściwościami, aby osiągnąć pożądany wynik. Przyjrzyjmy się poniższemu kodowi, który ustawia właściwości separatora menu:
1 | Dzielnik ( |
W powyższym przykładzie odejmujemy kolor #111 od zmiennej @theme, więc lewa strona separatora będzie nieco ciemniejsza niż kolor bazowy, a prawa strona będzie jaśniejsza. Oto rodzaje manipulacji, które możemy wykonać za pomocą koloru szesnastkowego.
Aby manipulacja kolorami była bardziej przejrzysta, spójrzmy na schemat kolorów: 
Maksymalny ciemny kolor to #000 (czarny), maksymalny jasny kolor to #FFF (biały), a kolor bazowy to #555. Jeśli więc chcemy, aby kolor był o trzy poziomy ciemniejszy, odejmiemy #333 .
Teraz style gradientu:
1 | Gradientowe ( |
Planujemy użyć 2 kolorów tekstu i kolorów cienia tekstu. Jedna opcja jest używana, jeśli tło menu jest jasne, a kolor tekstu jest ciemny i odwrotnie.
Po pierwsze, jeśli kolor tekstu nie ma jasności równej lub większej niż 50%, to cień powinien przyciemnić się, w tym przypadku kolor #000000.
Na tym etapie kończymy tworzenie pliku config.less i przechodzimy do tworzenia plikustyles.less
Importuj bez konfiguracjiStwórzmy plik o nazwiestyles.less i najpierw dołączmy do niego już utworzony plik config.less w następujący sposób:
Na chwilę obecną efekt naszej pracy wygląda tak. 
Jeszcze niezbyt atrakcyjne. Ale jest jeszcze wiele przed nami.
Podstawowy styl menu z zagnieżdżonymi regułamiW LESS możemy zagnieździć style dowolnego elementu bezpośrednio w stylu rodzica. Znakiem nawigacyjnym jest nav specyfikacja HTML5, która zawiera wszystkie niezbędne elementy do nawigacji. Oto jego stylizacje:
1 | nawigacja ( |
Zauważ, że zamiast pisać mnóstwo reguł CSS, po prostu zdefiniowaliśmy wysokość, szerokość i dopełnienie. Podczas gdy wybieramy obramowanie i jego styl, a także cień za pomocą miksów, podajemy nazwę klasy .border i .shadow, a reguły tych klas, które napisaliśmy w pliku config.less, są dodawane do nav klasa. 
1 | nawigacja ( |
Jednak w LESS dziedziczenie przebiega inaczej, łatwiej i bardziej logicznie zrozumieć:
1 | nawigacja ( |
Jak widać na obrazku elementy listy li są ułożone pionowo, natomiast my potrzebujemy ich ułożyć poziomo. Aby to zrobić, ustaw właściwość display:inline;
1 | nawigacja ( |
1 | nawigacja ( |
W powyższym przykładzie używamy koloru szesnastkowego #f2f2f2, ten kolor ma jasność ponad 50%, więc cień zostanie automatycznie ustawiony na czarny. Reszta kodu, jestem pewien, jest dość oczywista. 
Li (
wyświetlacz: wbudowany;
A (
dekoracja tekstu: brak;
wyświetlacz: blok inline;
pływak: w lewo;
szerokość: 156px;
wysokość: 45px;
wyrównanie tekstu: do środka;
wysokość linii: 300%;
.rozdzielacz;
.gradient;
}
}
li: pierwsze dziecko a (
obramowanie po lewej stronie: brak;
}
li: 50px auto 0 ;
szerokość: 788px;
wysokość: 45px;
.granica;
.cień;
ul (
dopełnienie: 0;
margines: 0;
Li (
wyświetlacz: wbudowany;
A (
dekoracja tekstu: brak;
wyświetlacz: blok inline;
pływak: w lewo;
szerokość: 156px;
wysokość: 45px;
wyrównanie tekstu: do środka;
wysokość linii: 300%;
.textcolor(#f2f2f2 ) ; // Możesz zmienić tę linię
.rozdzielacz;
.gradient;
&:unosić się (
.hovereffect;
}
}
}
li: pierwsze dziecko a (
obramowanie po lewej stronie: brak;
}
li: ostatnie dziecko a (
obramowanie w prawo: brak;
}
}
}
Cóż, to wszystko, pisanie apple.com można dokończyć tutaj. Pozostaje zdecydować, w jaki sposób dołączymy style pisane do strony internetowej. Jak wspomniałem powyżej, stylów pisanych można używać na dwa sposoby:
- połącz bibliotekę Style.less z biblioteką less.js;
- lub skompiluj plik Style.less w programie Crunch i już dołącz do strony zwykły plik Style.css
Oczywiście druga opcja jest lepsza, po co dołączać 2 pliki i wykonywać podwójną pracę po stronie klienta, więc skompilujmy napisane style LESS do zwykłego statycznego CSS.
Aby to zrobić, kliknij duży przycisk Crunch It! I zachowaj normalny plikstyles.css 
Na tym kończy się lekcja.
P.S.: Każdy może zrobić takie proste menu, ale jeśli potrzebujesz naprawdę fajnej strony internetowej z pięknymi efektami, to mogę Ci polecić jedno z najlepszych studiów internetowych na Ukrainie. Chłopaki będą w stanie stworzyć dla Ciebie naprawdę unikalny projekt, przeprowadzić optymalizację wyszukiwarek i wypromować Twoją witrynę!
Projektowanie stron internetowych w stylu Apple rozwijało się i ewoluowało przez lata, począwszy od 1996 roku. Jak sama nazwa wskazuje, pomysł na projekt należy do Apple Corporation: w tym stylu zaprojektowano stronę internetową i interfejsy produktów. Projekt strony internetowej w stylu Apple zyskał dużą popularność ze względu na minimalizm i skupienie uwagi użytkownika na konkretnym produkcie.
Charakterystyczne cechy projektowania stron internetowych w stylu Apple- Jumsoft http://www.jumsoft.com/money/
- Wersje aplikacji https://versionsapp.com/