Закругление изображения с эффектом на CSS
 | |
| Как можно заметить, что стало очень можно закруглять изображение на сайте. Здесь разберем как это делать и еще плюс добавим к этому уникальный эффект. Который будет заключаться в том, что по умолчанию картинка полностью круглая, но когда вы наводите клик, она принимает свой по умолчанию образ по своим размерам. Как понимаете можно все сделать на фотошоп, но сейчас в век продвижение, можно все создать на стилях, и это будет красиво также смотреться, но при этом вы еще можете редактировать как вы считаете нужным. А так на некоторых ресурсах, замечал такой эффект на вид материале, что смотрелось оригинально. Здесь вам думаю будет виднее здесь можно применить и на каталоге фотографий, или где много картинок. Но надо еще понимать, что если везде ставить, то не очень будет смотреться, так как куда не глянь, то много, лучше сделать где то на одной функций, чтоб было все уникально и своя такая фишка. Если вам нужно просто закруглить на портале изображение, это может быть любое, для этого есть очень простой код. Код img { width: 200px; height: 200px; border-radius: 50%; } Но мам нужно, чтоб было видно визуально, и безусловно, чтоб присутствовал при этом красивый эффект. И теперь с помощью псевдо класса hover, можно сделать, а точнее возврат картинки, которая по умолчанию идет. Установка: Простой код, в который ставим ссылку, но здесь вам нужно лучше сделать, чтоб гирина и высота совподала, но можно и разные. HTML Код <img src='http://zornet.ru/Aben/SnmGi-173.jpg' /> Осталось поставить стили, это можно в CSS или ниже кода и заключаем в style, как показано ниже. CSS Код <style> img { width: 350px; height: 350px; border:1px solid #ddd; border-radius: 50%; box-shadow: 0 2px 5px #aaa; margin: 5% auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } img:hover { border-radius: 3px; } </style> Просмотр демонстраций на материал, переходим и наводим и смотрим этот эффект, и потом поймете, что ставить разные размеры, то может не получится полноценный круг.  Источник: Dbmast.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
