<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Полупрозрачный текст на фоне в CSS

Полупрозрачный текст на фоне в CSS

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


Как обычно начнем с HTML разметки:

<body>
  <div>
    <h1>Полупрозрачный текст на фоне</h1>
  </div>
</body>

Заголовок h1 мы поместили в контейнер div, оба элемента - блочные и на странице пока виден - невзрачный текст. Разметка сделана, переходим в файл стилей. Обнуляем поля и отступы одновременно у body и h1.

body, h1 {
  margin: 0;
  padding: 0;
  font-family: 'Alegreya Sans SC', sans-serif;
}

Я не зря выше упомянул, что h1 тоже является блочным элементом, а это значит, что вокруг заголовка браузеры по умолчанию создают свои поля и отступы.

Полупрозрачный текст на фоне в CSS

После обнуления margin и padding, проблема исчезает. Еще, я прописал шрифт из коллекции Google Font, если в названии шрифта больше одного слова, то его заключают в кавычки. Кроме того, все сторонние шрифты, которых обычно нет на компьютере пользователя, обязательно надо подключать в файле стилей.

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:900);

Фотография на все окно браузера

На сайте pixabay.com выбираете понравившееся вам фото, сохраняете себе на компьютер или просто копируете URL картинки и вставляете в код селектора div.

div {
  background: url(https://cdn.pixabay.com/photo/2018/03/19/20/20/wheat-3241114_1280.jpg);
}

Все прописанные свойства ниже, растягивают фотографию, как фон, на весь экран браузера.

div {
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}

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

h1 {
  font-size: 6em;
  position: absolute;
  top: 30%;
  text-align: center;
  text-transform: uppercase;
}

Полупрозрачный текст на фоне в CSS

Эффект полупрозрачного текста с наложением слоев

Для эффекта надо добавить всего лишь 4 свойства для селектора h1.

Цвет текста делаем белым и полупрозрачным.

color: rgba(255, 255, 255,.7);
Полупрозрачный текст на фоне в CSS

Создаем тень для заголовка

text-shadow: 0 5px 10px rgba(0,0,0,1);
Полупрозрачный текст на фоне в CSS

Создаем нижнюю тень для блока h1

box-shadow: 0 5px 10px rgba(0,0,0,1);

Это придаст небольшую объемность всей композиции.

Полупрозрачный текст на фоне в CSS

Смешиваем слои, теперь нижний слой с фотографией чётко проглядывает сквозь полупрозрачный текст, не перекрывая его. Красота эффекта напрямую будет зависеть от выбранного изображения и шрифта.

mix-blend-mode: overlay;
Полупрозрачный текст на фоне в CSS

Поддержка браузерами

Свойство mix-blend-mode, поддерживается всеми современными браузерами, за исключением Internet Explorer и Edge. Однако Microsoft реализацию поддержки включил в список "на рассмотрении" для Edge. Поэтому у нас есть надежда, на скорейшую полную поддержку всеми браузерами.

Код полупрозрачного текста на фоне:

Для систематического изучения HTML5 и CSS3, будет полезным пройти мой видеокурс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.