logo
Русский
    Русский

      Дополнительные типы блоков (EBT) — новый опыт конструктора страниц❗

      Дополнительные типы блоков (EBT) — стилизованные, настраиваемые типы блоков: слайдшоу, вкладки, карточки, аккордеоны и многие другие. Встроенные настройки для фона, DOM Box, плагины Javascript.

      Демо EBT модули Скачать EBT модули

      ❗Дополнительные типы параграфов (EPT) — новый опыт работы с параграфами

      Дополнительные типы параграфов (EPT) — набор модулей, основанный на аналогичных параграфах.

      Демо EPT модули Скачать EPT модули

      Scroll
      22/02/2025, by Гость (не проверено)
      Форумы

      как сделать такую кнопку при  нажатие, грандиентом как в фотошопе, внизу жёлтый цвет а сверху бел или светло жёлтый цвет,   


      Проще всего открыть какой-нибуд button generator и сделать себе такую кнопку с градиентом:

      http://www.bestcssbuttongenerator.com/


       #navigation{
      background: #02ffb5;
      height: 38px;
      width: 1000px;
      margin: 0 auto;
      font-size: 14px;
      }


      #navigation ul.menu li {
      height: 30px;
      }

      #navigation li a{
      height: 27px;
      border-left: 1px solid #of687e;
      border-right: 1px solid #60b9cf;
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 5px;
      color: #676767;
      text-decoration: none;
      }

      #navigation li.last a{
      border-right: 0px;
      }

      #navigation li.first a{
      border-left: 0px;
      }

       

       

       

       ====================================================

      сама кнопка из генератора

       

       

      #navigation {

      -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
      -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
      box-shadow:inset 0px 1px 0px 0px #ffe0b5;

      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
      background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
      background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
      background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
      background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
      background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);

      background-color:#fbb450;

      -moz-border-radius:7px;
      -webkit-border-radius:7px;
      border-radius:7px;

      border:1px solid #c97e1c;

      display:inline-block;
      color:#ffffff;
      font-family:Trebuchet MS;
      font-size:17px;
      font-weight:bold;
      padding:2px 11px;
      text-decoration:none;

      text-shadow:0px 1px 0px #8f7f24;

      }
      #navigation:hover {

      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
      background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
      background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
      background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
      background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
      background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);

      background-color:#f89306;
      }

       

       


      забыл, написать,

      не получается сделать чтобы  сама кнопка отображалась только одна при нажатие?

       

       


      :hover - это стиль по наведению, :active - активная ссылка.


      у меня же нет :active - активная ссылка.

       

       

       

       

       


      как вот так сделать меню


      Сделать, чтобы выдвигалась черная полоска? Вам нужно будет сделать на hover так

      margin-top: -5px;

      padding-top: 5px;

      Таким образом вы поднимете блок на пикселей вверх, но контент останется на месте.