Одним из самых необходимых инструментов в программе Photoshop для верстальщика является линейка (Ruler). Назначение ее просто и полностью отвечает своему названию. С помощью нее можно измерять расстояния между объектами макета.

Необходима линейка потому, что задача верстальщика состоит в верстке макета сайта с максимальной точностью. Точнее, чтобы сайт был максимально приближен к своему первоначальному виду - макету, который нарисовал дизайнер. Поэтому при нарезке макета верстальщик постоянно измеряет расстояния между объектами макета.

Чтобы вызвать инструмент “Линейка” (Ruler), нужно щелкнуть правой кнопкой мыши на значке “Пипетка” в панели инструментов. Появится небольшое констекстное меню, в котором присутствует “Линейка” (Ruler Tool):

Контекстное меню Photoshop

Курсор мыши изменится - рядом с ним будет стилистическое изображение линейки. Теперь давайте попрактикуемся и измерим расстояние между двумя объектами на макете.

Для этого подведем курсор мыши к одной из направляющих. Зажмем левую кнопку мыши. И одновременно зажмем клавишу Shift на клавиатуре. Это необходимо для того, чтобы при проведении линии последняя была строго горизонтальной или вертикальной. И протянем линию от первой направляющей до второй:

Проведенная линия линейки

Перекрестия на концах линии обозначают начальную и конечную точку отсчета. Осталось узнать, а какое же расстояние между этими двумя направляющими. Переводим взгляд в правый верхний угол окна, на панель “Инфо”:

Панель Инфо Photoshop

Обведенная область как раз и показывает расстояние, вычисленное Photoshop. Это линейные размеры.

1
W
- ширина (горизонталь), а
1
H
- высота (вертикаль). Мы измеряли горизонтальный размер (расстояние) при зажатой клавише Shift, поэтому по вертикали стоит
1
0
пикселей.

Так и должно быть. А по горизонтали стоит 940 пикселей. Это и есть расстояние между двумя направляющими. Точнее сказать, в данном случае это будет ширина графического баннера, изображенного на макете.

Аналогично измерим высоту этого баннера:

Вертикальная измерительная линия

И посмотрим, сколько она составляет в пикселах:

Вертикальный размер баннера

Высота равна 339 пиксела. Теперь у нас есть оба размера - высота и ширина, которые можно использовать при последующей верстке макета. Точно также производится измерение расстояния или размеров для любых объектов макета.

На этом все.


Стал счастливым обладателем чехлом из эко-кожи на авто Chevrolet Aveo (модель 2013 года).

До этого стояли обычные тряпочные мешки (чехлы), которые и смотрелись плохо (как может смотреться мешок?) и сидеть на них было не особо приятно. Постоянно сползали, забивались куда-то в угол.

При установке пришлось немного помучиться поначалу, пока не приноровился - потом дело быстро пошло. Чехлы - правда очень хорошие. Качество пошива - на уровне. По ощущениям - приятные на ощупь, неприхотливые. Когда натягивал - тянул что есть силы, им хоть бы что. Сидеть в креслах с такими чехлами - одно удовольствие.

С цветом - не прогадал (у меня серебристый металлик). Под расцветку салона подходят идеально, на 100% встали в этом плане. Цвет боковин (он не чисто-серый, а с еле заметным зеленым оттенком) сочетается с цветом торпедо и вставками в дверях.

Когда устанавливал, то столкнулся с такой проблемой, что нет подробной инструкции. Как и что откручивать, что надо снимать, а что нет. Та инструкция, что вложена в чехлы - ее можно смело выкинуть, к Chevrolet Aveo 2013 она практически полностью неприменима. Да и расписано там плохо.

На форуме Chevrolet еще год назад видел подробный фотоотчет одного из одноклубников, как он производил установку чехлов. Но вот когда столкнулся сам с такой необходимостью, сразу его не нашел. После поисков все же его обнаружил и решил разместить у себя - вдруг кому еще понадобиться?

Ниже привожу фотоотчет, немного дополненный мною:

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Отвертка должна быть широкой и достаточно длинной. Заводим левую руку под лежащую спинку в месте крепления, а правой отжимаем конусообразную шайбу внутрь. И толкаем спинку вверх - она легко выходит из крепления:

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

