Оформление фото на главной модуля "Фотоальбомы" с помощью CSS3

Говорить о стандартном оформлении фотографий не буду - всё и так наглядно и понятно, унылые картинки, да росчерки пунктирных разделителей.

Затратив чуть меньше 5-и минут, получим совсем другой результат:

Посмотрите демо:

Как такое сделать?

1. Во-первых, откройте панель управления сайтом и войдите в настройки модуля "Фотоальбомы". Выставите заранее размеры нужной вам демо-картинки, к примеру, для демо-страницы я использовал размеры демо-картинки 200х160.

2. Войдите в редактирование шаблона "Фотоальбомы - Главная страница фотоальбома" и найдите в нём код

Code

$BODY$

перепишите его так:

Code

Сохраните изменения.

3. Теперь войдите в редактирование шаблона "Фотоальбомы - Вид фотографий" и замените весь имеющийся в нем код на следующий:

Code

<li><a href="$PHOTO_LIGHTBOX_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a></li>

Сохраните изменения.

4. В заключении, в таблицу стилей CSS добавьте стили для оформления фотографий:

Code

ul.box {
  position: relative;
  z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0; }

  ul.box li {
  position: relative;
  float: left;
  width: 200px;
  height: 160px;
  padding: 2px;
  border: 1px solid #efefef;
  margin: 0 30px 30px 0;
  background:#fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

  ul.box li:before,
  ul.box li:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 70%;
  max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  height: 55%;
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg); }

  ul.box li:after {
  left: auto;
  right: 10px;
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg); }

Не забудьте вот здесь (отмечено красным) поменять размеры на размеры демо-картинки, которые вы указали в настройках модуля "Фотоальбомы"

ul.box li {
position: relative;
float: left;
width: 200px;
height: 160px;
padding: 2px;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background:#fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 4