Background image как у Youtube

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

Тише, мыши, кот на крыше
Результат будет такой:
Тише, мыши, кот на крыше

Картинка в качестве фона (background-image)

Помимо заливки области цветом, возможно поставить картинку на задний фон.

Для этого необходимо использовать CSS свойство background-image.

По умолчанию фоновая картинка будет размножена как горизонтали, так и по вертикали. Поэтому получится так:

Картинка в качестве фона (background-repeat)

• no-repeat — не повторять картинку ни по горизонтали, ни по вертикали
• repeat — повторять картинку во всех направлениях
• repeat-x — повторять картинку только по горизонтали
• repeat-y — повторять картинку только по вертикали

Получится так:

Позиция (background-position)

• top — вверу
• bottom — внизу
• right — справа
• left — слева
• center — по центру

Источник: www.mousedc.ru

Background images with HTML & CSS

Анимированный фон веб-страницы на чистых HTML и CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Amazing Pure HTML and CSS background animations».

Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов.

В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.

Диагональный градиент

Написать такой код легко, а эффект получается очень интересный.

Скольжение диагоналей

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

Анимированный фон

Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.

Бесконечный паттерн

Прекрасный анимированный бэкграунд

Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.

Анимированный «лесной» фон

Плавающие квадраты

Снова диагональные линии

Плывущие облака

Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).

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

YouTube Background Image Tutorial (EASY)

Источник: techrocks.ru

Background image как у youtube

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Главная » Основы CSS » Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9

Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9

Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно из картинки сделать фон для веб-страницы, как поменять размер картинки в тексте, выровнять картинку по правому краю либо же по центру. И в качестве бонуса я покажу, как от картинки можно выпустить тень.
Урок будет интересным и содержательным.

РАБОТА НАД ФОНОВОЙ КАРТИНКОЙ

Фон – картинка

Свойство «BACKGROUND-IMAGE»
Фон веб-страницы можно менять не только цветом, но и заливать его картинкой. Для этого используйте правило « background-image »к селектору « BODY » или « HTML »:

background-image: url(путь_к_изображению);

« путь_к_изображению » — зависит от того, где находится изображение. Посмотрите статью «Путь к файлам».

body < background-image: url(bg.gif); /* Фоновая картинка */ >

Повторение фоновой картинки

Свойство «BACKGROUND-REPEAT»
Вы заметили, что когда мы ставим фоновое изображение, то оно повторяется из левого верхнего угла по горизонтали и по вертикали до тех пор, пока не заполнит весь экран. Это не всегда удобно и не всегда обходимо.
Для регулировки повторов фоновой картинки существует правило « background-repeat ».

• repeat-x – повторение по горизонтали
• repeat-y – повторение по вертикали
• repeat – повторение по вертикали и по горизонтали (значение по умолчанию)
• no-repeat – не повторяется

body < background-image: url(bg.gif); /* Фоновая картинка */ background-repeat: repeat-x; /* фон будет повторяться по оси-х (горизонтали) */ >

Фиксирование фоновой картинки

Свойство «BACKGROUND-ATTACHMENT»
Правило « background-attachment » указывает на то, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно.

• scroll – фон прокручивается вместе с содержимым (по умолчанию);
• fixed – фоновое изображение зафиксировано.

body < background-image: url(bg.gif); /* Фоновая картинка */ background-repeat: no-repeat;/* фон не повторяется */ background-attachment: fixed ;/* фон зафиксирован */ >

Положение фоновой картинки

Свойство «BACKGROUND-POSITION»
Правило « background-position » задает положение фоновому изображению.

Значение:
Задается в %, px и названиях позиций.

Приблизительные координаты в %, px:

Координаты в названиях позиций.

body < background-image: url(bg.gif); /* Фоновая картинка */ background-repeat: no-repeat; /* фон не повторяется */ background-attachment: fixed ; /* фон зафиксирован */ background-position: top center;/* позиция картинки */ >

body < background-image: url(bg.gif); /* Фоновая картинка */ background-repeat: no-repeat; /* фон не повторяется */ background-attachment: fixed ; /* фон зафиксирован */ background-position: 80% 30%; /* позиция картинки */ >

Размер фоновой картинки

Свойство «BACKGROUND-SIZE»
Чтобы увеличить или уменьшить размер фонового изображения, воспользуйтесь правилом « background-size »:

background-size: ширина высота;

Значение:
Задается в % и px.

Если нужно сохранить пропорции картинки, тогда указывайте только ширину, а на высоте ставьте « auto »:

Фоновая картинка на весь экран

Свойство «BACKGROUND-SIZE»
Фоновое изображение можно растянуть на весь экран.
То есть, фон будет на весь экран любых компьютеров и других мобильных устройств.
Нужно воспользоваться правилом « background-size » со значением « cover »:

