Html в стиле apple. CSS-кнопки в стиле Apple
Вступление
Когда речь заходит о дизайне, существует одна компания, которую невозможно не вспомнить. Это компания Apple - каждый продукт у них это результат работы команды дизайнеров. Сайт этой компании также всегда привлекал внимание.
В этом уроке мы сделаем галерею - слайдшоу "а ля" Apple. Примерно такая же используется на сайте Apple для представления продуктов компании. Для создания нам не понадобится PHP или база данных.
ШАГ 1 - XHTML
Давайте подробнее взглянем на XHTML разметку:
Идея очень проста - существует два главных контейнера DIV - один с id=”menu” содержит миниатюры, второй “slides” содержит непосредственно слайды.
Для добавления нового слайда необходимо просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но Вы можете использовать и другие форматы.
Вы также можете вставлять любой HTML-код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке.
Очень важно, чтобы у слайдов были прописаны высота и ширина - они используется jQuery для определения зоны прокрутки.
Также обратите внимание на элементы миниатюр LI. Первому присвоен класс fbar для отображения вертикальной разделяющей полосы. Другим элемента присвоен класс menuItem - и они используются в качестве кнопок управления слайдшоу.
Давайте перейдем к следующему шагу.
Шаг 2 - CSS
Давай взглянем на нашу таблицу стилей.
Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px; } body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; } /* Gallery styles */ #gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */ width:920px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; }
В этой таблице стилей мы использовали несколько CSS3-свойств:
* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают только в Safari, Chrome и Firefox на данный момент.
Теперь пришло время магииjQuery.
ШАГ 3 - jQuery
Нам понадобится следующий код:
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$("#slides .slide").each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide"s commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$("#slides").width(totWidth);
/* Change the cotnainer div"s width to the exact width of all the slides combined */
$("#menu ul li a").click(function(e){
/* On a thumbnail click */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");
var pos = $(this).parent().prevAll(".menuItem").length;
$("#slides").stop().animate({marginLeft:-positions+"px"},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* On page load, mark the first thumbnail as active */
});
Главная идея заключается в том в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места расположиться друг за другом.
При нажатии на миниатюру, скрипт просчитывает какой слайд показать и прокручивает их с помощью присвоения отрицательного значения отступа с помощью метода animate.
Всего 40 строк кода и наша слайдшоу - галерея готова!
Заключение
Всего три шага нам понадобилось для создания супер красивой галереи в стиле Apple. Она способна украсить любой сайт.
Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример apple.com
Если вы немного полазиете по их сайту, то найдёте весьма симпатичные синие кнопки. Там они сделаны в виде , поэтому если вы захотите такие же на свой сайт, то придётся юзать фотошоп.
Итак выкладываю кнопки на чистом CSS:
Apple-button { cursor : pointer ; padding : 3px 10px; text-decoration : none ; color : #fff ; font-size : 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear- gradient(#52A8E8 , #377 AD0 #377 AD0 , #52A8E8 ) ; background-image : -o-linear-gradient(rgb (82 , 168 , 232 ) , rgb (55 , 122 , 208 ) ) ; background-color : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; border : 1px solid #205 59A ; box-shadow : 0 1px 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :hover , .apple-button :focus { background-image :-webkit-linear- gradient(#54A1D8 , #196 7CA ) ; background-image :-moz-linear- gradient(0 % 100 % 90deg, #196 7CA , #54A1D8 ) ; background-image : -o-linear-gradient(rgb (84 , 161 , 216 ) , rgb (25 , 103 , 202 ) ) ; background-color : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :active { background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 , .5) ; }
Демо: живой пример (попробуйте навести на него курсор и понажимать)
Пару слов о кроссбраузерности. Так как мы использовали CSS-свойство gradient, то могут возникнуть некоторые проблемы при отображении в старых версиях браузера Opera, ну и box-shadow — это свойство CSS 3.
МишаВ последние годы я долго не знал, что мне делать с сайтом сайт, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор . Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce - . Я и моя команда сделаем вам всё на лучшем уровне.
Apple-культ не оставляет равнодушным никого, и стоит взглянуть правде в глаза: один из ключевых факторов популярности компании Apple - их уникальный дизайн. Книга «Designed by Apple in California» наглядно иллюстрирует, что дизайнеры относятся к своим продуктам как к искусству.
Купертино, Калифорния - 16 ноября компания Apple анонсировала релиз новой книги в твёрдом переплёте под названием «Designed by Apple in California». Два десятилетия инноваций в дизайне запечатлены на 450 фотографиях прошлых и нынешних продуктов компании, начиная с iMac (1998 г.) и заканчивая Apple Pencil (2015 г.). Книгу создавали 8 лет и посвятили её памяти Стива Джобса.
«Идея о создании чего-то важного для человечества мотивировала Стива с самого начала, эта мысль - наш идеал и цель, с которой Apple двигается в будущее», - утверждает Джони Айв.
«Designed by Apple in California» - результат тесного сотрудничества многих групп дизайнеров и специалистов совершенно разных сфер. Всех их объединяет надежда на то, что книга даст людям понимание, как и почему продукты Apple созданы и существуют. Все фотографии сделаны Эндрю Цукерманом в технике, описанной им как «нарочито скромный стиль». Снимки иллюстрируют детали процесса дизайна так же хорошо, как и сами готовые продукты.
Это книга о дизайне, но речь в ней идет не о самих дизайнерах, творческом процессе или развитии продукта. Она объективно отражает стиль, образ и идеологию дизайна Apple. Многие продукты выглядят настолько понятными, простыми и логичными, будто не имеют разумной альтернативы. Для каждого устройства продуман даже дизайн инструмента, которым он сделан.
«Как дизайнеры мы живем в будущем, любим то, что уже сделали, и помешаны на том, что сделать еще не успели»
«Одна из важнейших вещей, которые мы усвоили за 20 лет совместной работы - необходимость слушать друг друга, потому что самые яркие идеи зачастую подают те, кто говорит очень-очень тихо»
Книга «Designed by Apple in California» выпускается ограниченным тиражом в двух форматах: small (25,9 x 32,4 см) по цене $199 и large (33 x 40,6 см) за $299. Она отпечатана на специально изготовленной бумаге особой окраски с матовыми посеребрёнными краями. Продается эксклюзивно на сайте Apple.com в США, Австралии, Великобритании, Германии, Гонконге, Корее, Франции, Японии и Тайване, а также в некоторых магазинах Apple Store.
Здравствуйте, уважаемые читатели a! Веб-дизайн и веб-разработка очень быстро развиваются. Мы каждый день видим все больше и больше новинок, будь то приложения или новые сервисы, которые делают нашу жизнь в сети более продуктивной и удобной. А веб-дизайн это просто безграничное пространство, ограниченное только талантом и умениями «художника» (дизайнера). Так вот, поговорим же мы сегодня о LESS
— динамическом языке стилевой разметки, который упростит написание стилей CSS.
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS коде. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в . Он вводит переменные, операции, элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
LESS существенно облегчает написание стилей. Например, применяя примешивания (mixins), мы создаем что-то на подобии функций, которые могут принимать аргументы. Mixins — позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.
1 | Rounded-corners
(@radius
:
5px
)
{
|
А скомпилированный CSS будет выглядеть так:
1 | #header
{
|
Загружаем библиотеку prefix-free.js и подцепляем ее к index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
На этом с подготовкой закончим и перейдем непосредственно к созданию меню в стиле Apple.com
Разметка HTMLРазметка меню довольно проста. Меню сделано на основе не упорядоченного списка. Открываем HTML-редактор и вставляем такой вот код:
1 |
В этом разделе мы начнем написание кода меню на LESS языке. Для тех, кто новичок в программировании, как в написание так и в синтаксисе LESS, не волнуйтесь, постараюсь разложить все по полочкам, чтобы было понятно. Возможно даже кому-то такой способ написания стилей для сайта понравится, ведь он действительно более продуктивный.
Давайте рассмотрим из каких составных частей будет состоять меню:
Как мы можем видеть на скриншоте выше, навигация Apple.com имеет следующие 6 основных частей:
- Используется тень;
- Граница;
- Разделитель между пунктами меню;
- Градиент для фона;
- Эффект затемнения при наведении мыши;
- Текст меню.
Использовать написанные стили можно двумя способами:
- Crunch
Важно:
при использовании первого способа чтобы подключение styles.less
происходило до подключения библиотеки less.js
! Также остается не забыть подключить prefix-free
.
Таким образом подключение стилей выглядит так:
1 |
|
Будем использовать 2 файла: config.less в нем определим все переменные, примешивания и тд., после чего импортируем его во второй (styles.less ) в котором уже сформируем стили для элементов меню.
Сейчас разберем код в config.less . Определим базовый цвет меню с помощью переменных. Переменная в LESS объявляется с помощью символа @ .
В приведенном выше коде я не включил префикс для box-shadow , библиотека prefix-free автоматически добавит его. Кроме того, цвет тени наследуется от цвета переменной @theme .
Определим стиль для границ меню используя mixins с параметромДля нашего меню понадобится граница с закругленными углами. Mixins с параметром — на самом деле имеет такую же функциональность как и простое примешивание, единственным отличием является то, что он также имеет изменяемый параметр.
1 | Border(@radius
:
3px
)
{
|
В приведенном выше примере, мы установили закругление по умолчанию @radius в 3 пикселя и, как мы уже говорили, это значение может быть изменено.
Определим градиент, разделитель и стиль при наведении мыши с помощью операцийВ LESS с помощью операций можно увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами, чтобы получить желаемый результат. Давайте взглянем на следующий код, который задает свойства для разделителя в меню:
1 | Divider
{
|
В приведенном выше примере мы вычитаем из переменной @theme цвет #111 , таким образом, левая часть разделителя будет немного темнее чем базовый цвет, а правая светлее. Вот такие манипуляции мы можем делать с HEX-цветом.
Для большей понятности манипуляций с цветом, давайте рассмотрим цветовую схему:
Максимальная темный цвет #000 (черный), а максимальный светлый цвет #FFF (белый) и базовый цвет #555 . Таким образом, если мы хотим получить цвет на три уровня темнее, то вычитаем #333 .
Теперь стили градиента:
1 | Gradient
{
|
Мы планируем использовать 2 цвета текста и цвета теней текста. Один вариант используется если фон меню будет светлым то цвет текста темный и наоборот.
Во-первых, если цвет текста на имеет яркость равную или больше чем 50%, то тень должна потемнеть, в данном случае принять цвет #000000 .
На этом этапе заканчиваем создание файла config.less и переходим к созданию файла styles.less
Импорт config.lessДавайте создадим файл с названием styles.less и первым делом прицепим к нему уже созданный config.less , следующим способом:
На данный момент результат нашей работы выглядит так.
Пока не очень привлекательно. Но все еще впереди.
Основной стиль для меню с вложенными правиламиВ LESS мы можем вкладывать стили какого-либо элемента, непосредственно в стиль родителя.Навигационные тег nav спецификация HTML5, который содержит все необходимые элементы для навигации. Вот его стили:
1 | nav {
|
Обратите внимание, что вместо того, чтобы писать кучу правил CSS, определили только высоту, ширину и отступы. В то время как границу и ее стиль, а также тень мы подцепляем с помощью примешивания (mixins), указываем имя класса .border
и .shadow
и к классу nav
добавляются правила этих классов, которые мы писали в файле config.less
.
1 | nav {
|
Однако в LESS наследование происходит иначе, пойму проще и логичней:
1 | nav {
|
Как видно на картинке, элементы списка li расположены вертикально, а нам надо чтобы они располагались горизонтально. Для этого зададим свойство display:inline;
1 | nav {
|
1 | nav {
|
В приведенном выше примере мы применяем шестнадцатеричный цвет #f2f2f2
, этот цвет имеет яркость более 50%, поэтому тень будет установлена автоматически черным цветом. Остальная часть кода я уверен, вполне очевидна.
li {
display
:
inline
;
a {
text-decoration
:
none
;
display
:
inline-block
;
float
:
left
;
width
:
156px
;
height
:
45px
;
text-align
:
center
;
line-height
:
300%
;
.divider;
.gradient;
}
}
li:
first-child
a {
border-left
:
none
;
}
li:
50px
auto
0
;
width
:
788px
;
height
:
45px
;
.border;
.shadow;
ul {
padding
:
0
;
margin
:
0
;
li {
display
:
inline
;
a {
text-decoration
:
none
;
display
:
inline-block
;
float
:
left
;
width
:
156px
;
height
:
45px
;
text-align
:
center
;
line-height
:
300%
;
.textcolor(#f2f2f2
)
;
// You can change this line
.divider;
.gradient;
&:
hover
{
.hovereffect;
}
}
}
li:
first-child
a {
border-left
:
none
;
}
li:
last-child
a {
border-right
:
none
;
}
}
}
Ну вот и все, написание apple.com на этом можно завершить. Остается решить каким способом мы будем присоединять написанные стили к веб-странице. Как я уже упоминал выше, использовать написанные стили можно двумя способами:
- подключить styles.less и библиотеку less.js ;
- либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css
Конечно более второй вариант лучше, зачем присоединять 2 файла и выполнять двойную работу на стороне клиента, поэтому скомпилируем написанные стили LESS в обычный статический CSS.
Для этого надо нажать на большую кнопку Crunch It
! И сохранить обычный styles.css
На этом, урок завершаю.
P.S.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины . Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!
Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле Apple- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/