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

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

#16 30 сентября 2013 в 18:39
Очень Серый, ну ты же понимаешь, для моего уровня "скругление" и "круглое" это принципиально разное решение :)
если не ошибаюсь там не цсс нужно было править
#18 30 сентября 2013 в 21:51
Очень Серый, все фишки спалил)
пс: хотя там еще с тенью можно так же, и hover c задержкой чтоб голова закружилась — не пали)

пссс: кстати) а у меня аватарка круглая без css)))
#19 30 сентября 2013 в 22:20

хотя там еще с тенью можно

reload
тени исчезают в полдень smoke
#20 3 февраля 2015 в 23:34
ребята привет! подскажите как в 2 реализовать это где есть фото профиля? без теней))
#21 4 февраля 2015 в 01:31
teymur, учите html и css, за неделю можно много чего узнать в этом плане, потратите неделю на изучение ответите себе сами на тысячи вопросов которые у вас сейчас появляются при взгляде на все эти тени бордюры и блоки
#22 4 февраля 2015 в 01:52
решений на соседних сайтах прорва, пример:
  1. .avatar{ /* селектор для класса avatar */
  2. float: left; /* прижимаемся к левому краю, обтекание справа */
  3. background: #fff; /* фон */
  4. width: 50px; /* ширина */
  5. height: 50px; /* высота */
  6. padding: 5px; /* внутренние отступы(верх, право, низ, лево) */
  7. border: 1px solid #999; /* граница(ширина, тип, цвет) */
  8. border-radius: 50%; /*скругление равно 50 процентам от общей ширины, фактически 25 пикселей, вот и круг получили(ещё есть с префиксом -moz и -o) */
  9. box-shadow: 0px 1px 1px 1px #bbb /* смещение по горизонтали, смещение по вертикали, размытие, увеличение и цвет */
  10. }
  11. .avatar img{ /* селектор для картинки, которая "внутри" класса avatar */
  12. display: block; /* картинка выводится как блок, по ширине будет равен родителю(диву в котором находится) */
  13. width: 100%; /* ширина 100% */
  14. border: 0; /* граница нулевая */
  15. margin: 0; /* внешний отступ отстутствует */
  16. border-radius: 50%; /* читай выше */
  17. }
#23 4 февраля 2015 в 01:53
не моё, хабра
#24 16 февраля 2015 в 13:49


  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.  

mr.Z

Кто-нибудь уже реализовал это для модуля «Последние регистрации»?
#25 17 февраля 2015 в 08:25

Кто-нибудь уже реализовал это для модуля «Последние регистрации»?

Man
и что тут сложного? так сложно стили добавить к картинкам?
#26 17 февраля 2015 в 09:20


Кто-нибудь уже реализовал это для модуля «Последние регистрации»?

Man

Посмотрите файл модуля "последние регистрации" — по моему что-то вроде mod_lastreg.tpl узнайте какие там классы используются и потом в файле styles.css в содержимое этих файлов скопируйте css код свыше.
#27 17 февраля 2015 в 10:38
привяжите у аватаркам свойство border-radius: 50%; вроде так
#28 17 февраля 2015 в 12:06
Не поленилась и посмотрела какие стили используются в аватарках этого модуля.
1) mod_new_user_avatar
2) usr_img_small
usr_img_small — используется почти везде, так что по осторожнее. Будет весь сайт круглым))
cmm_avatar — заменяете на .mod_new_user_avatar { код свыше }
далее писать не стала… думаю понятно.
#29 15 апреля 2015 в 14:45

usr_img_small

Доротея
А где это можно поменять? Я уже просмотрел все файлы css и у меня такого нет на версии 1.9.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.