Rss
Рекомендуем
BuyTemplates - Дешевые шаблоны для DLE.
IPHoster - Качественный хостинг в соотношении цены и качества.
Sape - Лучшая биржа покупки и продажи ссылок.
Admitad - Самая крупная СРА партнерская сеть.
Advmaker - Реклама формата Banners, ClickUnder, Sliding Banner и Видеореклама.

  • Опубликовал: Pirat
  • |
  • Комментариев: 0
  • |
  • Просмотров: 36
Кнопка переключатель света на чистом CSS


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

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

1. Здесь идет по умолчанию, что по размеру выставляем самостоятельно.
Кнопка переключатель света на чистом CSS


2. Это как можно заметить, что выключен свет, а по сути создали темно прозрачный фон.
Кнопка переключатель света на чистом CSS


Приступаем к установке:

HTML
<input type="checkbox" checked="checked" class="vesametun"> 
<div class="donetugo"></div> 
<div class="branpodes"></div>


CSS
.vesametun { 
  position: absolute; 
  font-size: var(--font-size);  
  width: 5em; 
  height: 8em; 
  margin: 0; 
  filter: opacity(0); 
  cursor: pointer; 
  z-index: 2; 
} 

.vesametun ~ .donetugo { 
  position: absolute; 
  width: 5em; 
  height: 8em; 
  background: linear-gradient(#bbbec1, #fffefe); 
  border-radius: 1.2em; 
  box-shadow: inset 0 -0.2em 0.4em rgba(197, 193, 193, 0.75), inset 0 -0.8em 0 0.1em rgba(169, 166, 166, 0.85), 0 0 0 0.1em rgba(105, 102, 102, 0.8), 0 0.6em 0.6em rgba(31, 30, 30, 0.3), 0 0 0 0.4em #caced0; 
} 

.vesametun ~ .donetugo::before, 
.vesametun ~ .donetugo::after { 
  position: absolute; 
  width: 100%; 
  text-align: center; 
  font-size: 1.4em; 
  font-family: sans-serif; 
} 

.vesametun ~ .donetugo::before { 
  content: '|'; 
  bottom: 1em; 
  color: rgba(0, 0, 0, 0.5); 
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8); 
} 

.vesametun ~ .donetugo::after { 
  content: 'O'; 
  top: 0.6em; 
  color: rgba(0, 0, 0, 0.45); 
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4); 
} 

.vesametun:checked ~ .donetugo { 
  background: linear-gradient(#87898c, #f5f2f2); 
  box-shadow: inset 0 0.2em 0.4em rgba(197, 192, 192, 0.75), inset 0 0.8em 0 0.1em rgba(236, 231, 231, 0.77), 0 0 0 0.1em rgba(103, 101, 101, 0.8), 0 -0.2em 0.2em rgba(27, 26, 26, 0.18), 0 0 0 0.4em #d0d0d0; 
} 

.vesametun:checked ~ .donetugo::before { 
  bottom: 0.3em; 
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5); 
} 

.vesametun:checked ~ .donetugo::after { 
  top: 1.2em; 
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15); 
} 

.vesametun ~ .branpodes { 
  width: 100vw; 
  height: 100vh; 
  background-color: #0a0a16; 
  z-index: 1; 
  filter: opacity(0.7); 
} 

.vesametun:checked ~ .branpodes { 
  filter: opacity(0); 
}
Источник: newtemplates.ru


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.