GIF вместо фона
Адаптация под телефон gif-фона
Сделал сайт с гиф-фоном, когда захожу с телефона посмотреть у меня гиф-картинка остается сверху, а.
Возможно ли создание gif без фона?
Возможно ли создать гиф, имея 3д модельку, без фона? При этом не прибегая к видео-редакторам
Новый формат вместо GIF. меньше в 4 раза
GIF это очень старый и плохосжатый формат. современные кодеки сжимают ту же картинку с простой.
Как сделать фон сайта из разных gif
Пытаюсь сделать фон из нескольких gif-картинок. Хотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу. Делаю так на странице, пока получилось по центру одну влепить. Может знаете как это правильно реализовать.
С Днюхой . html получаеться вот такое
Отслеживать
задан 12 июн 2019 в 6:59
515 4 4 серебряных знака 19 19 бронзовых знаков
Вам нужно использовать свойства: position, left, right, top, bottom. Справка — тут w3schools.com
12 июн 2019 в 7:19
@nick_n_a я не могу в свой код еще добавить gif-ок, только одна отображается, может у вас есть пример какой нибудь?
12 июн 2019 в 7:21
Фон может быть один. Не знаю можно ли «скомбинировать». Расставьте img или div задайте им например position:float right:0px;width:ширина картинки и т д. Поддерживают ли браузеры прозрачность — png — да. gif — нет.
12 июн 2019 в 7:22
Ну да, так фейерверки залазят за gif-ки, спасибо за помощь, оставлю одну по центру.
12 июн 2019 в 7:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
С помощью background-position можно поменять расположение. Загуглите, чтобы узнать подробней. Можете также добавить это в в ваш background. Чтобы сделать 4 штуки, можете попробовать так:
С Днюхой . html Плюсом можете редактировать ширину и высоту индивидуально. Вместо top, left и т.д. можете использовать проценты, пиксели, и т.д.
Как сделать анимированный фон на странице
Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.
Способ совершенно тривиальный и простой, думаю, что многие до него додумаются сразу. Вот CSS-код:
html background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
height: 100%; /* 100% высота страницы */
>
Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.
Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.
Создано 16.05.2012 17:10:41
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 19 ):
ken15 17.05.2012 10:37:03
Совсем просто интересно зачем задавали такой вопрос
idxdoc 27.05.2012 14:23:48
Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)
Admin 27.05.2012 18:34:18
Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup
lev_100rus 12.07.2012 18:28:46
Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста.
Admin 12.07.2012 19:45:17
Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.
lev_100rus 12.07.2012 19:56:25
Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?
Admin 12.07.2012 20:01:01
Отступы слева и справа — это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body
lev_100rus 12.07.2012 20:12:09
У меня шапка залита в . Поставить это в head. Или перенести шапку в body?
Admin 12.07.2012 20:38:55
В вообще не должно быть контента. Весь контент в .
lev_100rus 12.07.2012 20:48:07
перенесу шапку в body и сделаю как вы писали! Спасибо
lev_100rus 13.07.2012 15:54:47
Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!
Admin 13.07.2012 16:11:46
Значит проблема в Вашей верстке. Что именно происходит с кнопками?
lev_100rus 13.07.2012 16:43:41
У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают «Прыгать»! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.
Admin 13.07.2012 17:11:42
Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.
lev_100rus 13.07.2012 17:26:17
Admin 13.07.2012 17:39:26
Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.
lev_100rus 13.07.2012 18:13:05
Всё равно что-то не получается!:( вот код: .but < top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; >И тем не менее они всё равно смещаются
lev_100rus 13.07.2012 22:24:15
Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)
[email protected] 28.03.2015 19:52:41
У меня почему-то не получилось задать фон таким способом.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Анимированный фон веб-страницы на чистых HTML и CSS
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «Amazing Pure HTML and CSS background animations».
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.
Диагональный градиент
Написать такой код легко, а эффект получается очень интересный.
Скольжение диагоналей
Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.
Анимированный фон
Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.
Бесконечный паттерн
Отдельное спасибо @keyframes за бесконечную прокрутку!
Прекрасный анимированный бэкграунд
Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.
Анимированный «лесной» фон
Плавающие квадраты
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Снова диагональные линии
Плывущие облака
Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).
Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.