На самом деле там два пластмассовых кольца. Одно черное большое - со стороны малой спинки. Второе маленькое белое - со стороны большой спинки. Естественно, потерять их не желательно:

Чехлы Aveo Chevrolet 2013

У меня не получилось снять заднее сиденье, хотя и тянул вверх со всем старанием. Прочитал на форуме Chevrolet Cruze, как один товарищ тоже так тянул изо всех сил, пока не вытянул защелки вместе с пластмассовым креплением (а потом покупал новые). Я передумал снимать заднюю сидушку. Просто приподнял слегка вверх ее заднюю часть и руками завел внутрь тесемочки с крючками от чехла.

Там действительно нет ничего сложного (вот только “когти” настоятельно рекомендуется постричь перед натягиванием чехлов - иначе пострадает одно из двух, или чехлы или ваши “когти”). При отгибании сидушки вверх в районе ее крепления слышалось подозрительное пощелкивание, но этим все и обошлось:

Чехлы Aveo Chevrolet 2013

Снимание передних кресел. Удобнее натягивать чехлы на столе - не надо набигаться и можно вертеть сиденье, как необходимо:

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

На фото показан правый болт. Второй болт находится слева, под пластмассовой пластинкой, которая прикрывает небольшую металлическую косынку. Она на клипсах, достаточно слегка поддеть ее отверткой. После того, как болты откручены, нужно приподнять сиденье и потянуть на себя. Полозья выйдут из стопоров (там же, где и болты расположены) и из зацепов спереди (показаны на следующем рисунке):

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Отсоединять разъем можно очень легко и быстро - достаточно потянуть на себя защелку, которая видна на фото в выдвинутом состоянии. Когда она тянется на себя, то разъем проводов сам выходит из гнезда крепления. Аналогично и вставка его на место - слегка приткнуть разъем к гнезду и нажать защелку от себя. Разъем сам встанет на место:

Чехлы Aveo Chevrolet 2013

На обоих передних сидениях есть боковые пластмассовые пластины, внутри которых находится механизм регулировки наклона спинки. Ее снимать полностью не надо, да и не получиться. Достаточно открутить два самореза, расположенных спереди и сзади боковинки в нижней ее части. И снять ручку регулировки наклона - просто поддеть аккуратно отверткой, она на клипсах сидит.

После этого лучше всего деревянной линейкой заправить чехол под пластмассу. Сами чехлы пошиты с учетом этих боковин, так что много возиться не придется:

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Чехлы Aveo Chevrolet 2013

Как результат - фото моих чехлов, установленных на свой Chevrolet Aveo. Маленькая фотосессия. Фотографии есть фотографии, всего передать они не могут. Вживую чехлы смотряться еще лучше. Если одним словом - офигенно!

Aveo Chevrolet 2013

Aveo Chevrolet 2013

Aveo Chevrolet 2013

В ателье B&M зачем-то пошили для меня чехол на центральный подголовник, хотя его нет на моей машине и я его не заказывал. Ну да ладно - общий вид они не портят. Может, когда-нибудь куплю этот самый подголовник и поставлю.

На этом все.


При кодинге достаточно удобной штукой является автообновление страницы в окне браузера. То есть, это когда в открытом редакторе (пускай это будет мой любимый Sublime Text) вносятся правки или изменения в самом HTML или CSS-коде, а в окне браузера сразу наглядно видны эти изменения. Очень удобная возможность именно благодаря своей наглядности.

Но вот “беда” - почти все популярные браузеры не обладают такой способностью изначально. Их этому нужно научить. Самый простой способ - это установить в них расширения или дополнения, предназначенные именно для этой цели. Другой, более сложный способ - это воспользоваться скриптом LiveReload. Также я видел на GitHub одноименное расширение под редактор Sublime Text.

Но сегодня я остановлюсь на самом простом способе - встраивание расширений в браузеры. Первоначально хотел сам написать обзор таких дополнений, но наткнулся в Интернете на статью, в которой уже был описан такой способ для Chrome, Firefox и Opera. Поэтому изменил свое решение и сделал вольный перевод статьи, текст которой привожу ниже.

Далее - перевод статьи.


