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

коуглый граватар на блоге
Привет всем на 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
  1. Олег

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

  2. Игорь

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

  3. LeLiK

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

  4. Дмитрий

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

  5. Таня

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

  6. Вероника

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

    1. Лифанов Валентин (автор)

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

  7. LeLiK

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

  8. Лифанов Валентин (автор)

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

55 queries in 3,330 seconds.