Слайдер фонового изображения или меняющийся фон сайта с помощью CSS — Дизайн и разработка сайта
Данный слайдер прост в установке и если разберетесь, то сможете легко его настроить и добиться нужного результата. Для работы данного слайдера, нужно всего несколько элементов, которые мы сейчас рассмотрим по порядку.
HTML разметка
Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.
<ul> <li></li> <li></li> <li></li> </ul>
В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.
CSS стили
Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер.
Открываем файл стиле вашего сайта и добавляем в него следующий код.
.body_slides{ list-style:none; margin:0; padding:0; z-index:-2; background:#000;} .body_slides, .body_slides:after{ position: fixed; width:100%; height:100%; top:0px; left:0px;} .body_slides:after { content: ''; background: transparent url(images/pattern.png) repeat top left;} .body_slides li{ width:100%; height:100%; position:absolute; top:0; left:0; background-size:cover; background-repeat:no-repeat; opacity:0; -webkit-animation: anim_slides 18s linear infinite 0s; -moz-animation: anim_slides 18s linear infinite 0s; -o-animation: anim_slides 18s linear infinite 0s; -ms-animation: anim_slides 18s linear infinite 0s; animation: anim_slides 18s linear infinite 0s; } .body_slides li:nth-child(1){ background-image: url(images/1. jpg) } .body_slides li:nth-child(2){ -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) } .body_slides li:nth-child(3){ -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) } @-webkit-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} }
jpg)
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg)
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3.jpg)
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.
Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.
Далее у нас идет псевдоэлемент — :after, который задает дополнительный слой и поверх фона наложен узор в виде точек.
Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.
.body_slides li:nth-child(1) — это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.
Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.
keyframes anim_slides — это появление и исчезновении слайда.
Изначально слайд прозрачный и ему задано условие — opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. В данном примере — 3 слайда и 100% анимации это время перелистывания всех слайдов, а не одного. Поэтому слайд первый появляется виден и исчезает на 30%(максимально можно 33.3%) потому как, если 100% разделить на 3 слайда — получится 33,3%. Если бы у вас было 4 слайда — то 25%. То бишь, нужно показать появление, показ и исчезновение слайда за 25% от общих 100%. В нашем примере с 3 слайдами. Слайд появляется от 0 до 6%, виден от 6 до 24% и исчезает от 24 до 30%. Если хотите изменить скорость появления или исчезновения, меняйте проценты — это процент от общего времени. От правильности указания процентов — зависит и правильность работы слайдера.
Остальные настройки уже по желанию и нужде — общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд.
Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью — jQuery. Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.
На этом все, спасибо за внимание. 🙂
15 удивительных фоновых эффектов CSS — 1stWebDesigner
Знаете ли вы, что с помощью CSS можно создавать красивые анимации и интересные эффекты? В сочетании с HTML и JavaScript или даже сам по себе CSS может быть чрезвычайно мощным. Вы будете удивлены тем, что могут создать разработчики. От простых анимаций прокрутки до сложных сред, полностью построенных из кода, эти фоновые эффекты CSS могут добавить индивидуальности вашему веб-сайту.
Что, если бы вы могли бесплатно использовать фоновые эффекты CSS, созданные другими? Такие сайты, как CodePen, были созданы для размещения кода с открытым исходным кодом или другого свободно лицензированного кода, что означает, что вы можете использовать его в своих собственных проектах практически без каких-либо условий.
Это также полезно для дизайнеров, которые хотят изучить CSS или создать похожий, но персонализированный вид. Вы можете использовать эти фрагменты кода в качестве основы для создания собственных эффектов.
Есть множество разработчиков, которые создали удивительные фоновые эффекты CSS и выпустили их бесплатно. Сегодня мы собрали 15 самых красивых из них. Посмотрите сами, что вы можете сделать с творческим умом и небольшим кодом!
НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: электронная почта, администратор, целевая страница и шаблоны веб-сайтов
Всего от $16,50 в месяц!
См. Фон Pen Parallax Star в CSS от Saransh Sinha (@saransh) на CodePen.light
. См.
Фоновую анимацию градиента Pen Pure CSS от Мануэля Пинто (@P1N2O) на CodePen.light
См. «Только перо CSS: падающая звезда» Юсуке Накая (@YusukeNakaya) на CodePen.light
См. Pen Tri Travelers от Нейта Уайли (@natewiley) на CodePen.light
См. Pen ColorDrops от Nate Wiley (@natewiley) на CodePen.
light
См. Pen Zero Element: DeLight от Кейта Кларка (@keithclark) на CodePen.light
См. анимацию светящихся частиц Pen CSS от Nate Wiley (@natewiley) на CodePen.light
. См. Эффект прокрутки фонового изображения Pen Pure CSS от carpe numidium (@carpenumidium) на CodePen.
См. анимацию параллакса нескольких фоновых изображений Pen CSS от carpe numidium (@carpenumidium) на CodePen.light
.См. эффект Pen Bokeh (CSS) от Louis Hoebregts (@Mamboleoo) на CodePen.light
.См. экран входа в систему Pen Calm breeze от Lewi Hussey (@Lewitje) на CodePen.light
.
lightКреативно красивые фоновые эффекты CSS
Хороший веб-дизайн производит неизгладимое впечатление на посетителей, а в хорошо сделанной анимации всегда есть что-то особенное. Независимо от того, делаете ли вы все возможное с анимированным звездным или градиентным фоном или просто добавляете элегантные и тонкие эффекты параллакса на свой сайт, он может творить чудеса с вашим дизайном.
CodePen содержит исключительно открытый исходный код, созданный разработчиками в качестве вклада в сообщество. Итак, если один из этих эффектов привлек ваше внимание, не стесняйтесь копировать его, настраивать или использовать в качестве основы для создания собственных CSS-анимаций.
Просто не забудьте использовать ту же лицензию, и все на CodePen можно использовать бесплатно.
Примечание редактора: эта статья последний раз обновлялась 2 сентября 2020 г.
Этот пост может содержать партнерские ссылки. См. нашу информацию о партнерских ссылках здесь .
Автор:
Бренда Стоукс Бэррон
Бренда Стоукс Бэррон — профессиональный писатель и блоггер, а The Digital Inkwell — ее личный бренд. Вы часто можете увидеть ее яростно печатающей в местном Starbucks. (Да, она тот человек).
Все сообщения Автор: Бренда Стоукс Бэррон
Style Поля и фон страницы в CSS
pageSUMMARY
Создайте первые два стиля CSS — стили Body и HTML. Настройте протокол изменения размера текста.
Настройка стилей Body и HTML
Чтобы подобрать цвет фона из Photoshop, при открытом многослойном визуальном элементе Photoshop щелкните квадрат «Установить цвет переднего плана» в нижней части палитры инструментов и щелкните серый цвет фона. Получите ссылочный номер веб-цвета в нижней части палитры цветов (в моем случае # 666666). Запишите это.
Сейчас самое время записать все другие соответствующие номера ссылок на цвета, такие как текст заголовка, текст абзаца и так далее. Также было бы полезно записать все размеры шрифта.
Я считаю полезным распечатать документ Photoshop и разметить (вручную) все ссылки на цвета, размеры точек и ширину полей. Просто держите эту шпаргалку перед собой, чтобы сэкономить много времени ( рисунок 1 ). Рис. 1. Шпаргалка руководства по стилю таблицы стилей вверху ( рисунок 2 ). Рисунок 2. Пустая палитра CSS размер ветерок позже. Это совет, который я почерпнул из книги Крейга Граннелла «9».0059 Основное руководство по веб-дизайну CSS и HTML . Существуют различные способы изменения размера текста на веб-странице — вы можете назначить что угодно, от пикселей до размеров точек, и все они будут иметь разные эффекты.
У меня есть две цели для текста на моем веб-сайте:
- Для дизайна
Я хочу быть уверенным, что текст будет отображаться в заданном размере, а отношения между заголовками и текстом абзаца будут правильными. - Для удобства использования
Я хочу, чтобы пользователь мог изменять размер текста в соответствии со своими требованиями
Проблема с изменением размера в пикселях или пунктах заключается в том, что текст будет отображаться точно в требуемом размере, но (в Internet Explorer) пользователи не могут увеличивать или уменьшать размер текста, представленного таким образом, в соответствии со своим зрением.
Я хотел бы отметить как дизайн, так и юзабилити. Я нашел хороший компромисс на странице 81 книги Граннелла.
В сущности, если для «селекторов» BODY и HTML в файле CSS атрибут font-size установлен на 62,5% и 100% соответственно, становится возможным установить размеры шрифта, которые достаточно точно соответствуют размерам пунктов, используемым в графическом дизайне, используя « ems » вместо пунктов или пикселей . Например, если вы хотите, чтобы для шрифта был установлен размер 12 пунктов/пикселей, вы должны установить его как 1,2 ems в CSS. 10 пунктов становятся 1 em и так далее.
Я предоставлю книге заботу об объяснении «почему» и «почему» (ее стоит заполучить), а просто расскажу вам, как настроить селекторы.
Создать стиль HTML
Вы можете либо открыть окно стилей CSS, чтобы добавить их, либо просто вставить следующий код непосредственно в документ CSS:
html {
размер шрифта: 100%;
}
body {
семейство шрифтов: Georgia, «Times New Roman», Times, serif;
цвет фона: #666666; поле
: 0px; размер шрифта
: 62,5%;
цвет: #000;
}
Чтобы добавить стили через окно «Стили CSS», нажмите кнопку «Новое правило CSS» в нижней части палитры (это выглядит как страница с маленькими + на нем).
Окно диалога откроется.
Под селектором Тип : выберите параметр « Тег
(переопределяет элемент HTML) » во всплывающем меню.
Под Имя селектора : выберите « html » в меню. Нажмите «ОК».
Откроется новое окно под названием « определение правила CSS для html ». Единственный элемент, который мы здесь меняем, — это размер шрифта, который можно найти в категории «Тип» (которая уже выбрана в левом столбце).
В поле Размер шрифта введите 100 и выберите % в меню небольших приращений справа от поля значения.
Нажмите OK.
Как только вы это сделаете, взгляните на документ CSS, и вы увидите, что код CSS был автоматически записан в документ.
Создайте стиль BODY
Теперь повторите процесс для селектора «тело» (на этот раз убедитесь, что вы выбрали « body » в меню «Имя селектора»). На этот раз, как только вы достигнете Определение правила CSS для тела ‘окно:
В категории Type выберите ‘ Georgia, «Times New Roman», Times, serif ‘ (или что вы предпочитаете) из меню Font-family , введите 62,5% в Размер шрифта и выберите черный (#000) в меню Цвет ( рисунок 3 ).
Выбор семейства шрифтов гарантирует, что шрифтом по умолчанию для всего текста, отображаемого на сайте, будет шрифт Georgia (если он доступен) или Times New Roman (если шрифт Georgia отсутствует) или Times в качестве третьего варианта, или при отсутствии всех в-третьих, любой шрифт с засечками, установленный на компьютере. Этот выбор шрифта можно переопределить, создав стили класса или назначив разные стили содержимому определенных тегов DIV.
Теперь выберите категорию фона и введите #666666 в поле Background-color . Это должен быть точно такой же цвет, который выбран из исходного фона документа Photoshop. Если это не так, фоновое изображение не будет плавно сливаться с фоном.
Затем выберите категорию ящика . Чтобы гарантировать, что фоновые изображения и элементы веб-сайта прилегают к краям и верхней части окна браузера, нам нужно «обнулить» поля. Введите 0px в поле Top: Margin и установите флажок « Одинаково для всех: ».
Нажмите OK — на этом мы закончили.
Рисунок 3
Наконец, снова проверьте документ CSS. Вы легко сможете связать каждое действие, которое вы только что предприняли, с соответствующей строкой кода, которая была автоматически записана в таблицу стилей следующим образом:
html {
размер шрифта: 100%;
}
body {
семейство шрифтов: Georgia, «Times New Roman», Times, serif;
цвет фона: #666666; поле
: 0px; размер шрифта
: 62,5%;
цвет: #000;
}
Это, безусловно, самый эффективный способ научиться правильно размечать документ CSS — учитесь в процессе создания. Теперь мы можем перейти к более наглядной структуре самого веб-сайта.
Стиль полей и фона страницы в CSS — конец статьи
Перейти к предыдущей статье | Перейти на главную страницу | Перейти к следующей статье
Требуется обратная связь!
Пожалуйста, присылайте любые вопросы или отзывы по адресу: feedback@using-dreamweaver.