Как достигается такой эффект?
Вложений: 1
Установил кнопку к себе на сайт и она приобрела вид фонового изображения.
Вот так это выглядит: Вложение 3876 Подскажите пожалуйста, как достигается, такой эффект? Вот Css: .switch { display: block; position: fixed; width: 70px; height: 100px; margin-top: 170px; margin-left: 900px; border-radius: 70px; background: #6A5928, background: linear-gradient(#6A5928, #fdfdfd); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 12px 13px rgba(49,18,14,.6); cursor: pointer; } .switch:before { content: ""; position: absolute; top: -10px; bottom: -10px; left: -5px; right: -5px; z-index: -1; background: #6A5928, border-radius: inherit; box-shadow: 10px 1px 1px rgba(#aea391,4), 10px 13px 13px rgba(170, 160, 140, 4), 10px 10px 5px rgba(196,196,196, 5); } .switch:after { content: ""; width: 60px; height: 70px; border-radius: 50%; z-index: -1; left: 18px; top: 10px; background: #6A5928; -webkit-filter: blur(5px); } #switch { clip: rect(0 0 0 0); visibility: hidden; } #switch:checked ~ .switch { background: #C4C4C4; box-shadow: 10px 6px 5px rgba(196,196,196,.10), 10px 10px 5px rgba(196,196,196,.10); border: 5px; } #switch:checked ~ .switch:after { display: none; } |
Цитата:
|
Благодарю, понял)
|
Часовой пояс GMT +3, время: 10:02. |