Иногда при работе в Интернете может возникнуть необходимость в автообновлении страниц. Например, необходимо постоянно следить за счетом в online-игре, регулярно проверять новости или же с нетерпением ждать своих оценок на сайте колледжа. В предыдущей статье шла речь об online-сервисе, служащем для подобных задач - “Refresh This”. Однако на сегодня его уже не существует, он благополучно канул в лету. Но ведь потребность в такой задаче у нас осталась.

Если все же есть необходимость в таком Интернет-сервисе, то можно попробовать

1
lazywebtools
, но он кажется не слишком надежным.

Поэтому сегодня мы поговорим о возможности встраивания автообновления страниц прямо в браузер (Chrome, Firefox или Opera), без нужды использования сторонних служб.

Автообновление в Google Chrome

Для того чтобы задействовать автообновление страниц в Chrome, нужно скачать и установить расширение “Auto Refresh Plus” с ресурса Web Store. После установки значок расширения появиться в панели инструментов браузера, в секции расширений. Чтобы включить автообновление выбранной страницы, нужно кликнуть мышью на этом значке. Появится очень простое окошко настроек расширения:

Auto Refresh Plus Chrome

В нем необходимо выбрать интервал времени, через которое будет выполняться автообновление. Можно выбрать заранее заданные величины, а можно установить и свою собственную. И затем нажать кнопку Start. Окно настроек закроется, а на иконке расширения в панели инструментов будет отображаться счетчик, работающий в обратном порядке - на уменьшение. Как только он достигнет заданного значения, страница в окне браузера обновиться автоматически. Чтобы остановить обновление, снова щелкните на иконке расширения и в открывшемся окне нажмите кнопку Stop.

Автообновление в Mozilla Firefox

Для интеграции подобной возможности в браузер Firefox, нужно скачать и установить дополнение “Auto Refresh”, а затем перезагрузить браузер. Теперь открываем интересующую нас страницу и выбираем интервал времени, через который она будет обновляться, путем правого щелчка мыши на иконке дополнения “Auto Refresh”:

Auto Refresh Firefox

В настройках можно выбрать автообновление для отдельной страницы или же для всех открытых вкладок. Помимо прочих настроек, есть и еще один пункт - принудительное обновление страницы “Hard Refresh”. В списке представлены интервалы времени, установленные по умолчанию. Но можно задать и свой собственный, выбрав пункт меню “Customize”.

Автообновление в Opera

Возможность автообновления страниц в браузере Opera встроена по умолчанию, поэтому нет необходимости устанавливать какие-либо расширения. Чтобы задействовать такую функцию, достаточно щелкнуть правой кнопкой мыши на любом месте страницы и выбрать в выпадающем меню интервал обновления в разделе “Reload Every”. В браузере уже заданы интервалы по умолчанию, но можно выставить и свой вручную, перейдя в раздел “Custom”:

Reload Every Opera

Чтобы остановить автообновление страницы, снова откройте контекстное меню и нажмите пункт “Never”.

Заключение

Такими простыми способами можно настроить автообновление страниц в браузерах Google Chrome, Mozilla Firefox и Opera. Но вот для еще одного популярного браузера - Internet Explorer - я так и не нашел ничего подобного. Единственное, что я могу посоветовать людям, пользующимся IE - это перейти на любой из трех названных ранее, чтобы полноценно пользоваться всеми возможностями Интернета.

Оригинал - How to Auto Refresh Pages in Chrome, Firefox and Opera

На этом все.


Просматривал один из видеокурсов по верстке сайта и разворачиванию его на CMS Joomla.

И столкнулся с такой вещью, как вложенность слоев. В видеокурсе был рассмотрен очень наглядный и интересный пример, как с помощью вложенных слоев можно создавать раздвижной фон сайта. Сперва было немного непонятно, но потом все встало на свои места. До этого момента, разбирая готовые примеры верстки, никогда не сталкивался с таким приемом.

Конечно, можно сохранить где-нибудь этот видеоурок и просматривать его, если забыл какие-то моменты. Но показанный в нем прием мне так понравился, что я решил описать его сам, своими собственными словами. Более того, благодаря этому приему для меня “открылась” возможность работы с вложенными слоями. Оказалось, это достаточно простое и эфективное решение, которое можно применять при верстке на практике. И, как мне кажется, данное решение является 100%-но кроссбраузерным.

