| Kosten | Пятница, 05 Января 2018, 19:40 | Сообщение 1 |
| Каждый веб мастер, как может создает свой интернет ресурс оригинальным. И кнопки на нем не исключение, так как они могут идти под разным дизайн и выполнять различные функций, что здесь рассмотрим небольшую подборку на них. Создание сайта вероятно является одним из самых актуальных в сети интернет.
И тематические ресурсы в создание растут как грибы после дождя, где используют HTML и CSS во всех направлениях в дизайн и безусловно в функциональности. Стили CSS прошел долгий путь от форматирования структурированного контента. Он использовался для точного контроля расположения документов и применения различных макетов к типам носителей.
Предоставить веб мастерам большую функциональность, где совмещена со стилистикой SS3 предлагает крупную редакцию CSS. В этом уроке мы сделаем несколько классных кнопок CSS3.
Фантастические анимированные кнопки с помощью CSS3. Мы создадим круглые кнопки, кнопки сжимания, кнопки для увеличения, расширяющие кнопки, кнопки масштабирования, кнопки для встряхивания и других. Вы можете легко использовать любую кнопку на своем веб-сайте без какой-либо внешней зависимости.
Стиль CSS3 полностью меняет мир веб-дизайна и способ проектирования веб-страниц. В настоящее время нам не нужно много полагаться на JavaScript и изображения для разработки потрясающих элементов дизайна для наших веб-сайтов. CSS3 делает магию для нас легко и эффективно. Хотя есть много дизайнеров, которые по-прежнему неохотно используют CSS3 из-за отсутствия поддержки в некоторых браузерах, но есть много людей, которые продвигаются вперед и разрабатывают некоторые потрясающие вещи в CSS3.
Итак, если вы хотите повысить свои навыки в разработке некоторых удивительных меню и кнопок с помощью CSS3 , то эта статья - это то, что вы искали. Мы очень усердно работали над составлением только лучших и наиболее хорошо написанных руководств доступный в Интернете. Мы решили включить как учебники Button, так и Menu, чтобы сделать этот список эпической коллекцией.
Шаг 1: Начните с HTML, что устанавливаем, где вам нужно.
Код <a href="http://zornet.ru/" class="zornet_rulined green">ZORNET.RU</a> <a href="http://zornet.ru/" class="zornet_rulined red">ZORNET.RU</a>
CSS
Код .zornet_rulined {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #f5f0f0;
padding: 9px 75px;
margin: 0 9px;
text-decoration: none;
}
.green {
border: solid 1px #38610c;
background-color: #6ea71a;
}
.red {
border: solid 1px #610404;
background-color: #921d1d;
}
Демонстрация:
Стиль CSS3 намного продвинут чем обычный стиль CSS. Здесь мы добавим стиль для продвижения свойств кнопок, таких как закругленные углы и тени. Для этого нам нужно использовать различные префиксы для разных браузеров.
Код <a href="#" class="zornet square green">надпись</a> <a href="#" class="zornet rounded red">надпись</a>
CSS
Код .zornet {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 75px;
margin: 0 20px;
text-shadow: 2px 2px 1px #595959;
filter: dropshadow(color=#595959, offx=1, offy=1);
text-decoration: none;
}
.green {
border: solid 1px #3b7200;
background-color: #88c72a;
}
.red {
border: solid 1px #720000;
background-color: #c72a2a;
}
.square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
Демонстрация:
3 вариант
Код <a href="#" class="zornet square green">надпись</a> <a href="#" class="zornet rounded red">надпись</a>
CSS
Код .zornet {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 75px;
margin: 0 20px;
text-shadow: 2px 2px 1px #595959;
filter: dropshadow(color=#595959, offx=1, offy=1);
text-decoration: none;
}
.green {
border: solid 1px #3b7200;
background-color: #88c72a;
background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);
background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);
background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%);
background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );
background: linear-gradient(top, #88c72a 0% ,#709e0e 100%);
-webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
}
.red {
border: solid 1px #720000;
background-color: #c72a2a;
background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
-webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}
.square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
Демонстрация:
| | Страна: (RU) |
| |
