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 |   24 | 1   0