CSS - два способа создания тени для картинки

CSS - два способа создания тени для картинки

Столкнулся с интересным примером или задачей - не знаю, как сказать.

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

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя - повторение мать учения, как говорится.

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

Первый способ - это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут - не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

И результат работы этого кода:

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

Второй способ - более правильный с точки зрения семантики. Чтобы “набросить” тень на изображение, нужно поместить его в блок в качестве фонового изображения.

В остальном все остается точно таким же, как и в первом примере. Также создается внутренняя тень для блока, но при этом нет необходимости “опускать” картинку с помощью z-index.

Код второго способа показан ниже:

Картинка - результат работы этого кода:

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

Photoshop - магия горячих клавиш (hotkeys)

В этом обзоре мною собраны описания “горячих” клавиш в Photoshop.

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

Они значительно ускоряют и упрощают работу в Photoshop. Конечно, перед этим необходимо их заучить - это единственная трудность. Но как только сочетания клавиш будут запомнены, результаты на практике будут сразу видны. Это можно ощутить на собственном опыте.

Описания приемов работы с “горячими” клавишами собраны мною постепенно, по частям. Те “секреты”, которые я узнавал в своей работе с программой Photoshop, я постепенно объединял в данном небольшом руководстве, которое можно скорее назвать памяткой верстальщика в Photoshop.

Горячие клавиши панели инструментов Photoshop

С левой стороны рабочего окна Photoshop имеется плавающая панель инструментов, которая является незаменимым способом выбора нужного набора инструментов.

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

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

Я остановлюсь на другом моменте. Для каждого инструмента на этой панели имеется “привязанная” к нему “горячая клавиша”. С помощью этих hotkeys выбирать или переключаться между инструментами панели можно очень быстро.

Не говоря уже об удобстве. Ниже приведу список таких “горячих клавиш” панели инструментов, применительно к работе верстальщика:

  • “Перемещение” - V
  • “Прямоугольная область” - M
  • “Рамка” - C
  • “Пипетка” - I
  • “Горизонтальный текст” - T
  • “Рука” - H
  • “Масштаб” - Z

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

Запомнить эти немногочисленные сочетания очень просто. Они являются сокращениями от английского названия соответствующих инструментов:

  • V - MoVe
  • M - Marquee
  • C - Crop
  • I - Invert
  • T - Transform
  • H - Hand
  • Z - Zoom

Особенность работы с инструментом “Текст”

При верстке шаблона сайта из PSD-макета одним из моментов является работа со шрифтами. То есть, когда дело доходит до передачи и оформления шрифтов через правила CSS.

Для точного соответствия шаблона сайта PSD-макету необходимо однозначно знать все свойства шрифтов, использованных дизайнером при создании макета. Это семейство шрифтов, насыщенность шрифта, его размер и цвет.

Естественно, для этого нужно воспользоваться инструментом “Текст”. Но имеется один момент. Например, стоит задача определить свойства шрифтов, расположенных в разных блоках макета, подряд.

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

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

Горячие клавиши при работе со слоями

Несколько моментов, связанных с работой со слоями. А именно, при объединении и выделении слоев.

Имеется объект макета, состоящий из нескольких слоев. Давайте покажем, из каких именно он состоит:

[ ][1] Несколько слоев изображения в Photoshop

Первоначально необходимо удостовериться, что именно эти слои отвечают за прорисовку данного изображения. Для этого в Photoshop имеется очень удобное сочетание горячей клавиши Alt и левой кнопки мыши (ЛКМ). Нажимаем и держим зажатой клавишу Alt .

А затем щелкаем ЛКМ на значке “глаза” напротив слоя “Layer 5”. При этом все остальные слои макета отключаются и мы видим только то изображение (точнее - слои), которое “рисует” данный слой:

[ ][2] Отключенные слои Photoshop

Это чрезвычайно удобный способ отключения ненужных слоев. Чтобы вернуть назад в “как было”, поступаем точно также. Опять нажимаем и держим зажатой клавишу Alt и кликаем по “глазику” напротив слоя “Layer 5”. Все остальные слои автоматически возвращаются в исходное состояние, при этом слой “Layer 5” также остается активным.

Вернемся к предыдущему шагу, когда “лишние” слои у нас были отключены. У нас имеются только два слоя, оставшихся после действий Alt + ЛКМ. Нам нужно объединить (свести) все оставшиеся слои в один, чтобы потом можно было сохранить изображение одним файлом.

Выделяем два оставшихся слоя. Для этого зажимаем клавишу Ctrl и левой кнопкой мыши (ЛКМ) последовательно выделяем каждый из слоев, кликая одинарным щелчком мыши на этих слоях.

Объединяем выделенные слои. Тут еще проще - для этого служит сочетание “горячих” клавиш Ctrl + E . Нажимаем их и видим результат:

[ ][3] Сведенный в один слой

Теперь можно сохранять полученное изображение как обычно, через “Файл - Сохранить для Web и устройств” с помощью длинного сочетания клавиш Alt + Shift + Ctrl + S . Также стоит упомянуть, что при работе со слоями всегда можно вернуться назад, нажав стандартную комбинацию клавиш Ctrl + Z .

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

Ruler для измерения расстояний объектов на макете

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

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

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

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

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

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

Обведенная область как раз и показывает расстояние, вычисленное Photoshop. Это линейные размеры. - ширина (горизонталь), а - высота (вертикаль). Мы измеряли горизонтальный размер (расстояние) при зажатой клавише Shift , поэтому по вертикали стоит пикселей.

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

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

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

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

Chevrolet Aveo 2013 - установка чехлов ателье B&M

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автообновление HTML-страниц в браузерах Chrome, Firefox и Opera

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

📎📎📎📎📎📎📎📎📎📎