Украшаем блоки в Artisteer

Опубликовано: 2019-11-18
Редактировалось: 3 раза — последний 15 апреля 2012
Просмотров: 587
0
: 0
Как добавить дополнительно, нестандартные тени css к блокам в шаблонах сделанных в Artisteer. В принципе стандартные тени css и свечение можно добавить и в самой программе, при создании шаблона. Но речь не об этом. Попробуем добавить тени к блокам с помощью box-shadow, такого вида:

1. Один горизонтальный изгиб внизу блока.


Такой стиль оформления блоков Вы можете видеть на нашем сайте:


Делается это следующим способом:
1. Ищем в файле стилей .css следующий класс оформления блока:


И добавляем код как указано:

Код PHP:
  1. -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  2. -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  3. box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  4. -moz-border-radius:6px;
  5. border-radius:6px;

Таким способом мы добавляем внутреннее свечение в блоке, где 15px. это ширина внутреннего свечения (его можно и не добавлять, если надо что бы внутри блока свечения не было).

2. Делаем непосредственно тень внизу блока, ищем в .css следующие строки:


И добавляем код как указано:

Код PHP:
  1. z-index:-2;
  2. -webkit-box-shadow:0 0 10px rgba(0,0,0,0.6);
  3. -moz-box-shadow:0 0 10px rgba(0,0,0,0.6);
  4. box-shadow:0 0 10px rgba(0,0,0,0.6);
  5. -moz-border-radius:100px / 10px;
  6. border-radius:100px / 10px;

Где 10рх. это выступ тени.
Вот и все для вертикального меню добавлять практически так же в соответствующих классах. Параметр Z-index: служит для отображения тени под блоком (возможно его придеться делать меньше или больше), а не на поверхности блока.

2. Приподнятый блок.


На блоках это будет выглядеть так:


Находим в стилях .css следующий класс:


И добавляем код как на рисунке:

Код PHP:
  1. border-radius:6px;
  2. -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  3. -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  4. box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
  5. -moz-border-radius:6px;
  6. -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  7. -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  8. box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  9.  

Обращаю внимание что параметр border-radius:6px; в начале кода это величина скругления углов, и если Вы не задавали его в Artisteer то он не нужен или его надо поменять на величину заданную Вами при создании блоков в проекте.

ЗЫ: при использовании кодов не забывайте убирать номера строк после копирования кода. Так же не следует забывать, что в браузере IE данные обработки выводится не будут (будут видны стандартные блоки) так как этот браузер не поддерживает стили теней и закругленных углов.
Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное из блогов

skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6
artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
samson
Так как многих давно интересовало как сделать суффиксы модулей для Джумла в Artisteer 4.1-4.2 то выкладываю...
7 - +11
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9