ali-partners-banner

Как быстро заработать в Интернет и, якобы, (простите за прямоту) Вам ни хрена не придется делать - сегодня советчиков пруд-пруди. Но, как гласит народная мудрость: Дешевый сыр только в мышеловке...


CSS Circular Image. Стилизация изображений на чистом CSS

Пост №   136  от 3 ноября 2015   |  Категория: Design, WEB мастеру, Новости  |  Комментариев нет Print

css-hacks Как известно, с CSS сегодня можно делать фантастические преобразования всего контента и, в частности — изображений.

Сегодня рассмотрим простенький, но эффектный вариант circular-image = «квадоатирование» круглых изображений при наведении мышки…


Как Вам, наверняка известно, округлить можно любую картинку, применив к ней стиль width: 50%; height: 50%; или цифрами — 50px. Но сегодня у нас будет иной пример — обратное преобразование круглой картинки в квадратную, причем, только при наведении мышки.

И так, стили:

Как видите, в коде задан определенный размер картинки — 80px. Но Вы можете варьировать размерами по своему усмотрению как угодно. К примеру, можно на основе класса circular-image можно создать красивое меню или галерею… В общем, экспериментируйте и все получится!

Теперь, чтобы вывести этот метод на страницу, пропишем такой кодик…

Замените все мои ссылки на свои и смотрите эффект…

Удачи и… до новых встреч!

Понравился сайт или статья? Поделитесь с друзьями, кликнув по соответствующей кнопке!

e-Commerce Partners Network
1 звезда2 звезды3 звезды4 звезды5 звезд (Голосовало: 1 )
Загрузка...

Метки: CSSDesignWEB мастеруСекрты со всего света
Обновление статьи: 02.11.2015
Просмотров:   1104
Короткая ссылка: http://tinyurl.com/qywrgb8

Подишись на сообщения блога по E-mail и получай свежие новости в числе первых!


Наберитесь терпения - новые публикации в процессе осмысления...


На сегодня в блоге...

  • Подписчиков: 3270
  • Записей: 191
  • Страниц: 26
  • Рубрик: 15
  • Меток: 162
  • Комментариев: 33


Добавить комментарий

Комментарии к статьям разрешены только авторизованным пользователям.
Пожалуйста зарегистрируйтесь или войдите, используя свой логнн.

Посетители сайта

Блуждали по сайту сегодня: 104
Смотрят страницу: 1 ( 1 гость)
Из них ботов:

Календарь публикаций

Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031  

MasterPRO в Twitter’e

Уникальный совет, как похудеть без финансовых затрат…: В наше время, когда изобилие… goo.gl/fb/Vq91W6

About a month ago from Master PRO's Twitter via Google · reply · retweet · favorite

Календарь праздников


Admin

Регистрация

The Best OnLine Radio

Рубрики

  • Страницы

    Архив


    Prikolizmy.ru: Видео приколы - AeonBlackSun :: Любимое