Затемнение за рамкой аватара

Question

Всем привет, я в X.com после загрузки изображения с ПК обратил внимание на голубую рамку, которая является областью отображаемого аватара, а за ее пределами - затемнение, мне стало интересно как при помощи css реализовать такое затемнение?

Answer 1

radial-gradient создает эффект затемнения с помощью радиального градиента, где центр остается прозрачным, а края затемняются

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.8) 60%);
  pointer-events: none;
}

<div class="image-container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnp8C-uj8HjN5jQJOeEvKsGttmhdBm3LXvqw&s" alt="MyDarkenedAvatar" class="image">
  <div class="overlay"></div>
</div>

а можно с box-shadow что-то такое попробовать сделать

... добавим js, чтоб создать кнопку, как у вас на скрин шоте, -/+ область осветления

const overlay = document.querySelector('.overlay');
const sizeRange = document.getElementById('size-range');
const decreaseBtn = document.getElementById('decrease-size');
const increaseBtn = document.getElementById('increase-size');

let size = 150; // Начальный размер светлого квадрата

// Функция для обновления размера светлой области
function updateOverlay() {
  size = parseInt(sizeRange.value);
  overlay.style.width = `${size}px`;
  overlay.style.height = `${size}px`;
}

// Уменьшение размера светлой области
decreaseBtn.addEventListener('click', () => {
  if (size > 50) { // Минимальный размер квадрата 50px
    size -= 10;
    sizeRange.value = size;
    updateOverlay();
  }
});

// Увеличение размера светлой области
increaseBtn.addEventListener('click', () => {
  if (size < 300) { // Максимальный размер квадрата 300px
    size += 10;
    sizeRange.value = size;
    updateOverlay();
  }
});

// Обновление размера светлой области с помощью ползунка
sizeRange.addEventListener('input', updateOverlay);

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.image {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background-color: transparent;
  border: 4px solid blue;
  /* Синяя рамка */
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  /* Эффект затемнения вокруг квадрата */
  pointer-events: none;
  z-index: 2;
}

.controls {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px;
  font-size: 16px;
}

input[type="range"] {
  width: 200px;
  margin: 0 10px;
}

<div class="image-container">
  <img src="https://i.sstatic.net/AiJwu98J.jpg" alt="Image" class="image">
  <div class="overlay"></div>

</div>
<div class="controls">
  <button id="decrease-size">-</button>
  <input type="range" id="size-range" min="50" max="300" step="10" value="150">
  <button id="increase-size">+</button>
</div>

БЛОГ НА HUSL

Затемнение за рамкой аватара

Ответы (1 шт):