| Kosten | Понедельник, 28 Мая 2018, 14:34 | Сообщение 1 |
| Думаю многие задавались вопросом, как добавить интересные фоны CSS на свои сайты. Было время, где страницы интернет ресурса выставляли на крошечное изображение, как черепицы или другие элементы, которые складывались и создавали фон. Теперь современные фоны составляют основу много линейного графического дизайна. Но не исключаю небольшие картинки, так как есть плюс в них, это масса небольшая, что загрузка происходит намного быстрее. Теперь есть возможность тщательно определить основное положение фона, где можно будет работать с разными градиентами, с добавлением сразу несколько фонов под один элемент.
Но время идет и все обновляется, и для фонов произошла революция в сети интернет была обусловлена продвижением в CSS. Теперь веб стандарты обеспечивают гораздо больший контроль, где самостоятельно можете задать или определить положение фона, работать с градиентами и добавить несколько фонов в один элемент. В этом кратком руководстве представлена информация, которая необходимая для создания уникального фона на сайте на несколько минут, где все можно создать при помощи CSS.
Сделать фон для сайта с помощью CSS
Если кратко, то фон на прямую относится к стилистике CSS. Где нужно понимать, что здесь может быть любой движок, на котором создан портал, так как свойство стилей не зависят от этого. Если есть одна зависимость, то это старые версий браузера, что есть возможность показывать не корректно. Но в остальном все по стандарту, а точнее аналогично стиль идет. Что сейчас все подробно разберем, так как есть много вариаций на выставление фона, здесь будут самые популярные, в точнее, которые больше используют веб мастер.
1. Здесь задаем фону одну палитру цвета, где нужно в CSS свойствах элемента применяем этот стиль:
Код background-color: #1b1b1d;
2. Можно задать фона 2 оттенка цвета на градиент. Где вверх под одной гаммой, а вот нижний фон задать другой.
Код background-image: linear-gradient(to top, rgb(37, 39, 173) 50%, rgb(35, 36, 169) 50%);
3. Аналогично на градиентах, только уже задаем 3-три оттенка цвета.
Код background-image: linear-gradient(to top, rgb(134, 13, 21), rgb(203, 208, 22), rgb(19, 199, 15));
Задаем изображение под фон сайта или на заданный элемент на сайте.
Безусловно встречали сайты, где фон идет одним изображением, что основном можно увидеть на кино ресурсе. И теперь самостоятельно можно задать картинку для фона а также подойдет любое изображение, которое будет использоваться на CSS-свойство backgraund-image.
Вот несколько примеров, которые можно задействовать под фон картинкой.
1. Делается путем заданного файла под стиль:
Код background-image: url("Ссылка на изображение/bg.jpg");
2. Также можно по прямой ссылке, что прописываем в стиль:
Код background-image: url("http://zornet.ru/ZORNET.jpg");
3. Задаем путь путь на фоновое изображение от корневой директории, что от первой вариаций не отличается.
Код background-image: url("Ссылка с папки, где находится картинка - bg.jpg");
Создать фон на полных монитор или экран без повторов и прокрутки.
Код background-image: url("Ссылка.jpg");
background-attachment: fixed, fixed;
background-size: 100% 100%;
Задаем на сайте прозрачный фон.
Код background-color: rgba(14, 14, 14, 0);
Здесь представлено несколько способов добавить цветовой палитры для фона для сайта.
Приложен видео урок, где все подробно разложено, как можно изменить или создать свой оригинальный фон.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 09 Сентября 2018, 22:25 | Сообщение 2 |
|
| Существует несколько вариантов, а точнее самые популярные, это 3 метода, это градиенты, которые будут горизонтали, также и по вертикали, и остается простоя картинка. обычное изображение
Градиент по горизонтали
Первое, что нужно сделать, это вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге мы получим вертикальную полосу шириной в 1 пиксель.
Код body {
background: url("Ссылка на изображение.jpg") repeat-x #e3e3e3;
}
Эта полоса размножится по всей ширине экрана и получится градиентный фон. Вначале идет градиент, а уже потом однотонный цвет, который мы указали в коде.
2. Градиент по вертикали
Здесь действует тот же принцип, только нужно уже вырезать картинку высотой в 1 пиксель, и при необходимости выровнять фон по центру.
Код body {
background: url("Ссылка на изображение.jpg") repeat-y center #e3e3e3;
}
3. Обычное изображение
Здесь мы просто указываем путь к изображению, которое мы можем отобразить один раз или замостить его по высоте и ширине экрана.
Код body {
background: url("Ссылка на изображение.jpg") no-repeat #e3e3e3;
} | | Страна: (RU) |
| |