И так. Имеется сайт с неоднородным фоном. Сайт планируется создавать с подвалом, прижатым книзу. Так как фон неоднородный, то необходимо сделать так, чтобы он подвижным. Он будет состоять из двух частей - верхней части, неподвижно закрепленной вверху страницы. И нижней части, которая будет всегда прижата книзу сайта и перемещаться вместе с подвалом вверх-вниз взависимости от величины контента в средней части:

Неоднородный фон страницы

Как будем поступать. Выделить и вырезать фон из psd-макета не составляет проблем. Затем сохраняем выделенный фон в виде jpeg-файла. После этого нужно разрезать полученную картинку пополам. В результате получиться две части одного фона - верхняя и нижняя. Верхнюю разместим вверху страницы и закрепим там. А нижнюю часть поместим вниз сайта и сделаем так, чтобы она была постоянно прижата к нему. И так, выделили, разрезали и сохранили. Все у нас получилось.

Теперь начинается самое интересное. Будем создавать каркас сайта и в нем реализовывать нашу задумку. Но для начала набросаем схему-каркас сайта. Она очень проста и создана мною в качестве примера:

Каркас будущей страницы

Смотрим и видим пять слоев на div’ах, которые вложены один в другой. Первый слой с классом .wrap является оберткой, на которую возложена задача центрирования страницы и задания ей определенной ширины. Второй слой с классом

1
.fon-bot
предназначен для размещения нем фонового изображения, в частности - нижней части фонового изображения сайта. В этот слой вложен еще один слой с классом
1
.fon-top
, в котором расположена в качестве фона верхняя часть картинки. И, наконец, самый последний и глубоковложенный слой - это будущий контент сайта с классом
1
.content
.

HTML-каркас создан. Теперь нужно прописать стили для него, чтобы он “ожил”. Делаю так:

Раздвижной фон страницы

Слой

1
.wrap
- тут все понятно без лишних слов. Далее - слой
1
.fon-bot
. В нем задается фоновая картинка, которая прижимается с помощью свойства
1
background-position
в правый нижний угол блока. Посмотрите на значения этого свойства:
1
100% 100%
. Это как раз и задает фоновому изображению положение в правом нижнем углу. Фактически, теперь она будет постоянно прижата книзу блока
1
.fon-bot
, что нам и требовалось.

С точностью до наоборот поступаем с блоком

1
.fon-top
. Также устанавливаем для него фоновое изображение, но позиционируем его в левом верхнем углу с помощью значений
1
0 0
. Теперь картинка будет всегда прижата кверху этого блока. Фактически, поставленная перед нами задача уже выполнена.

Но для наглядности в пример добавлен еще один, пятый блок

1
.content
. На практике он выполняет функцию контейнера для всего содержимого страницы сайта. Вставим внутрь этого слоя фоновое изображение и зададим ему минимальную высоту, которая превышает высоту блоков
1
.fon-top
и
1
.fon-bot
в сумме (точнее - высоту фоновых картинок обоих слоев). Также отцентруем фоновую картинку блока
1
.content
.

В итоге получим следующий результат (чтобы пример веселее смотрелся, в качестве фоновых картинок вставил красоток-сестренок Марианну и Камиллу Давалос):

Раздвижной фон страницы

При увеличении значения

1
min-height
слоя
1
.content
верхняя и нижняя картинки будут разъезжаться, а при уменьшении - съезжаться. Если не ошибаюсь, описанный мною способ называется методом “раздвижных дверей” (сам такой метод не изучал, но встречал в книгах по CSS такое упоминание.)

Полезным для себя вынес такой прием, как работа с неоднородным фоном страницы.

На этом все.


Столкнулся с градиентыми переходами на psd-макете. Сразу скажу, что данная статья не претендует на полный и глубокий обзор CSS-градиентов.

Это лишь маленький практический “кусочек”, посвященный тому, как решить поставленную задачу. И еще один момент - вопрос, освященный здесь, не является таким уж сложным. Но первоочередная цель моего скромного сайта - служить записной книжкой для своего владельца. Поэтому все записи здесь можно рассматривать как вехи (milestones) в долгом пути верстальщика.

