Перейти к содержимому



Градиент border

#1

Поделиться сообщением #1



kpripper

kpripper
  • Пользователь
  • 41 сообщений
  • Репутация: 0
0

Отправлено 10 Октябрь 2013 - 20:03

Как сделать такой градиент у border-top средствами CSS ?
Изображение

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Border - картинка
  2. Помогите с css (вкладки)
  3. Кнопка на css из изображений
  4. Верстаем горизонтальное меню по мотивам MasterWEBS
  5. Редакторы кода / Q&A / Сервисы / Фреймворки для фронтенд разработчиков

#2

Поделиться сообщением #2



Artemcher96

Artemcher96
  • Неактивные
  • 301 сообщений
  • Репутация: 13

Отправлено 10 Октябрь 2013 - 21:39

Какой такой?
  • 0

#3

Поделиться сообщением #3



greenkas

greenkas
  • Неактивные
  • 30 сообщений
  • Репутация: 3

Отправлено 10 Октябрь 2013 - 21:45

Какой такой?

Там синяя полоска внизу сообщения.
Вам что-то такое нужно. http://htmlbook.ru/c...linear-gradient Как вариант, сделать 2 таких полоски рядом с переходом от одного к другому и наоборот. Но работает это только в firefox.
  • 0

#4

Поделиться сообщением #4



fedornabilkin

fedornabilkin
  • Пользователь
  • 727 сообщений
  • Репутация: 102

Отправлено 11 Октябрь 2013 - 11:36

У бордера вряд ли есть градиент. Наверно проще сделать див с градиентным бекграундом.
  • 0
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


#5

Поделиться сообщением #5



c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 12 Октябрь 2013 - 00:13

У бордера вряд ли есть градиент. Наверно проще сделать див с градиентным бекграундом.


Ты прав на все 100%, добавить именно Бордеру градиент невозможно.
Нужно использовать обманки.
Здесь уже будут идти вариации в зависимости от типа бордера, который ты хочешь получить.
  • Если 1 - 2 бордера имеют градиент - используем псевдо-классы :before || :after
  • Если 4 бордера с каким то градиентом, который можно получить при помощи одного общего градиента ФОНА, в который вписать див со сплошным фоном (белого допустим, что б небыло видно нижнего фона градиента), разместить в нем контентом с внешним отступом... надеюсь идею нормально описал...
Идеи кончились на сонную голову...


http://jsfiddle.net/c0ns0l3/P5gP9/

Накидал...

Собственно как видите - 2й вариант получается самый шикарный.. т.к. можно накладывать дополнительный эффекты :)

Лично мое мнение решение достаточно оригинальное и интерестное, добавить заглушку для браузеров, которые не деражат градиенты.. и ты в любом случаи получишь бордер... что есть хорошо, только не градиентный :)
  • 1


Оформление форума – IPBSkins.ru