Рубрика «Дизайн сайта»

Как задать цвет фона и текста веб-страницы?

Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body, а для цвета текста используется свойство color, как показано в примере 1.

Пример 1. Изменение цвета фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет 

Как размыть фоновую картинку?

За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter. Для этого создадим псевдоэлемент через ::before и к

Как сделать градиентный фон на веб-странице?

Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image.

background: linear-gradient(#9A5044, #E8D9A9);

Без указания дополнительных параметров градиент получается вертикальным, первое значение указывает цвет сверху, второе — снизу. Браузер уже сам делает плавный переход между указанными цветами.

Чтобы

Как сделать фон полупрозрачным?

Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а

Как сделать фоновую картинку на всю ширину?

Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).

Пример 1. Использование background-size

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина фона</title>
  <style>
   

Как сделать, чтобы фон не повторялся?

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat, как показано

Как запретить изменение размеров ?

В правом нижнем углу текстового поля <textarea> есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Как запретить изменение размеров ?

Рис. 1. Вид текстового поля

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

Как изменить вид нажатой кнопки?

Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button. Стилевые правила для этого селектора определяют вид нажатой кнопки (пример 1).

Пример 1. Использование :active

Подборка креативных страниц 404 ошибки

Работая над дизайном сайта, стоит учитывать все возможности лишний раз зацепить внимание пользователя. Одним из таких способов является креативная страница ошибки 404. Изначально ее цель – оповестить пользователя о том, что URL, по которому он переходил, отсутствует и вернуть его