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

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

#1 29 сентября 2013 в 12:33
Как сделать, чтобы у людей были круглые аватарки?
#2 29 сентября 2013 в 12:49
можно с помощью border-radius
#3 29 сентября 2013 в 12:54
в styless.css ищите: .usr_avatar
и добавляете
border-radius: 30%;
#4 29 сентября 2013 в 19:54


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

tim4ous
Найти сайт с круглыми аватарками и изучить его с помощью firebug
#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
Я сделал так: комментарии пользователей, по этому же примеру и остальные.
  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.  

#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м году обсуждали, жаль не сохранилась
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.