КАК СДЕЛАТЬ ТЕНИ

В ADOBE MUSE

И НУЖНЫ ЛИ ОНИ

ВООБЩЕ?

Док нужны или нет?!

В одно время даже мода была на тени в индустрии сайтостроении и все кому не лень делали их на своих сайтах. Однако с приходом моды на Flat дизайн, про моду теней все забыли.

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

Как это реализовать?

Теперь, когда мы выяснили, что тени в некоторых случаях бывают просто необходимы, давайте поговорим как их реализовать с помощью Adobe Muse.

Есть несколько вариантов, как это реализовать:

 

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

2. Используя дубликат текста. Это выглядит следующим образом. Создается нужный текст. Дублируется. Меняется цвет у второго текста на черный. Далее один текст накладывается на другой с незначительным смещением и выглядит это как тень.

 

Минусом данного способа является то, что Adobe Muse не совсем "любит", когда элементы располагаются подобным образом и возможно будет ситуация, что на какому-то браузере, один из текстов будет смещен не должным образом и в результате будет ужасная непонятная картина творится на сайте.

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

либо сделать своими руками, выполнив нехитрую инструкцию:

1 шаг - Вам нужно тексту, у которого должна быть тень,  придать тег h1 либо любой другой тег, который будет идентифицировать ваш текст.

В старых версиях программы (Adobe Muse 7.1-7.4), данный тег нужно придать через передвижную панель.

В данной панели необходимо зайти во вкладку "Стили абзацев".

Далее с помощью нижней иконки, кликнув по нему, нужно создать новый стиль.

После этого, нужно кликнуть по созданному стилю и нам откроется окно параметров стиля.

Здесь из раскрывающегося списка напротив "Тег абзаца", нужно выбрать тег h1 либо любой другой, если это не главный заголовок вашего сайта.

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

Версия программы Adobe Muse CC 2014

Версия программы Adobe Muse CC 2015

2 шаг - нужно добавить CSS стили теней. Их нужно вставить в поле HTML для <head>, в окне "Свойства страницы"

CSS стили выглядят следующим образом, можете скопировать:

 <style> h1 { text-shadow: 1px 1px 1px rgb( 0, 0, 0 ); } </style>

Пояснение параметров:
h1 - выбранный нами тег, для идентификации.
1px - смещение по горизонтали.

1px - смещение по вертикали.

1px - радиус размытия.

rgb( 0, 0, 0 ) - цвет, в данном случаи черный.

Обязательно жмите «поделиться», оставляйте комментарий и подписывайтесь!

Pro Adobe Muse

Поделиться:

Подписаться

Похожие записи

Контакты:

«Электронная почта»

 support@proadobemuse.ru

Дружите: