Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz

Текст на размытом фоне на чистом CSS
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
22.12.2023, 22:14
Текст на размытом фоне на чистом CSS




В статье узнаете, как можно на чистом CSS и HTML создать размытый фон, где будут размещено название или знаки, что размещены на месте размытия. Для этого следует создать блок, где в дальнейшем будет наложен эффект. Где в дальнейшем будет задействован фильтр, а по изображению, то здесь нужно выставить 2 аналогичных проекта. Один идет под тот самый фон, а второе под эффект размытие, что в последствие в стилистике CSS можно выставить нужные параметры. А точнее вам нужно так сделать, чтоб все оба фона совпали.

Если брать уже готовый код со стилями, то умолчанию они расположены в центре центру, без масштаба. Но и само оформление, то оно полностью настраивается в CSS, где выстраиваем высоту данного масштаба, но и безусловно задаете ширину. Что касается эффекта и на нем прописанные знаки, то можно добавить теней, если вы ставите на светлом фоне. В общем все то, как вы оформляли текст, только здесь текст находится на размытом фоне.

Проверял по редакции и изменению картинок:




Установка:

HTML

Код

<div class="fonovoye-razmytie">
  <span>ZorNet.Ru — сайт для вебмастера</span>
</div>


CSS

Код

.fonovoye-razmytie {
  height: 476px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("Ссылка на изображение/beach-1.jpg") center no-repeat;  
}
.fonovoye-razmytie span {
  position: relative;
  text-align: center;
  color: #FFF;
  width: 48%;
  font-size: 36px;
  line-height: 36px;  
  padding: 36px 0;
  box-shadow: 0 6px 18px rgb(8 8 8 / 20%), 0 16px 28px rgb(8 8 8 / 20%);
  text-shadow: 0 0 12px rgb(2 2 2 / 60%);  
  text-transform: uppercase;
  letter-spacing: 4px;
  z-index: 1;
  overflow: hidden;
}
.fonovoye-razmytie span:before {
  content: "";
  position: absolute;
  top: -48%;
  left: -48%;
  height: 216%;
  width: 216%;
  background: url("Ссылка на изображение/beach-1.jpg") center no-repeat;
  filter: blur(8px);
  z-index: -1;
}


При проверки заметил, что если делать такой эффект на чистом листе, это изображение похоже на море или фона к примеру, то не так сильно заметно. Нужно, чтоб какой то предмет был, это если по легкому, то просто изменяем сам фон, который делает более ярким.

Демонстрация

Скачать Текст на размытом фоне на чистом CSS
Категория: Скачать Скрипты для Ucoz бесплатно | Добавил: Kenik
Просмотров: 27 | Загрузок: 0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Анализ сайта skript-na-ucoz.ucoz.ru Top.Mail.Ru

Яндекс.Метрика
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 1196
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 10242
    Всего новостей: 31
    Всего статей: 0
    Темы форума: 2521
    Коментариев: 16
    Фотоальбом: 3
    Скачали: 10242
    Каталог сайтов: 35
    Онлайн Игр: 213
    Онлайн Видео: 8596
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером
    Популярное
    Скачиваемое
    Интерестное