Если Вам надоело стандартное, квадратное оформление аватаров или миниатюр новостей в Вашем блоге, то можно легко “закруглить” картинки и придать им другой вид, используя для этого только средства CSS.
Если внимательно приглядеться к картинке выше, то можно разглядеть не только круглый аватар, но и несколько других элементов и эффектов. Во-первых, это рамка в которой находится аватар, во-вторых внутреннюю тень, а так же выпуклость и эффект стекла, в виде светлого отблеска на аватаре. Код такого оформления мы рассмотрим чуть ниже, а для начала ознакомимся с простым примером.
Допустим мы хотим закруглить края изображения. Для этого достаточно будет добавить всего лишь одно CSS-свойство – border-radius.
Теперь рассмотрим полный пример. Для начала подготовим часть HTML-кода:
Перейдем к CSS-стилям:
Результат и код можно также посмотреть на моей страничке на <a href=”http://codepen.io/4gray/pen/iBpLm” target=”_blank”сервисе codepen</a>.
Если вы ищете другие полезные сниппеты, то загляните в рубрику на нашем сайте.
Опубликовано
Подробнее
О сайте
ArtsLab
Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.