No Image

Простой способ сделать граватар круглым.

9
29 января 2019

коуглый граватар на блоге
Привет всем на wpsovet.ru. Сегодня запускаю рубрику про дизайн, и это первая статья в ней. Я давно перестал использовать плагины, и ставлю их только в крайнем случае, сейчас их у меня 10, два из которых думаю менять на код, но сегодня не об этом. Когда я писал свой шаблон, то мне захотелось сделать граватары круглыми (это иконки авторов комментаторов), потому как, и смотрится приятнее и больше подходит по дизайну блога, и стал думать как это осуществить.

И вот я затупил, причем сам от себя этого не ожидал, а ответ был на поверхности. Не буду лить воду, квадратные и улучшенные мной, выглядят так, смотрится намного лучше.
пример круглого граватара
Но чтобы так сделать придется немного повозиться, совсем чуть-чуть. Для начала нам надо определить какой стиль у вас отвечает за вывод граватара комментатора, для этого используем инструмент любого браузера “Просмотр кода элемента”.

Узнаем необходимые сведения у аватаров.

Просто жмем правой кнопкой мыши и выбираем этот пункт, подробности на снимке ниже.
скругление углов у граватара

  1. Наводим курсор на любой граватар, которому будем скруглять углы, и жмем на нем правой кнопкой мыши.
  2. Из выпадающего меню выбираем пункт “Просмотр кода элемента”, многие ставят специальные плагины для браузеров типа Firebag, но я не вижу разницы между ними, лишь только засорите память.
  3. Тут программа показывает вам расположение картинки, в принципе уже здесь можно увидеть класс, у меня он называется avatar, но проверить для надежности все равно надо.
  4. Вот тут можете быть уверены в названии, на скриншоте видно, что за внешний вид комментатора и вправду отвечает “avatar”.

Темы у всех разные, а следственно и стили у сайта так же будут другие.

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

Скругляем углы средствами CSS.

Главное не бойтесь, все очень просто. Для начала выберите чем вы будете пользоваться, для изменения кода, я буду средствами вордпресса, просто заходите в “административную панель”->”внешний вид”-> “редактор”-> “файл style.css”.

Не забываем делать резервные копии изменяемых файлов

Сейчас нам надо найти строчку с данным классом, а он у нас в названием “avatar”, смотрите скриншот и к нему описание.
css круглые углы

  1. Путь до редактора.
  2. В правом столбце находим файл style.css, обычно он открывается стандартно первым, но все же.
  3. Нажимаем комбинацию клавиш Cntrl+F, для вывода поиска по странице. Водим название класса, который мы определили для граватаров, и нажимаем ввод.
  4. Может быть случай, что поиск найдет не один вариант, у меня есть .avatar-top img и .avatar-comment, их не трогаем, потому что это совсем другие строки, они нам не нужны. Смотрите я нашел то, что мне надо, смотрите выделенную строчку.

Теперь просто приписываем к этому стилю еще три параметра, вот они:

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;

В итоге у вас должно получиться так:
граватар в округлыми краями

Поясню, данные строчки вводят параметр border-radius, он делает углы у картинок скругленными, у него есть много величин пиксели, пункты, но нам подойдут именно проценты. Логично будет сказать, чтобы сделать идеальный круг, нам всего-то нужно прописать в параметре величину 50%.  Сохраняем все изменения и радуемся красоте.

Если у вас стоит плагин кэширования, то очистите весь кэш, а то изменения не увидите.

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

P.S. Скажите, а вам статья помогла? Если да, то оставьте свой отзыв в комментариях, а если нет, то тоже пишите?

Подробнее читайте тут
Комментировать
9
  • Олег

    А такого я не знал. Весьма интересная информация. Было полезно узнать как сделать круглый граватар.

  • Игорь

    Я думаю, что способ все равно не такой простой. Не каждый обычный человек поймет или у него займет это достаточно много времени. Для таких людей я думаю будет проще просто загружать на каждый сайт свой аватар.

  • LeLiK

    Я кстати тоже первый раз вижу! Но кривые руки не с могли с первого раза все правильно сделать, а потом понял свою ошибку и исправил! Спасибо автору за статью, реально полезная вещь!

  • Дмитрий

    Если разобраться, то все довольно просто. Хотя раньше для меня это для меня было загадкой.

  • Таня

    Интересно было почитать. Вроде ничего сложного, но сразу додуматься до такого не просто.

  • Вероника

    Если это самый простой способ, то тогда какие же сложные я даже не представляю. Я с этим способом 2 дня возилась, но все таки получилось! Просто видимо программист из меня никакой!

    • https://wpsovet.ru Лифанов Валентин

      Поверьте, бывают и сложнее.

  • LeLiK

    Просто внимательно надо следить за курсором мыши при выделении и правильного написания скриптов, тогда всё получится!!!

  • https://wpsovet.ru Лифанов Валентин

    И вам привет дорогой спамер.