ZorNet.Ru — сайт для вебмастера » HTML и CSS » Закруглить Аватар в комментариях сайта

Закруглить Аватар в комментариях сайта

Закруглить Аватар в комментариях сайта
Если у вас комментарий сделаны с закругленным Avatar, то думаю стоит сделать и в ответе также, чтоб смотрелось как то понятно. И здесь мы при помощи стилей закруглим его. Это для того ответа который вы подключили на сайте как социальный. Так как на простом не проверял, но не исключаю, что там также можно сделать.

Вот как будет визуально смотреться.

Форма комментариев изминаем на сайт

Вообщем нужно зайти в CSS и поставить стиль.

Код
/*=== Закруглить аву в ответе комментариях ===*/  
.ucf-avatar img {
  width: 53px!important;
  height: 50px!important;
  -webkit-border-radius: 50%!important;
  -moz-border-radius: 50%!important;
  border-radius: 50%!important;
}


Где цифры 50 и 53, то это отвечает за длину и ширину, просто бывает так, что кажется нужно выставить одинаково, но не получается круг, а какая то формы дыни, здесь вы сами можете все довести как видите.
21 Декабря 2016 Просмотров: 1277 Комментариев: (6)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 6
Kolinkor
Kolinkor 21 Декабря 2016 02:411
0
Но не сильно изменилось, просто если добавить стилей, таких как под названием "Материал разместил" уже будет по другому все смотреться.
Kosten
Kosten 21 Декабря 2016 02:492
0
Здесь кому как, но если кто решит так сделать, то вот стили, их добавите к тем, что в материале.

Код
  border: 1px solid #B7BEC7;
  box-shadow: 0 0 15px rgba(122, 122, 122, 0.38);
Kosten
Kosten 21 Декабря 2016 02:543
0
Хотя поставил и немного поменял цвет и тени меньше сделал, так как не думаю что много здесь нужно, и реально изображение приобрело другой вид.

Вот стиль полный.

Код
/*=== Закруглить аву в ответе комментариях ===*/  
.ucf-avatar img {
  width: 53px!important;
  height: 50px!important;
  -webkit-border-radius: 50%!important;
  -moz-border-radius: 50%!important;
  border-radius: 50%!important;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 15px rgba(122, 122, 122, 0.38);  
}
FeStemBer
FeStemBer 21 Декабря 2016 03:024
+1
Лучше оставить как было, то все на сайте можно закруглить, вообще что получится, хоть ответ отставить.
Kosten
Kosten 21 Декабря 2016 03:085
0
Оставил, может как нибудь в другой раз, на кино сайте сделаю.
csretven
csretven 22 Декабря 2016 05:056
0
Заметил, что если когда подключены социальные аккуанты, то на некоторых этот стиль просто не влияет. Возможно где то ошибаюсь, просто с яндекс браузера заходил и там как раз не было, а осталось как есть.
avatar