Эффект вращения миниатюр в гаджете популярные сообщения.

Доброго времени суток. Рада приветствовать всех друзей, читателей и гостей блога.

Сегодня шпаргалка о том, как с помощью небольшого кода CSS сделать эффект вращения миниатюр в гаджете популярные сообщения.

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

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

Смотрим, что должно в итоге получиться.

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

Далее идём во вкладку шаблон. Находим строку ]]></b:skin> (прочитайте, пожалуйста это сообщение, если пока не знаете, как это сделать правильно). И сразу над ней устанавливаем следующий код.

.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}

А сейчас изменим некоторые значения стилей в коде (я их выделила цветом). Сделаем миниатюру круглой формы и поменяем  цвет и толщину рамки. Имеем примерно следующее.

В коде в 3-х местах меняем значение border-radius: 5px на 50 .
border: 2px solid #CCC;height: 80px;width: 80px- ширина рамки, цвет, высота и ширина миниатюры. То же самое во второй строке (при наведении курсора), выделенной красным.

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

Гаджет популярные сообщения с кнопкой Гугл+.

На этом заканчиваю. Спасибо, что заглядываете в мои шпаргалки. Всем удачи.

Мне будет очень приятно, если вы поделитесь этим с друзьями.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email