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

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

 
Посетитель
small user social cms
Сообщений: 8
Как сделать, чтобы у людей были круглые аватарки?
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1035
можно с помощью border-radius
Реклама
cms
Посетитель
small user social cms
Сообщений: 36
в styless.css ищите: .usr_avatar
и добавляете
border-radius: 30%;
SEO продвижение, реклама Вашего проекта в Яндекс.Директ, аудит... пишите в лс!
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаПочетный донор проекта
Сообщений: 2297
tim4ous:

Как сделать, чтобы у людей были круглые аватарки?
Найти сайт с круглыми аватарками и изучить его с помощью firebug
Недорогие Windows-сервера CRM для соцсетей
VPS с бесплатным администрированием!
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2781
А мне кажется, что премлемее будет картинку PNG поверх аватара наложить (по поводу border-radius).
Редактировалось: 1 раз (Последний: 29 сентября 2013 в 22:49)
Украинский для инстант
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1035
Олег Васильевич я, а смысл грузить 2 картинки? Вес страницы то увеличивается...
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2781
Rossoman:

Олег Васильевич я, а смысл грузить 2 картинки? Вес страницы то увеличивается...
Так нарисовать можно что угодно - звёздочку, к примеру, или солнышко с лучами. Я ж не буквально о кружочке отвечал.
Украинский для инстант
Посетитель
small user social cms
Медаль
Сообщений: 366
Молитвы гугле дают положительный ответ. http://habrahabr.ru/post/133829/
Молитесь и не мучьте мозг иных страждущих.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 4284
давно ждал... если кто решит , отпишите тут
Посетитель
small user social cms
Медаль
Сообщений: 217
lezginka.ru:
давно ждал... если кто решит , отпишите тут
Я сделал так: комментарии пользователей, по этому же примеру и остальные.
Код PHP:
  1.  
  2. .cmm_avatar {
  3. background: #DA251C;
  4. border: 1px solid #DA251C;
  5. border-radius: 45px;
  6. -moz-border-radius: 45px;
  7. -webkit-border-radius:45px;
  8. float: left;
  9. position: relative;
  10. overflow: hidden;
  11. padding: 2px;
  12. }
  13. .cmm_avatar img {
  14. border-radius:45px;
  15. box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
  16. -moz-box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
  17. -webkit-box-shadow: 0 0 0 3px #DA251C, 0 0 10px #DA251C;
  18. height: 70px;
  19. width: 70px;
  20. }
  21. {* ==== если нужен глянец =====*}
  22. .cmm_avatar:before {
  23. content: "";
  24. position: absolute;
  25. top: 0;
  26. right: 0;
  27. bottom: 0;
  28. left: 0;
  29. 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)));
  30. 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));
  31. 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));
  32. }
  33.  
Спойлер
Редактировалось: 3 раз (Последний: 30 сентября 2013 в 11:42)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 4284
mr.Z, в дефолте ,в цсс добавить где ли что заменить ?
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1224
Оффф топик
Посетитель
small user social cms
Медаль
Сообщений: 217
lezginka.ru:
mr.Z, в дефолте ,в цсс добавить где ли что заменить ?
Найдите в файле стиля (/templates/_default_/css/styles.css) класс .cmm_avatar и замените на код выше.
Посетитель
small user social cms
Медаль
Сообщений: 129
лучше всех это вариант с css ))
Посетитель
small user social cms
МедальКубок зрительских симпатийСамый позитивный участник форума!Золотая медаль имени ЛезгинкиАвторитет форума
Сообщений: 1778
lezginka.ru:
в дефолте ,в цсс добавить где ли что заменить ?
мы же эту тему еще в 2009м году обсуждали, жаль не сохранилась
Все не то, чем кажется и не наоборот...
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.