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

Дата: / Автор поста:


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

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

Но чтобы так сделать придется немного повозиться, совсем чуть-чуть. Для начала нам надо определить какой стиль у вас отвечает за вывод граватара комментатора, для этого используем инструмент любого браузера «Просмотр кода элемента».

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

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

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

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

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

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

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

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

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

  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. Скажите, а вам статья помогла? Если да, то оставьте свой отзыв в комментариях, а если нет, то тоже пишите?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Олег

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

  • Игорь

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

  • LeLiK

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

  • Дмитрий

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

  • Таня

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

  • Вероника

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

    • Лифанов Валентин

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

  • LeLiK

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

  • vid-kore

    Первый способ очень простой и логичный, но он не считается репостом, получается я просто скопировала изображение и выложила его у себя в ленте, как первоисточник. А репост потому и называется, потому что я беру изображение у кого-то, то есть мой пост вторичен и в нем отображается первоисточник.

    • Лифанов Валентин

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

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

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.