Главная » Все для WordPress » Как сделать круглое изображение в WordPress с помощью CSS

Как сделать круглое изображение в WordPress с помощью CSS

Приветствую друзья, сегодня решил заморочиться вопросом как сделать круглое изображение в ленте WordPress. Видел на одном из блогов — визуально понравилось, в итоге сделал для себя, потом убрал, но тем не менее считаю нужным опубликовать данный материал — для кого то, будет полезным.

Как сделать круглое изображение в ленте WordPress

Округлять наше изображение будем при помощи обычного CSS кода, но давайте сначала посмотрим о чем идет речь:

Обычное изображение:

Какой хостинг выбрать

Круглое изображение:

Второй вариант — то чего мы хотим добиться — круглое изображение, миниатюра. И так, идем далее, для начала нам нужно открыть код страницы, я буду показывать на примере браузера Google Chrome: 

Для этого кликаем правой кнопкой мыши по нужном нам объекту — картинке в ленте новостей, либо нажимаем сочетание клавиш Ctrl+I (для Google Chrome).

круглое изображение

Практически в любом шаблоне WordPress, изображения заключаются в специальный div:

Делаем круглое изображение в WordPress

Ищем нужное название класса которое мы будем редактировать, в нашем случае класс называется «post-thumbnail».

Далее идем в файл стилей — style.css, лежит в корне папки выбранной вами темы, ищем класс .post-thumbnail img — приставка img будет обозначать, что атрибуты будут заданы для изображения внутри слоя.

Вот код моего оформления миниатюры:

Для того, чтобы добиться скругления как было показано на картинке в начале поста — меняем код на:

Точнее добавляем еще одно свойство border-radius: 50% — мы добавили скругление изображения на 50%. Вуаля — изображения примут красивую округлую форму

И это все???

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

 

Видишь кнопочки сверху?

Если тебе понравился материал - поделись им с друзьями и коллегами, на форумах и в соц. сетях. Чтобы ничего не пропустить - подпишись на обновления. Спасибо ;)

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*