Создание дизайна в стиле старых компьютерных терминалов
19 марта 2019 | Опубликовано в css | Нет комментариев »
Недавно мы увидели демонстрацию под названием «Терминал HTML5». Нам понравилось, как она выглядит: размытый моноширинный шрифт с заметными полосами, как у экрана монитора, и светящийся зеленый фон.
Давайте реализуем это с помощью CSS, шаг за шагом.
Функция радиального градиента идеально подходит для создания светящегося зеленого фона:
body { background-color: black; background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 120% ); height: 100vh; }
Возможно, вы привыкли использовать теги <pre><code> для отображения отформатированного текста, например, кода, но здесь больше подойдет <pre><output>, так как это не код.
Еще воспользуемся приятным на вид моноширинным шрифтом:
body { ... color: white; font: 1.3rem Inconsolata, monospace; }
Текст в вдохновившей нас демонстрации выглядит немного размыто. Можно попробовать использовать фильтр, такой как filter: blur(0.6px); , но он размывает или очень сильно, или недостаточно сильно. Лучше воспользоваться свойством тени текста вместо этого:
body { ... text-shadow: 0 0 5px #C8C8C8; }
Теперь перейдем к созданию полос, как у экрана монитора. В идеале они должны находиться поверх текста, так что воспользуемся псевдоэлементом «после», который абсолютно спозиционирован над всей нужной областью, и зададим ему функцию повторяющегося линейного градиента для всех линий, так как всегда лучше по возможности избегать использования изображений:
body::after { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: repeating-linear-gradient( 0deg, rgba(black, 0.15), rgba(black, 0.15) 1px, transparent 1px, transparent 2px ); }
Если сделать фон белым, то незаметные черные линии станут видны лучше:
И после этого расположим их поверх нашего исходного зеленого светящегося фона, чтобы придать законченный вид:
Будет здорово добавить подходящий стиль для выделенного текста и удалить размытие для четкости при выделении:
::selection { background: #0080FF; text-shadow: none; }
Полная демонстрация работы полученного нами результата:
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191