background-size: cover; /* фоновая картинка на весь экран */
body < background-image: url(bg.gif); /* Фоновая картинка */ background-repeat: no-repeat;/* фон не повторяется */ background-position: top center;/* позиция картинки */ background-size: cover; /* фоновая картинка на весь экран */ >

Две фоновые картинки на веб-странице

Свойство «BACKGROUND-POSITION»
Если использовать две фоновые картинки, тогда шапка и подвал сайта будут выглядеть довольно красиво. Для этого нужно добавить фоновое изображение к элементам — « HTML » и « BODY ». Потом нужно выставить для каждой фоновой картинки позицию « top » и « bottom »:

body < background-image: url(1.gif); /* Фоновая картинка */ background-repeat: no-repeat;/* фон не повторяется */ background-position: top center;/* позиция картинки */ >html < background-image: url(2.gif); /* Фоновая картинка */ background-repeat: no-repeat;/* фон не повторяется */ background-position: bottom center;/* позиция картинки */ >

РАБОТА НАД КАРТИНКОЙ В ТЕКСТЕ

Если в HTML присутствуют картинки (картинки в тексте), то и с такими картинками можно проводить различные манипуляции.
Для примера добавьте вот такой код в HTML:

основы CSS на StepkinBLOG.RU

Основы CSS

Здесь много текста

А теперь остальные кода в CSS

Отступы вокруг картинки

Свойство «MARGIN»
Если вам нужно сделать отступ от картинки, воспользуйтесь свойством « margin ».

• margin-top – отступ от картинки сверху
• margin-bottom – отступ от картинки снизу
• margin-right – отступ от картинки справа
• margin-left – отступ от картинки слева

Значение:
Значение задается в px или %.

Обтекание картинки текстом

Свойство «FLOAT»
Свойство «float» можно применить для картинки, которая находится внутри статьи, чтобы на странице изображение обтекало текстом. Аналог свойства «float» в HTML – атрибут « align ».

• left — обтекание картинки по левому краю, текст обтекает его по правой стороне.
• right — обтекание картинки по правому краю, текст обтекает по левой стороне.
• none —обтекание не задается (значение по умолчанию).

— значение по умолчанию

— обтекание картинки по правому краю (right)

— обтекание картинки по левому краю (left)

Прозрачность картинки CSS

Свойство «OPACITY»
А знаете ли вы, что картинку можно сделать прозрачной, используя только CSS правило « opacity »?

opacity: значение;

В значениях задается число в диапазоне от 0 до 1.
Значение 0 – полная прозрачность картинки.
Значение 1 – непрозрачность картинки (картинка останется такой как есть).
Значение в дробях (0.5) – полупрозрачность картинки.

Размеры картинки в CSS

Свойства «WIDTH» и «HEIGHT»
Чтобы увеличить или уменьшить размер картинки, которая размещается в тексте, добавьте правило « width » — ширина и « height » — высота:

width: размер; height: размер;

Значение:
Значение задается в px или %.

Тень от картинки в CSS

Свойство «BOX-SHADOW»
Можно от картинки сделать тень. Это придаст изображению или дизайну сайта привлекательный вид. Сейчас все увидите.
Итак, для создания тени будем использовать « box-shadow ».

1. — inset – тень внутри элемента, без inset тень будет наружу;
   box-shadow: 0 0 5px – тень вокруг элемента

   box-shadow: inset 0 0 5px; — теньвнутри

2. сдвиг тени по горизонтали (6 px — вправо, 6 px — влево);
3. сдвиг по вертикали (6 px — вниз, 6 px — вверх);
4. размытие тени (0 — четкая тень);
5. растяжение тени (3 px — растяжение, 3 px — сжатие);
6. цвет тени

Примечание

Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых картинок. Например, вы хотите сделать картинку с тенью только на странице контактов.

Для этого пропишите в HTML для первого тега «img» класс, например, «stepkiblog».

Работа с картинками в CSS

.stepkiblog < box-shadow: -19px 0 22px -19px #000; /*тень картинки*/ >

Если прописать ID:

То в CSS это будет так:
#stepkiblog < box-shadow: -19px 0 22px -19px #000; /*тень картинки*/ >

Пожалуйста, запомните это примечание, это важно!
Вот и подошли мы к завершению этого урока. Надеюсь, что вы все поняли. Если нет, пишите в комментариях, объясню подробней и, если нужно будет, поправлю текст в уроке.
Все, удачки!

Жду вас на следующих уроках!
Подписывайтесь!

Случайные записи:

1. Рамка в CSS. Основы CSS для начинающих. Урок №12
2. HTML формы. Основы HTML для начинающих. Урок №18
3. Итог работы за 2016 год!
4. Создание простого мини сайта. Практика по пройдённому материалу
5. Коды цвета в CSS — / R G B / HTML. Основы CSS для начинающих. Урок №7

Источник: stepkinblog.ru