• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект 3D-нажатие кнопки на CSS (Создание трехмерной нажимаемой кнопки с использованием CSS)
Создать эффект 3D-нажатие кнопки на CSS
Kosten
 		Воскресенье, 10 Июня 2018, 22:33 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Отличное решение для размещенее кнопки на сайте в формате 3D, под светлый или темный дизйн сайте, где присутствует оригинальный эффект при нажатие. Стили CSS можно использовать, чтобы по-настоящему замаскировать прозрачную ссылку и создать потрясающую кнопку «призыв к действию» как в случае с нашей трехмерной нажатой кнопкой здесь. Он использует псевдо-элемент CSS2, чтобы добавить более низкую сторону 3D к ссылке, а тени CSS3 и переход к завершению внешнего вида.

Чтобы преодолеть серьезные ограничения Google Chrome и Safari во время написания, не поддерживая переходы CSS3 на псевдоэлементы, мы используем метод «наследовать», как описано здесь , поэтому трехмерная сторона кнопки анимируется, когда пользователь нажимает на кнопку кнопка.

Рассмотрим дизайн по умолчанию:



Здесь при клике на кнопку:



3D-нажатие кнопки

HTML

Код
<a href="http://zornet.ru/" class="zornsafuloplasen">ZORNET.RU</a>


CSS:

Код
a.zornsafuloplasen {
    background: darkred;
    color: white;
    text-decoration: none;
    font: bold 27px Arial;
    position: relative;
  top: 0;
    bottom: -12px;
  margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a.zornsafuloplasen, a.zornsafuloplasen:after {
    display: inline-block;
    padding: 9px 14px;
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 7px/14px;
    border-radius: 7px/14px;
    outline: none;
}

a.zornsafuloplasen:after {
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit;
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c;
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

a.zornsafuloplasen:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835;
}

a.zornsafuloplasen:active {
    top: 12px;
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}


Обратите внимание, что по умолчанию «глубина» 3D-эффекта составляет 12 пикселей. Если вам нужно увеличить или уменьшить это значение, измените значение «12px», которое происходит 3 раза в CSS.

Демонстрация
Прикрепления: 5512992.png (7.6 Kb) · 2392392.jpg (11.4 Kb)
Страна: (RU)
Kosten
 		Понедельник, 18 Июня 2018, 15:31 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Вашему вниманию кнопка 3D CSS3 с использованием: before &: after, где можно поставить значение виде знаки или цифры. Здесь используется потрясающие новые функций в CSS3, и как все сделать правильно, а это анимация трехмерной кнопки. В мануале рассмотрим, как можно задействовать переходы CSS, чтобы он выглядел так, как кнопка 3D, когда вы ее нажимаете. Вот чистый текстовый эффект на основе CSS. У вас есть текст с несколькими слоями, что дает эффект трехмерной тени.

CSS3 развивается быстро, и самая захватывающая часть видит все интригующие и привлекательные эффекты, которые изобретаются для решения реальных проблем дизайна. Благодаря объединенному творчеству дизайнерского сообщества, CSS3 быстро путешествовал по зоне интересных спекуляций и на территории времени и ресурсосберегающего практического повседневного использования.

До нажатие:



При нажатие:



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

HTML

Код
<button>ZORNET.RU</button>


CSS

Код
button {
    width: 170px;
    height: 34.9px;
    display: block;
    font-family: Arial, "Helvetica", sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #f7f7fb;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 0px #07526e;
    padding-top: 6px;
    margin-left: auto;
    margin-right: auto;
    left: 30px;
    position: relative;
    cursor: pointer;
    border: none;
    border-left: solid 1px #2ca3d0;
    background: rgb(21, 164, 216);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: inset 0px 1px 0px #25a8da, 0px 5px 0px 0px #0d4b63, 0px 10px 5px #968f8f;
}

button:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}

button:before {
    content: "1";
    width: 35px;
    height: 25px;
    display: block;
    position: absolute;
    padding-top: 10px;
    top: 0px;
    margin-left: -37px;
    font-size: 16px;
    font-weight: bold;
    color: #80c7e2;
    text-shadow: 1px 1px 0px #0a4f69;
    border-right: solid 1px #0e556f;
    background: rgb(21, 134, 175);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: inset 0px 1px 0px #30b0e0, 0px 5px 0px 0px #082e3c, 0px 10px 5px #989292;
}

button:active:before {
  top:-3px;
  box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}


Демонстрация
Прикрепления: 5091261.png (3.3 Kb) · 9707034.png (3.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект 3D-нажатие кнопки на CSS (Создание трехмерной нажимаемой кнопки с использованием CSS)
  • Страница 1 из 1
  • 1
Поиск: