ZorNet.Ru — сайт для вебмастера » HTML и CSS » Переключатель фона сайта в HTML + CSS

Переключатель фона сайта в HTML + CSS

Переключатель фонов по своей конструкции не сложный, который выполнен при помощи HTML и CSS, а также библиотеки jQuery для функциональности замены цвета. По установочному процессу простой в реализации, где нужно прописать библиотеку, хотя в большинстве у многих она уже установлена. Если мы говорим про конструктор uCoz, то библиотека вшита, и ее можно найти в настройках для обновления.

Хоть не такой сложный код, но в тоже время он по своему функционалу идет как эффективный или оригинальный переключатель фона, где крайний фон идет изображением. Сделано для того, чтоб вы могли поставить везде под ссылки, или выставить однотонный оттенок цвета.Применение данного материала может быть обширным, это просматривать дизайн на разном фоне, также на других направление в структуре сайта.

Установка:

HEAD

Код

HTML

Код

<div id="demilo_sagoka">
  <span>Сделайте клик по кнопке</span>
  <ul>
  <li onclick="$('#demilo_sagoka').css('background', '#299739')" style="background:#299739;"></li>
  <li onclick="$('#demilo_sagoka').css('background', '#31899b')" style="background:#31899b;"></li>
  <li onclick="$('#demilo_sagoka').css('background', '#cf6417')" style="background:#cf6417;"></li>
  <li onclick="$('#demilo_sagoka').css('background', '#972b3f')" style="background:#972b3f;"></li>
  <li onclick="$('#demilo_sagoka').css('background-image', 'url(http://zornet.ru/_fr/56/9378154.jpg)')" style="background:url(http://zornet.ru/_fr/56/9378154.jpg);"></li>
  </ul>
</div>

CSS

Код

#demilo_sagoka{
  width:100%;
  height:100%;
  position:absolute;
  background:#37af49;
  transition:all 0.25s cubic-bezier(.71,.5,0,.98);
}

span{
  margin:0;
  padding:0;
  position:absolute;
  display:block;
  width:256px;
  height:64px;
  font-size:22px;
  left:64px;
  top:64px;
}

ul{
  position:absolute;
  padding:0;
  margin:0;
  left:64px;
  top:128px;
}

li{
  display:block;
  float:left;
  margin:0 16px 0 0;
  box-shadow:0 0 0 4px #ecf1ed;
  padding:0;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:all 0.45s cubic-bezier(.71,.5,0,.98);
}

li:hover{
  box-shadow:0 0 0 2px #ecf1ed, inset 0 0 0 8px #ecf1ed;
  opacity:0.8;
}

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

Демонстрация

26 Июля 2023 Загрузок: 6 Просмотров: 646 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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