Как сделать, чтобы у людей были круглые аватарки?

1
2
Следующая
Показаны 1-15 из 29

#1 29 сентября 2013 в 12:33

#2 29 сентября 2013 в 12:49

можно с помощью border-radius

#3 29 сентября 2013 в 12:54

в styless.css ищите: .usr_avatar
и добавляете
border-radius: 30%;

SEO продвижение, реклама Вашего проекта в Яндекс.Директ, аудит... пишите в лс!

Сегодня в 10:52

#4 29 сентября 2013 в 19:54

Как сделать, чтобы у людей были круглые аватарки?

tim4ous

Найти сайт с круглыми аватарками и изучить его с помощью firebug

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#5 29 сентября 2013 в 22:47

А мне кажется, что премлемее будет картинку PNG поверх аватара наложить (по поводу border-radius).

Украинский для инстант

#6 29 сентября 2013 в 23:04

Олег Васильевич я, а смысл грузить 2 картинки? Вес страницы то увеличивается…

#7 29 сентября 2013 в 23:11

Олег Васильевич я, а смысл грузить 2 картинки? Вес страницы то увеличивается...

Rossoman

Так нарисовать можно что угодно — звёздочку, к примеру, или солнышко с лучами. Я ж не буквально о кружочке отвечал.

Украинский для инстант

#8 30 сентября 2013 в 00:45

Молитвы гугле дают положительный ответ. habrahabr.ru/post/133829/
Молитесь и не мучьте мозг иных страждущих.

#9 30 сентября 2013 в 01:20

давно ждал… если кто решит, отпишите тут

#10 30 сентября 2013 в 11:19

давно ждал… если кто решит, отпишите тут
lezginka.ru

Я сделал так: комментарии пользователей, по этому же примеру и остальные.

 
.cmm_avatar {
    background: #DA251C;
    border: 1px solid #DA251C;
    border-radius: 45px;
    -moz-border-radius: 45px;
    -webkit-border-radius:45px;
    float: left;
    position: relative;
    overflow: hidden;
    padding: 2px;
}
.cmm_avatar img {
    border-radius:45px;
    box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
    -moz-box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
    -webkit-box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
    height: 70px;
    width: 70px;
}
{* ==== если нужен глянец =====*}
.cmm_avatar:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
    background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

Спойлер

#11 30 сентября 2013 в 11:49

mr.Z, в дефолте, в цсс добавить где ли что заменить?

#12 30 сентября 2013 в 12:14

Оффф топик

Молитвы гугле дают положительный ответ. habrahabr.ru/post/133829/
Молитесь и не мучьте мозг иных страждущих.
stealthdebuger

О да… не любят люди молится и гуглу, и другим высшим духам, которые многие знают.
Может думают, что спросят не так. А боги нашлют на них кару небесную в виде бана пожизненного без права выхода в интернет? =)

#13 30 сентября 2013 в 12:59

mr.Z, в дефолте, в цсс добавить где ли что заменить ?
lezginka.ru

Найдите в файле стиля (/templates/_default_/css/styles.css) класс .cmm_avatar и замените на код выше.

#14 30 сентября 2013 в 15:43

лучше всех это вариант с css ))

#15 30 сентября 2013 в 18:06

в дефолте, в цсс добавить где ли что заменить ?
lezginka.ru

мы же эту тему еще в 2009м году обсуждали, жаль не сохранилась

Все не то, чем кажется и не наоборот...

1
2
Следующая
Показаны 1-15 из 29

Нужен Рыболовный шаблон

Программа для создание баyнеро

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Как сделать, чтобы у людей были круглые аватарки?

Похожие темы

[ЗАКРЫТО] И опять про аватарки...

Поле "Список людей"

Вывод списка людей, на которых подписан пользователь

Как сделать заголовок (дата изменения страницы) last-modified InstantCMS 2

Ищу исполнителя - сделать вывод новостей только тех людей или групп на кого подписан

Изменить class у аватарки в меню пользователя в шапке

InstantCMS Team

О проекте

Поддержка

Дополнения