CSS3 градиент для границ блока

  • Tutorial


В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.

В конечном варианте у нас получится кнопка, которая на скриншоте выше.

Работать мы будем с такой вёрсткой:

<html>
<body>
    <a href="http://google.com" class="magicButton">I am a button!</a>
</body>
</html>
​


Сначала зададим простую стилизацию для кнопки

.magicButton
{
    color: #444;
    font: bold 16px arial;
    background: #e4e4e4;
    border: 1px solid transparent; /* граница будущего градента */
    border-radius: 3px;
    padding: 8px 12px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);
}

Затем приступаем, собственно, к хаку.

Для того чтобы создать градиент на месте нашей границы нам понадобится в первую очередь его расположить там (background-origin: border-box;), а затем обрезать чтобы он находился точно в этом месте (background-clip: border-box;).
Основная часть готова, теперь осталось лишь прописать наш градиент. В данном примере я использую градиент в светло-серых тонах, если вы используете кнопку не на светлом фоне, то цвета градиента надо будет соответственно изменить.

linear-gradient(#e4e4e4, #ccc);


Но после установки градиента появляется проблема в том что залито так же и весь фон кнопки. Для этого мы наложим ещё один градиент, только на этот раз расположим и обрежем его в пределах padding-box.

И в тоге получим вот такую кнопку: jsfiddle.net/CyberAP/DzHUj

Минусы данного приёма:
  • Нельзя использовать полупрозрачный градиент для основного фона, произойдёт наложение. Зато прозрачную обводку делать вполне возможно.
  • Есть проблема с border-radius, при значении более 3px по краям градиент начинает заметно обрезаться. Пока что не нашёл решения.

Но есть и плюсы:
  • Никаких изображений и лишнего трафика.
  • Можно ставить какой угодно градиент для обводки, даже радиальный, их комбиниорвать.
  • Работает с любой шириной границы.

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 32

    –5
    вы в ие смотрели результат?
    • UFO just landed and posted this here
        –2
        разницы почти нет, да
          +5
          Graceful degradation, да.
            0
            и даже не в середине блока, а вверху и с корявым бордюром
        0
        В 10-ом?
          0
          В 9-ом
        –1
        А input слабо из этой кнопки сделать?
          +2
          Эта фишка работает с любым элементом. Можете input использовать, никто не запрещает.
          0
          Да, точно, извиняюсь, пашет))
          Обычно, инпуты капризные)
            +1
            Эх… такие бы примеры для checkbox
              +14
              <зануда_mod>
              Как сделать пост в блог CSS:
              1) погуглить linear gradient/box-shadow/text-shadow/border-radius
              2) выбрать любой из онлайн генераторов, подобрать цвета
              3) запостить код на хабр в виде «статьи»?!
              4)…
              5) Profit


              Минусы/Плюсы:
              — graceful degradation
              — ура CSS5, HTML6, *CoolTechnologyName105*
              </зануда_mod>

                  background-image: linear-gradient(#f2f2f2, #e4e4e4 50%), linear-gradient(#e4e4e4, #ccc);
                  background-image: -o-linear-gradient(#f2f2f2, #e4e4e4 50%), -o-linear-gradient(#e4e4e4, #ccc);
                  background-image: -ms-linear-gradient(#f2f2f2, #e4e4e4 50%), -ms-linear-gradient(#e4e4e4, #ccc);
                  background-image: -moz-linear-gradient(#f2f2f2, #e4e4e4 50%), -moz-linear-gradient(#e4e4e4, #ccc);
                  background-image: -webkit-linear-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
              

              по коду: много раз упоминалось: Писать свойства без префиксов в конце.
                –2
                Что предложите для адекватной поддержки данного кода на IE6+, FF2+ и прочей древней нечисти? А то так ваша статья, извините, на уровне школьного сочинения первоклассника. Такой код нельзя использовать в серьезном проекте с требовательным к эстетике заказчиком, к примеру, так как вам спросят, а почему у директора на компьютере кнопка квадратная получилась, что вы нам за ерунду сделали?

                Ценность статьи, таким образом, отстутствует, так как на css3 такую примитивщину написать самому быстрее, чем прочесть статью.
                  0
                  По поводу статьи согласен, никакой новой информации не даёт (лично для меня), но по поводу «IE6+, FF2+ и прочей древней нечисти» мы уже давно шлём таких заказчиков подальше и в договоре четко прописываем минимальные требования к браузерам.
                  0
                  Что-то вы перемудрили с градиентами и прочими background-… Все можно сделать намного проще. Проблема с бордер-радиус отпадает, да и кода поменьше.
                    +1
                    Чем это ваш код проще? Тем что использует дополнительную сущность? Или тем, что он в два раза толще? Это что шутка такая?
                      0
                      Да, с «поменьше» я погорячился, конечно, но он хотя бы работает исправно и не дает таких результатов .
                        0
                        И в правду, он работает лучше ))
                      0
                      Да, альтернативный вариант у вас хороший, спасибо.
                        0
                        Поясню еще. Такой маневр использовался давно, только вместо ПЭ была доп. обертка с паддингами. Теперь можно использовать псевдоэлемент и избавиться от лишнего кода в html.
                          0
                          и еще не border-radius: inherit;
                          а на пару пикселей больше чем у блочка — ваще красота тогда
                          +1
                          ох не скоро большинство пользователей для которых делаются сайты обновят свои браузеры))
                            0
                            Хорошо бы ещё hover-эффект сделать!
                              0
                              hover работает прекрасно.
                              0
                              box-shadow: приходится убирать из-за дури IE9, иначе:

                                0
                                У вас две ошибки.

                                Во первых в ссылке вместо положенного для демонстраций знака # почему-то находится линк на гугл. Я хочу иметь возможность нажать на демо-кнопку 10 раз.

                                Второе. Нет поддержки старых версий Chrome и Safari понимающих только -webkit-gradient()

                                Правильная кнопка
                                jsfiddle.net/duE9F/2/
                                  0
                                  sass и compass юзайте, там все это уже давно встроено и используется оной строчкой
                                    +1
                                    Ха, сам думал у себя написать про этот метод, но поленился. Отлично, мне меньше работы :)

                                    По поводу минусов:

                                    1. Для очень маленьких бордер-радиусов (2-3 пикселя максимум) можно сделать и полупрозрачные градиентные бордеры, и полупрозрачный градиентный фон. Советую подумать над тем, как это сделать, не хочу сразу давать подсказку :)

                                    2. Для больших бордер-радиусов есть один хак, которым можно добиться и больших скруглений при непрозрачном фоне. Один из вариантов можно посмотреть на этой картинке — там виден недостаток: края скруглённого бордера получаются чуть светлее, чем нужно. Другой метод, почти без недостатков, можно элементарно сделать с псевдоэлементом, но в этом случае для элемента нужно прописывать z-index, что не всегда может быть применимо.

                                    Код обоих вариантов не буду приводить, оставлю на откуп экспериментам. Но если надо — могу и про них написать.
                                      0
                                      Хотел первый вариант сделать с border-image, но он, к сожалению, не поддерживает border-radius. А так было бы универсальное свойство.
                                        0
                                        Да, отсутствие бордер-радиуса для бордер-имаджа — огромный недостаток, обидно, что нельзя хотя бы обрезать получающийся блок, не то, что пускать границу по радиусу.
                                      0
                                      Я ещё, пожалуй, напишу, что свойства без префикса надо писать в конце после свойств с префиксом.
                                        0
                                        еще вариант градиента для границ, в ие8 градиенты есть, как у кнопки, так и у границы, конечно не такой эффект как в нормальных браузерах, но все же

                                        Only users with full accounts can post comments. Log in, please.