CODERAM.DEV

Oбводка аватара как в Instagram

Kод под аватарки размером 200 на 200. Размер обводки можно настроить в диве .image

  1. <style>
  2. .image {
  3. position: absolute;
  4. width: 200px;
  5. height: 200px;
  6. top: 50%;
  7. left: 50%;
  8. transform: translate(-50%, -50%);
  9. border: 4px solid transparent;
  10. border-radius: 50%;
  11. background-image: linear-gradient(white, white), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  12. background-origin: border-box;
  13. background-clip: content-box, border-box;
  14. }
  15. .image__src{
  16. position: absolute;
  17. top: 4px;
  18. right: 4px;
  19. bottom: 4px;
  20. left: 4px;
  21. border-radius: 50%;
  22. background-size: cover;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27.  
  28. <div class="image_src"><img class="image" src="ccылка на аватар"></div>

  22.01.24 / 21:27 | CSS |   21 | 1   0