Пример с градиентным переходом на реальном psd-макете показан ниже:

Градиентный переход на макете

Видим, что имеется градиент, который “растянут” по горизонтали. Начинается он в левой крайней точке, затем имеется плавный переход цвета в центре, и в правой крайней точке снова возврат к прежнему цвету (как в левой крайней точке). Такие переходы оттенков называются цветовыми переходами

1
color stops
.

Ниже приведу наглядную картинку, чтобы было более понятно, о чем идет речь. Взята она с сайта CSS Tricks:

Наглядный пример цветового перехода градиента

Цветовые переходы являются “частью” CSS-свойства

1
gradient
. То есть, если до этого вы привыкли создавать плавные переходы цветов (градиенты) только с помощью двух точек, которые имеют крайние положения -
1
0%
и
1
100%
, то теперь вам нужно освоить такой момент, что градиент можно создать с помощью не только двух, а много больше точек. Такие точки могут находиться не обязательно в крайних положениях, а в любом месте элемента.

Кстати, положение таких точек

1
color stops
можно задавать не только с помощью процентов, но и “жестко”, фиксированными величинами, такими как пиксели
1
px
.

Благодаря множественным цветовым переходам можно создавать красивые эффекты. Пример, показанный в самом начале, является “бледным” отражением того, на что способен CSS3. Другое дело, что на сегодняшний день браузеры поддерживают не все его возможности, но об этом немного ниже.

Итак, вернемся к градиентам на psd-макете. Мы разобрались, что из себя представляет такой цветовой переход. Осталось решить, как воплоить его в коде. Самый простой (надежный), удобный и быстрый способ - это воспользоваться замечательным online-инструментом “ColorZilla”.

Открываем его в браузере и видим изначально такую картину:

Инструмент ColorZilla

В первую очередь нас интересует центральная цветовая полоска, как на картинке вверху. Это своеобразная палитра, на которой мы будем создавать наш собственный градиент. Нижние квадратики - это графическое отображение цветовых переходов

1
color stops
. Можно передвигать их по горизонтали, тем самым изменяя местоположение цветового перехода в градиенте.

Само местоположение можно задать примерно, а можно и точно - в окошке “Location”, где устанавливаются проценты. В самом квадратике отображен цвет, установленный для перехода. При щелчке мыши на нем в окошке “Color” отображается цвет самого перехода. По умолчанию имеется два

1
color stops
(помимо двух крайних), которые можно удалить с помощью кнопки “Delete”.

Берем с помощью пипетки цвета градиентов с psd-макета:

Цветовые переходы на макете Photoshop

и переносим их на online-генератор. Последовательно, слева направо. Для этого выбираем на панельке ColorZilla

1
stop colors
, одинарным щелчком мыши выбираем окошко Color и в диалоговом окне (кстати, очень похожем на такое же в Photoshop) вставляем цвет. В результате получаем необходимый цветовой переход:

Созданный цветовой переход

В окне “Preview” виден готовый результат, а в окне CSS - готовый CSS-код. Его можно скопировать и вставить в свой проект.

Аналогично online-генератору Colorzilla, можно воспользоваться еще одним, подобным - “CSSMatic”:

Online-генератор CSSMatic

Конечно, создавать цветовые переходы с помощью CSS-кода правильно во всех отношениях. Это правильно с точки зрения семантики, с точки зрения стандартов, с точки зрения быстроты загрузки сайта. Есть только одно но - не все браузеры “успевают” за стремительным развитием стандартов. Поэтому в таких браузерах подобные красивости не будут отображаться.

Есть такой замечательный сайт под названием “What can i use” (“Что я могу использовать”), на котором можно проверить, какой браузер и какой версии поддреживает то или иной CSS-свойство. Давайте откроем его и посмотрим, как обстоит дело с нашим градиентным переходом в браузерах:

Поддержка CSS Gradient в браузерах

Видим, что практически во всех он будет отображаться. Кроме одного - Internet Explorer v8 и Internet Explorer v9. Так что пользователи “ослика” не увидят всех красивостей.

На этом краткая статья по градиентам окончена.