<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Как сделать фон в CSS

Как сделать фон в CSS

По умолчанию все браузеры отображают на страницах фон белого цвета. В арсенале вебмастера есть несколько десятков CSS правил для разнообразного оформления фонов.

Фон можно задать как для всей страницы (body), так и для отдельного элемента страницы. Давайте создадим блок и будем задавать ему разные варианты внешнего вида фона, добавляя к селектору bg_example разные CSS свойства.

<div class="bg_example"></div> // HTML разметка

// CSS код

.bg_example{
width: 400px;
height: 300px;
}

Это важно! Я не буду перечислять все возможные варианты записи CSS правил, а используемые верстальщиками в рабочих проектах (сокращенная запись).

Цвет фона в СSS

Цвет фона задается в виде шестнадцатеричного кода.

background: #f5b2c3;
Как сделать фон в CSS.

Как сделать картинку фоном

В веб-дизайне существует три подхода с картинками:

размноженная маленькая текстурная картинка

background: url(bg_pattern.png);

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


Как сделать фон в CSS.

картинка фоном без повтора

background: url(icon.png) no-repeat;

no-repeat – без повтора

Классический пример – это иконка. Ничто не мешает вставить иконку на сайт тегом img, но по правилам SEO, так делать не нужно. Существует четкое разделение между контентом и дизайном. Так вот иконка – это украшательство и вставляется на сайт фоном. Изображения в галереях, каруселях, статьях, портфолио – это все контент.

Как сделать фон в CSS.

растянутая картинка на всю секцию или экран

Чтобы растянуть картинку на всю секцию с сохранением пропорций, применяют значение cover. Только нужно понимать, что размер оригинального изображения по ширине, не должен быть меньше размера самого большого монитора , 1920 пикселей. Иначе растягивание картинки приведет к потери её качества.

background: url(bg_full.jpg) no-repeat cover;
Как сделать фон в CSS.

Полупрозрачный фон на CSS

Эффект с полупрозрачным фоном чаще всего используют для затемнения фона. Поверх блока с фоновой картинки накладывается другой блок или псевдоэлемент с фоном темного цвета. Так, чтобы можно было увидеть, что находится под ним. Цвет задается в формате rgba, где последним параметром пишут значение прозрачности от 0 до 1.

background: rgba(0, 0, 0, 0.5);

Градиент фона в CSS

Элементы с фоновыми градиентами смотрятся симпатичнее, чем одноцветные. Мы создали линейный градиент с переходом от светло-розового цвета к розовому цвету и от правого верхнего угла к нижнему левому.

background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
Как сделать фон в CSS.

Размытый фон

Эффект размытого фона хорошо виден на фотографии. Для наглядности размоем не весь фон, а какую-нибудь область на нем. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для лучшей кроссбраузерности. Однако для IE эта комбинация все равно не работает.

Как сделать фон в CSS.

<div class="bg-image">
    <div class="block">
    </div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <filter id="blur">
        <feGaussianBlur stdDeviation="6"></feGaussianBlur>
     </filter>
</svg>

bg-image {
    background: url('kabachok.jpg') no-repeat fixed center / cover;
    position: relative;
}br
.block {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: inherit;
    filter: blur(10px);
    filter: url(#blur);
}

Заключение

Эта статья не претендует на полное освещение всех возможных вариантов с фонами посредством CSS. Здесь мы разобрали самые распространенные виды фонов, которые встречаются на сайтах.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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