() translation by (you can also view the original English article)
Во время этого урока мы будем строить фантастическое портфолио Timeline, как показано в предыдущем учебнике Томаса Лауринавичуса. Мы будем использовать некоторые гибкие методы, а также анимацию CSS3, Sass и немного jQuery.
Структура файлов и каталогов
Итак, первым шагом будет создание необходимых файлов и папок. На рисунке ниже показана наша корневая структура.
Как вы можете видеть, у нас здесь очень простая настройка. Внутри каталога «css» и создайте файл styles.scss, а также возьмите копию normalize.css. Чтобы использовать Sass в этом проекте, вам потребуется либо Sass, установленный на вашем компьютере, либо вам понадобится приложение для просмотра и компиляции для вас. В настоящее время я использую CodeKit для Mac, но есть много альтернатив, таких как Prepos, Scout и Koala, чтобы назвать несколько. Они не все бесплатны, но какой бы вы ни выбрали, это сэкономит вам много времени!
Внутри папки «js» создайте файл app.js и загрузите копию modernizr.js, чтобы разместить здесь. Модернизация Modernizr, которую я использовал, включает в себя все тесты CSS3 и HTML5, поскольку нам не нужно больше этого. Правильно, это охватывает наши начальные файлы и папки. Следующим шагом является проверка нашей PSD-конструкции, чтобы увидеть, какие биты нуждаются в разрезе.
Нарезка ОСЧС
Дизайн этой страницы является прямым, что позволяет решить, нужны ли нам какие-либо фрагменты. Томас фактически предоставил все эти активы вместе с PSD, так что из этого дизайна можно было бы вообще не иметь кусочков. Тем не менее, я решил, что для этого урока мы должны вырезать три изображения портфолио и значок загрузки в нижней части страницы. Это просто для удобства больше, чем что-либо еще, поэтому нам не нужно делать какие-либо изменения размера в Photoshop.
В Photoshop возьмите инструмент для среза и аккуратно вытяните ломтики. Вы можете назвать каждый фрагмент, дважды щелкнув по нему. Затем используйте Save for Web ... (или аналогичный пункт меню в зависимости от вашей версии Photoshop), чтобы экспортировать фрагменты в наш каталог изображений.
Затем я создал новую папку внутри «изображений» под названием «портфолио», в которой будут храниться изображения, относящиеся к элементам портфеля. Переместите три изображения портфолио в эту папку, и это завершает наш процесс нарезки!
Аватарка
Теперь перейдите на сайт uifaces.com и выберите одно из изображений для использования в качестве изображения нашего профиля. Мне удалось найти то же самое, что и дизайн, но неважно, кого вы выбираете. Возьмите 128x128 версию и поместите ее в папку «images».
Мы почти закончили с нашими изображениями только для социальных медиа и навигационных значков. Мы сделаем это дальше.
Спрайты
Когда у вас есть группы изображений, таких как значки, неплохо создать одно изображение, содержащее все их в виде сетки. Они называются спрайтами. Вы можете сделать это до крайности и создать один большой файл каждого изображения на своем веб-сайте, но для этого урока мы собираемся создать два спрайта и соответствующую версию сетчатки для каждого.
Таким образом, используя ссылки на ресурсы, предоставляемые Tomas, мы можем загрузить каждый из значков социальных сетей. Возьмите 128x128 пикселей каждой из них, чтобы мы могли масштабироваться до размеров, которые нам нужны. Затем в Photoshop нам нужно создать файл размером 101px на 51px. Перетащите каждый из значков социальных сетей в этот файл и измените размер до 24px на 24px. Значки черные, но нам нужно, чтобы они были белыми, поэтому применяйте стиль слоя к каждому, который дает цветное наложение белого. Измените цвет фона на что-то темное, чтобы мы могли их видеть, а затем упорядочить их так ...
Каждый значок имеет ровно 1 пиксель от краев и друг от друга. Я также изменил непрозрачность каждого значка до 80%. Теперь дублируйте эту строку значков и поместите ее непосредственно ниже, убедившись, что она будет содержать 1 пиксель с краев. Измените непрозрачность второй строки значков на 100%. Он должен выглядеть примерно так ...
Теперь скройте фоновый слой в Photoshop, чтобы создать прозрачный фон и сохранить для Интернета как PNG под названием social-sprite.png внутри папки «images». Следующий шаг - создать сетчатую версию этого спрайта, чтобы мы получили четкие значки на дисплеях с высокой плотностью пикселей. Это должно быть довольно простым и просто включает в себя удвоение размера того, что у нас уже есть. Таким образом, версия сетчатки будет 202px на 102px. Помните, что все должно быть удвоено, включая интервалы вокруг каждого значка, поэтому для этого спрайта нам понадобится 2 пикселя между каждым значком и по краям. Готовая версия сетчатки должна выглядеть так ...
Чудесно! Теперь просто скройте фоновый слой, как раньше, и экспортируйте его как PNG, но на этот раз назовите его social-sprite@2x.png. Это стандартное соглашение об именах для версии сетчатки файла изображения.
Поэтому теперь нам просто нужно сделать то же самое с значками навигации. Эти значки являются векторными объектами внутри PSD, что означает, что мы можем просто дублировать их в новый файл и масштабировать их по мере необходимости. Размер, необходимый для нормальной версии, составляет 49 пикселей на 18 пикселей, а версия сетчатки с двойным размером - 98 пикселей на 36 пикселей. Готовые изображения должны выглядеть так:
Отлично! Сохраните их как nav-sprite.png и nav-sprite@2x.png. Я думаю, что это завершает все, что нам нужно сделать для изображений, поэтому давайте продолжим писать код!
Базовый HTML и Sass
Начнем с barebones нашей страницы. В нашем index.html скопируйте следующую разметку, чтобы начать работу:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta name="viewport" content="initial-scale=1.0"> |
6 |
|
7 |
<title>My Portfolio</title> |
8 |
<link rel="stylesheet" href="css/style.css"> |
9 |
<script src="js/modernizr.js"></script> |
10 |
</head>
|
11 |
<body>
|
12 |
<main class="wrap group"> |
13 |
<aside class="sidebar"> |
14 |
<div class="my-info"> |
15 |
|
16 |
</div>
|
17 |
<nav class="menus"> |
18 |
|
19 |
</nav>
|
20 |
</aside>
|
21 |
<div class="content"> |
22 |
|
23 |
</div>
|
24 |
</main>
|
25 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
26 |
<script src="js/app.js"></script> |
27 |
</body>
|
28 |
</html>
|
Это простой макет с основным элементом обертывания, содержащим боковую панель в стороне и содержимое div. В боковой панели у нас есть два раздела: my-info и nav с классом меню. Наши зависимости также включены, в частности, последняя версия jQuery 1.x. Давайте теперь начнем заполнять наш файл Sass некоторыми переменными.
1 |
$black: #000; |
2 |
$white: #FFF; |
3 |
$grey: #f7f7f7; |
4 |
$darkgrey: #5e5e5e; |
5 |
$red: #d35136; |
6 |
$green: #27b599; |
7 |
$blue: #088ecc; |
8 |
$darkblue: #11171c; |
9 |
|
10 |
$padding: 10px; |
11 |
$margin: 10px; |
12 |
$main-width: 1000px; |
13 |
|
14 |
$font-size: 14px; |
15 |
$font-family: 'Lato', sans-serif; |
16 |
$line-height: 1.4; |
17 |
|
18 |
$break-four: 1050px; |
19 |
$break-three: 760px; |
20 |
$break-two: 520px; |
21 |
$break-one: 360px; |
22 |
|
23 |
@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700'); |
24 |
@import url('normalize.css'); |
25 |
|
26 |
//Utilities |
27 |
.group:after { |
28 |
content: ""; |
29 |
display: table; |
30 |
clear: both; |
31 |
}
|
Это прекрасный кусок кода, чтобы начать с! Это действительно просто настройка некоторых значений по умолчанию и переменных для использования в нашем Sass-файле. Наиболее важным здесь является то, что содержит четыре переменные точки разрыва. Они определяют, в каких точках наш макет должен измениться. Сасс очень полезен здесь, так как мы можем просто ссылаться на эти переменные при написании наших медиа-запросов, и если точка останова должна измениться, есть только одно место для ее изменения.
Как вы можете видеть по инструкции @import, мы также импортируем шрифт Google, используемый в проекте, и копию Normalize.css, которую мы скачали ранее. До сих пор единственным объявлением является класс группы, который является clearfix для элементов, содержащих плавающие элементы. Ознакомьтесь с nicolasgallagher.com для получения дополнительной информации.
Если все настроено правильно, сохранение styles.scss создаст простой CSS-файл, который мы включили в нашу страницу. Просмотр страницы теперь покажет довольно скучный белый экран, поэтому давайте сделаем это более увлекательным, добавив еще несколько стилей и создав боковую область.
Боковая панель; Моя информация
Прежде всего, добавим следующее в наш файл Sass:
1 |
//Main styles |
2 |
* { |
3 |
position: relative; |
4 |
-webkit-box-sizing: border-box; |
5 |
-moz-box-sizing: border-box; |
6 |
-ms-box-sizing: border-box; |
7 |
box-sizing: border-box; |
8 |
}
|
9 |
|
10 |
html, body, .wrap { |
11 |
min-height: 100%; |
12 |
}
|
13 |
|
14 |
body { |
15 |
color: $grey; |
16 |
font-size: $font-size; |
17 |
font-family: $font-family; |
18 |
line-height: $line-height; |
19 |
background: $darkblue; |
20 |
}
|
Теперь каждый элемент должен быть расположен относительно, а также имеет свойство box-sizing, установленное в border-box, позволяющее элементам иметь процентную ширину, включая их заполнение. Это означает, что мы можем установить два элемента рядом друг с другом шириной 50%, а затем отрегулировать заполнение в каждом из них так, как нам нравится, не нарушая макет. Очень, очень полезное правило CSS! Поддержка почти всех браузеров осуществляется через объявления с префиксом поставщика.
Остальные стили здесь действуют как значения по умолчанию для нашей страницы. Мы должны убедиться, что основные оберточные элементы остаются на высоте 100% в любое время, так как наша боковая панель должна заполнять экран вертикально. Здесь мы устанавливаем фон тела $ darkblue, который на самом деле является нашим цветом боковой панели. Это то, что дает нашей боковой панели внешний вид на 100%. На самом деле элемент боковой панели будет только до уровня его содержимого, но будет иметь прозрачный фон, тем самым отображая цвет позади него.
Давайте начнем склеивать боковую панель ...
1 |
<img src="images/cj.jpg" alt="Chris Johnson" class="portfolio-image"> |
2 |
<h1>Chris Johnson</h1> |
3 |
<h2>Experienced UX/UI <br> Designer based in London, UK</h2> |
4 |
<div class="social group"> |
5 |
<a href="#" class="dribbble">Dribbble</a> |
6 |
<a href="#" class="twitter">Twitter</a> |
7 |
<a href="#" class="facebook">Facebook</a> |
8 |
<a href="#" class="googleplus">Google+</a> |
9 |
</div>
|
Добавьте этот код в div .my-info. Возможно, вам придется переименовать portfolio-image в зависимости от того, что вы назвали. Здесь не так много, но сохранить файл и посмотреть в браузере.
Прекрасно. Теперь откройте style.scss и введите следующий код:
1 |
.sidebar { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
|
5 |
@media screen and (min-width: $break-three) { |
6 |
float: left; |
7 |
width: 20%; |
8 |
}
|
9 |
|
10 |
|
11 |
.my-info { |
12 |
text-align: center; |
13 |
padding: $padding*3 0; |
14 |
border-bottom: 1px solid $darkgrey; |
15 |
|
16 |
.portfolio-image { |
17 |
border-radius: 50%; |
18 |
}
|
19 |
|
20 |
h1, h2 { |
21 |
font-weight: normal; |
22 |
}
|
23 |
|
24 |
h1 { |
25 |
font-size: 120%; |
26 |
}
|
27 |
|
28 |
h2 { |
29 |
font-size: 100%; |
30 |
}
|
31 |
|
32 |
}
|
33 |
|
34 |
}
|
Поскольку мы следим за мобильной стратегией здесь, нам нужна наша боковая панель для полноразмерной и полной высоты при разрешении мобильных устройств. Быстрый запрос на получение информации для нашей $break-three три точки прерывания боковой панели слева и ограничивает ширину до 20%.
Стили для .my-info достаточно просты. Мы просто хотим сосредоточить все и дать все пространство вокруг краев. Чтобы отделить наше ближайшее меню, мы просто используем границу 1px на нижнем краю. Чтобы сделать круговое изображение портфолио, дайте ему 50% -ный радиус границы и, наконец, мы должны переопределить некоторые стили шрифтов для любых элементов h1 или h2 внутри этого раздела.
Социальные медиа-ссылки
Теперь нам нужно заняться этими связями в социальных сетях, используя один из созданных нами спрайтов. Поместите следующий код непосредственно после деклараций h2 в последнем блоке кода.
1 |
.social { |
2 |
width: 120px; |
3 |
margin: 0 auto; |
4 |
|
5 |
a { |
6 |
float: left; |
7 |
width: 25px; |
8 |
height: 25px; |
9 |
margin: 0 $margin/5; |
10 |
background: url(../images/social-sprite.png) no-repeat; |
11 |
text-indent: -9999px; |
12 |
|
13 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
14 |
background: url(../images/social-sprite@2x.png) no-repeat; |
15 |
background-size: 101px 51px; |
16 |
}
|
17 |
|
18 |
&.dribbble { |
19 |
background-position: 0px 0px; |
20 |
|
21 |
&:hover { |
22 |
background-position: 0px -25px; |
23 |
}
|
24 |
|
25 |
}
|
26 |
|
27 |
&.twitter { |
28 |
background-position: -25px 0px; |
29 |
|
30 |
&:hover { |
31 |
background-position: -25px -25px; |
32 |
}
|
33 |
}
|
34 |
|
35 |
&.facebook { |
36 |
background-position: -50px 0px; |
37 |
|
38 |
&:hover { |
39 |
background-position: -50px -25px; |
40 |
}
|
41 |
}
|
42 |
|
43 |
&.googleplus { |
44 |
background-position: -75px 0px; |
45 |
|
46 |
&:hover { |
47 |
background-position: -75px -25px; |
48 |
}
|
49 |
}
|
50 |
|
51 |
}
|
52 |
}
|
Это выглядит довольно сложно, но на самом деле это не так. Основная часть этого кода обрабатывает отображение значков и их состояний зависания. Прежде всего мы должны пускать в ход каждый из элементов <a>, дать им ширину и высоту и также некоторые разницы к пространство их. Следующее, что мы делаем это указать фоновый рисунок: Это должно быть настроено на социальный спрайт, который мы создали ранее. Наконец, мы должны убедиться, что текст, используемый в каждом элементе, не отображается на странице. Свойство text-indent прекрасно позаботится об этом.
Следующий раздел интересный. Здесь мы указываем, какой фон использовать для дисплеев с высокой плотностью пикселей. Идея здесь состоит в том, чтобы использовать «удвоенную» версию социального спрайта, если соотношение пикселей устройства равно 2. Свойство background-size необходимо для масштабирования файла до исходного размера,поэтому весь наш код позиционирования работает без дублирования.
Следующие четыре раздела имеют одинаковую концепцию. Мы просто устанавливаем фоновое положение для каждого значка и соответствующего состояния зависания. Давайте посмотрим в браузере:
Потрясающие! Это выглядит очень хорошо. Если все правильно, все зависающие состояния должны работать, и все они должны выглядеть четкими на iPhone / iPad и т. Д. Теперь давайте начнем заниматься меню боковой панели.
Меню боковой панели
Начните с ввода следующего в index.html в контейнере меню.
1 |
<h3 class="work">Work</h3> |
2 |
<ul>
|
3 |
<li><a href="#" class="current-menu-item">Latest</a></li> |
4 |
<li><a href="#">Web Design</a></li> |
5 |
<li><a href="#">Branding</a></li> |
6 |
<li><a href="#">Photography</a></li> |
7 |
<li><a href="#">Print</a></li> |
8 |
<li><a href="#">Mobile Design</a></li> |
9 |
</ul>
|
10 |
|
11 |
<h3 class="about">About</h3> |
12 |
<ul>
|
13 |
<li><a href="#">Skills</a></li> |
14 |
<li><a href="#">Experience</a></li> |
15 |
<li><a href="#">Education</a></li> |
16 |
<li><a href="#">Clients</a></li> |
17 |
<li><a href="#">Testimonials</a></li> |
18 |
<li><a href="#">Blog</a></li> |
19 |
</ul>
|
20 |
|
21 |
<h3 class="contact">Contact</h3> |
22 |
<ul>
|
23 |
<li><a href="#">Address</a></li> |
24 |
<li><a href="#">Phone</a></li> |
25 |
<li><a href="#">Social Networks</a></li> |
26 |
<li><a href="#">Email</a></li> |
27 |
</ul>
|
Я думаю, что я просто объясняю, поэтому давайте продолжим, введя следующие стили после раздела my-info, но все же внутри общего элемента боковой панели.
1 |
.menus { |
2 |
text-align: center; |
3 |
|
4 |
@media screen and (min-width: $break-three) { |
5 |
padding: $padding*2 $padding*3; |
6 |
}
|
7 |
|
8 |
h3 { |
9 |
text-transform: uppercase; |
10 |
font-size: 120%; |
11 |
font-weight: normal; |
12 |
padding-left: $padding*2.5; |
13 |
cursor: pointer; |
14 |
width: 20%; |
15 |
margin: $margin*2 $margin*11 $margin; |
16 |
|
17 |
@media screen and (min-width: $break-one) { |
18 |
margin: $margin*2 auto $margin*2; |
19 |
}
|
20 |
|
21 |
@media screen and (min-width: $break-three) { |
22 |
margin: $margin*2 0 $margin 0; |
23 |
}
|
24 |
|
25 |
&:before { |
26 |
content: ""; |
27 |
position: absolute; |
28 |
top: 0px; |
29 |
left: 0px; |
30 |
height: 18px; |
31 |
display: block; |
32 |
background: url(../images/nav-sprite.png) no-repeat; |
33 |
|
34 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
35 |
background: url(../images/nav-sprite@2x.png) no-repeat; |
36 |
background-size: 49px 18px; |
37 |
}
|
38 |
}
|
39 |
|
40 |
&.work { |
41 |
color: $red; |
42 |
|
43 |
&:before { |
44 |
width: 15px; |
45 |
background-position: 0px 0px; |
46 |
}
|
47 |
}
|
48 |
|
49 |
&.about { |
50 |
color: $green; |
51 |
|
52 |
&:before { |
53 |
width: 17px; |
54 |
background-position: -15px 0px; |
55 |
}
|
56 |
}
|
57 |
|
58 |
&.contact { |
59 |
color: $blue; |
60 |
|
61 |
&:before { |
62 |
width: 17px; |
63 |
background-position: -32px 0px; |
64 |
}
|
65 |
}
|
66 |
}
|
67 |
}
|
На самом деле это очень похоже на социальные иконки, что касается концепции и реализации концепции. Для самого меню мы просто хотим, чтобы все было сосредоточено. Как только мы перейдем к нашей точке разрыва $break-three, нам понадобится некоторое дополнение, чтобы немного поместить меню в сторону от краев.
Каждый из элементов h3 должен иметь разные цвета и разные значки. Для этого мы используем комбинацию: перед псевдоэлементом, спрайтами и медиа-запросами. Помимо этого, у нас есть несколько медиа-запросов для управления полями элементов h3 при больших размерах экрана. Это значит, что они всегда правильно расположены в отношении их меню.
Говоря о меню, мы добавим CSS для них в одно мгновение. Во-первых, давайте посмотрим в браузере:
Названия выглядят очень красиво! Меню не так много. Давайте быстро позаботимся об этом, прежде чем синие значения по умолчанию вызовут у нас больше боли ...
Список меню
1 |
ul { |
2 |
list-style: none; |
3 |
padding: 0; |
4 |
display: none; |
5 |
margin: 0 $margin*13.5 $margin; |
6 |
text-align: left; |
7 |
|
8 |
@media screen and (min-width: $break-three) { |
9 |
margin: 0 0 0 $margin*2.5; |
10 |
display: block; |
11 |
width: auto; |
12 |
}
|
13 |
|
14 |
&.open { |
15 |
display: inline-block; |
16 |
margin: 0 auto $margin $margin*6; |
17 |
|
18 |
@media screen and (min-width: $break-three) { |
19 |
margin: 0 0 0 $margin*2.5; |
20 |
display: block; |
21 |
width: auto; |
22 |
}
|
23 |
}
|
24 |
|
25 |
li { |
26 |
a { |
27 |
color: $darkgrey; |
28 |
text-decoration: none; |
29 |
-webkit-transition: color 0.4s ease; |
30 |
-moz-transition: color 0.4s ease; |
31 |
-o-transition: color 0.4s ease; |
32 |
-ms-transition: color 0.4s ease; |
33 |
transition: color 0.4s ease; |
34 |
|
35 |
&:hover, &.current-menu-item { |
36 |
color: $white; |
37 |
-webkit-transition: color 0.4s ease; |
38 |
-moz-transition: color 0.4s ease; |
39 |
-o-transition: color 0.4s ease; |
40 |
-ms-transition: color 0.4s ease; |
41 |
transition: color 0.4s ease; |
42 |
}
|
43 |
}
|
44 |
}
|
45 |
}
|
В мобильных разрешениях мы хотим, чтобы наши меню были скрыты, поэтому пользователь может выбрать, чтобы скрыть или показать их, когда им нужен доступ к ним. Как только мы нажмем на нашу точку разрыва $break-three, все меню должны быть видны все время.
Класс .open обрабатывает отображение меню при их открытии. Дизайн их довольно точно размещен, поэтому мы делаем то же самое здесь, используя поля. Опять же, точка разрыва $break-three входят в игру и переопределяют поля для этих резолюций и выше. Стили для элементов li довольно просты. Главное отметить использование CSS3 Transitions. Я использовал их здесь, чтобы при ярком угасании элемента выглядел приятный внешний вид. Я рекомендую вам поиграть с переходами, чтобы увидеть, какие интересные эффекты вы можете достичь!
Сохраним файл и просмотрим результаты в браузере.
Очень хорошо! Меню ведут себя так, как должны. Теперь мы собираемся выполнить наш первый бит JavaScript / jQuery, чтобы контролировать открытие и закрытие меню.
Откройте приложение app.js и введите следующую функцию:
1 |
$(function() { |
2 |
|
3 |
$('.menus h3').on('click', function(e) { |
4 |
$(this).next('ul').toggleClass('open'); |
5 |
e.preventDefault(); return false; |
6 |
});
|
7 |
|
8 |
});
|
Мы начинаем этот файл с функцией готов документ jQuery, которая в основном ожидает документа полностью будет готова перед запуском какого-либо кода. Подробнее о события ready на api.jquery.com.
Затем мы прикрепляем событие click к любому h3 внутри нашего элемента меню. Когда это событие происходит (когда пользователь нажимает на h3), мы используем jQuery, чтобы найти «следующий» элемент ul и переключить класс open на нем. Поэтому, если элемент уже имеет класс, он удалит его, и наоборот, если это не так. Конечная строка заключается в том, чтобы остановить любое действие по умолчанию для элемента. Это, вероятно, не применяется здесь, потому что элементы h3 не имеют действия по умолчанию, тогда как, например, тег привязки. Тем не менее, это хорошая практика, чтобы привыкнуть включать его при использовании обработчиков событий кликов.
Сохраните этот файл и вернитесь в браузер. Когда в мобильных разрешениях, если вы нажмете на названия меню, вы увидите, что меню открывается под ним. Если этого не происходит, проверьте JavaScript на наличие ошибок или обновите браузер и повторите попытку.
Это завершает боковую область! Давайте продвигаемся вперед и получаем некоторый контент на странице.
Основное содержание
Первым шагом здесь является добавление HTML, который нам нужен на странице.
1 |
<article class="portfolio-item group first"> |
2 |
<header class="portfolio-info"> |
3 |
<div class="date">7 Nov 2013</div> |
4 |
<div class="description"> |
5 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
6 |
</div>
|
7 |
<div class="meta"> |
8 |
<p><strong>Client:</strong> Despreneur</p> |
9 |
<p><strong>Tags:</strong> Web Design</p> |
10 |
</div>
|
11 |
</header>
|
12 |
<figure class="portfolio-image"> |
13 |
<img src="images/portfolio/free-psd-templates.jpg" alt="Free PSD Templates"> |
14 |
</figure>
|
15 |
</article>
|
16 |
<article class="portfolio-item group"> |
17 |
<header class="portfolio-info"> |
18 |
<div class="date">7 Nov 2013</div> |
19 |
<div class="description"> |
20 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
21 |
</div>
|
22 |
<div class="meta"> |
23 |
<p><strong>Client:</strong> Despreneur</p> |
24 |
<p><strong>Tags:</strong> Web Design</p> |
25 |
</div>
|
26 |
</header>
|
27 |
<figure class="portfolio-image"> |
28 |
<img src="images/portfolio/moody-shot.jpg" alt="Moody Shot"> |
29 |
</figure>
|
30 |
</article>
|
31 |
<article class="portfolio-item group"> |
32 |
<header class="portfolio-info"> |
33 |
<div class="date">7 Nov 2013</div> |
34 |
<div class="description"> |
35 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
36 |
</div>
|
37 |
<div class="meta"> |
38 |
<p><strong>Client:</strong> Despreneur</p> |
39 |
<p><strong>Tags:</strong> Web Design</p> |
40 |
</div>
|
41 |
</header>
|
42 |
<figure class="portfolio-image"> |
43 |
<img src="images/portfolio/new-york.jpg" alt="New York"> |
44 |
</figure>
|
45 |
</article>
|
46 |
<article class="portfolio-item group loading-wrap"> |
47 |
<header class="portfolio-info"> |
48 |
</header>
|
49 |
<figure class="portfolio-image"> |
50 |
<div class="loading"> |
51 |
<img src="images/loading.png" alt="Loading" class="rotate"> Loading... |
52 |
</div>
|
53 |
</figure>
|
54 |
</article>
|
Поместите этот код внутри div .content. У нас есть три статьи, которые представлены в дизайне, а также статья «Загрузка». Я поместил значок загрузки в свой собственный элемент портфеля, чтобы мы могли сохранить структуру страницы. Затем я могу просто поместить значок загрузки внутри элемента портфолио-изображения. Вы также увидите здесь, что первый элемент портфеля имеет первый класс. Это будет важно в нашем CSS, с которым мы столкнемся, сделав еще один быстрый просмотр в браузере:
Приятно, но не совсем то, что мы хотим, поэтому давайте прямо в стили.
1 |
.content { |
2 |
width: 100%; |
3 |
min-height: 100%; |
4 |
background: $white; |
5 |
|
6 |
@media screen and (min-width: $break-three) { |
7 |
float: left; |
8 |
width: 80%; |
9 |
}
|
10 |
|
11 |
.portfolio-item { |
12 |
background: $grey; |
13 |
|
14 |
&:before { |
15 |
content: ""; |
16 |
position: absolute; |
17 |
width: 3px; |
18 |
background: darken($grey, 5%); |
19 |
top: 0px; |
20 |
left: 17px; |
21 |
bottom: 0px; |
22 |
}
|
23 |
|
24 |
&.first { |
25 |
&:before { |
26 |
top: 30px; |
27 |
}
|
28 |
}
|
29 |
|
30 |
.portfolio-info { |
31 |
min-height: 100%; |
32 |
color: $darkgrey; |
33 |
padding: $padding*2 $padding*2 $padding*2 $padding*4; |
34 |
-webkit-box-sizing: border-box; |
35 |
-moz-box-sizing: border-box; |
36 |
-ms-box-sizing: border-box; |
37 |
box-sizing: border-box; |
38 |
|
39 |
@media screen and (min-width: $break-three) { |
40 |
float: left; |
41 |
width: 30%; |
42 |
}
|
43 |
|
44 |
.date { |
45 |
font-size: 110%; |
46 |
color: $black; |
47 |
margin-bottom: $margin; |
48 |
|
49 |
&:before { |
50 |
content: ""; |
51 |
position: absolute; |
52 |
width: 11px; |
53 |
height: 11px; |
54 |
border-radius: 50%; |
55 |
border: 2px solid $grey; |
56 |
background: $red; |
57 |
left: -29px; |
58 |
top: 3px; |
59 |
}
|
60 |
}
|
61 |
|
62 |
.meta { |
63 |
color: $black; |
64 |
margin-top: $margin; |
65 |
|
66 |
p { |
67 |
margin: 0; |
68 |
}
|
69 |
}
|
70 |
|
71 |
}
|
72 |
|
73 |
}
|
74 |
|
75 |
}
|
Еще один большой кусок кода! Давайте разложим его по частям. Стили .content аналогичны стилям боковой панели в том, что в мобильных разрешениях нам просто нужна полная ширина, но что-либо на уровне $ break-three или выше, мы должны поплавать и увеличить ширину до 80%. Нам также необходимо предоставить content div на белом фоне, чтобы отделить его от боковой панели.
Элементы элементов портфеля должны иметь серый фон. Чтобы создать временную шкалу, проходящую по левому краю области содержимого, мы собираемся предоставить каждому элементу портфолио элемент a: before. Здесь мы просто абсолютно позиционируем его 17px с левого края и используем трюк top / bottom, чтобы заставить его иметь 100-процентную высоту. Это включает настройку как верхнего, так и нижнего свойств на 0, что в действительности означает, что элемент находится в обоих местах, в результате чего элемент полной высоты. Это также работает для свойств слева и справа для создания элемента полной ширины. Мы должны позиционировать наш первый элемент портфеля в стороне от верхнего края окна, которое мы достигаем здесь, установив верхнее свойство на 30 пикселей.
Кроме того, статьи с портфолио-информацией должны быть на 100% больше, если мы не находимся в $ break-three или выше. Чтобы создать маленький красный круг, видимый на дизайне, я решил использовать элементы даты, поскольку эти два кажутся связанными. В CSS лучший способ добиться этого - использовать: перед псевдоэлементом. Чтобы сделать его кругом, он должен иметь некоторую высоту и ширину, а радиус границы - 50%. Затем мы полностью позиционируем его слева от даты. Чтобы получить небольшой промежуток вокруг него, просто примените границу того же цвета, что и элементы элемента портфеля.
Мета-информация очень проста. Просто установите текст черным и дайте ему верхний край. Любые <p> теги внутри здесь не должны иметь полей. Сохраните файл и посмотрите, что достигло этого относительно короткого раздела кода.
Сейчас это очень близко! Давайте продолжим наши стили контента ...
1 |
.portfolio-image { |
2 |
padding: $padding*2; |
3 |
background: $white; |
4 |
border-left: 1px solid darken($grey, 10%); |
5 |
text-align: center; |
6 |
|
7 |
@media screen and (min-width: $break-three) { |
8 |
float: left; |
9 |
width: 70%; |
10 |
}
|
11 |
|
12 |
img { |
13 |
width: 100%; |
14 |
max-width: 610px; |
15 |
height: auto; |
16 |
}
|
17 |
|
18 |
div.loading { |
19 |
img { |
20 |
width: auto; |
21 |
height: auto; |
22 |
}
|
23 |
}
|
24 |
}
|
Поместите это непосредственно после стилей портфолио. Этот короткий блок кода сделает изображения внутри элементов портфеля отзывчивыми. Идея состоит в том, чтобы уменьшить изображение до столь же небольшого, как нам нужно, но только масштабировать до их фактической ширины. Это означает, что у вас должны быть изображения с фиксированной шириной, но это вполне возможно в макете / шаблоне, подобном этому, поскольку изображения, вероятно, будут динамически генерироваться и обрезаны до определенного размера.
Мы также используем элементы портфолио-изображения, чтобы добавить еще одну деталь дизайна, которая является тонкой границей между изображениями и информацией. Если вы сейчас взглянете в браузере, вы увидите, что изображения хорошо масштабируются с помощью браузера и просто выглядят потрясающе!
Следующий
Пришло время перерыва на кофе! В следующей и последней части этой серии мы добавим некоторую вспышку в макет. Мы создадим значок загрузки внизу области содержимого, анимируем его с помощью CSS3, а затем имитируем бесконечную прокрутку, когда загружатся все элементы портфеля.
