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



Градиент border

#1 kpripper
kpripper
  • Неактивные
  • 44 сообщений
  • Репутация: 0
0

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

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

 

 

  • 0

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

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

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

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

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

Какой такой?

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

#4 fedornabilkin
fedornabilkin
  • Модератор
  • 1 177 сообщений
  • Репутация: 201

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

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

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#5 c0ns0l3
c0ns0l3
  • Неактивные
  • 264 сообщений
  • Репутация: 49

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

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


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


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

Накидал...

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

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


× Быстрый вопрос
Пользователь месяца
Rodiola Rodiola 1-й за Август
Очков активности: 1 552 3 темы, 106 сообщений, 9 баллов репутации
Сайт: rukodelkovo.ru
ТОП самых активных за этот месяц
  • Фотография MattCutts
    #1

    MattCutts (dmitrylee.ru)
    Очков активности: 480 5 тем, 65 сообщений, 4 балла репутации

  • Фотография Андрей WPM
    #2

    Андрей WPM (wpmaster.kz)
    Очков активности: 378 Вне конкурса за определение пользователя месяца

  • Фотография Chaser
    #3

    Chaser (majento.ru)
    Очков активности: 33 1 тема, 8 сообщений, 2 балла репутации

  • Фотография lena220678
    #4

    lena220678
    Очков активности: 33 1 тема, 19 сообщений, 1 балл репутации

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 27 0 тем, 18 сообщений, 1 балл репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 24 0 тем, 8 сообщений, 2 балла репутации

  • Фотография Rodiola
    #7

    Rodiola (rukodelkovo.ru)
    Очков активности: 22.5 Вне конкурса за определение пользователя месяца

  • Фотография Constantine
    #8

    Constantine (constantine.video.blog)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (24ho.ru)
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография NataliaAntalia
    #10

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 15 0 тем, 10 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.08.2019
  • Яндекс выдача: 15.09.2019
Топ 5 участников по репутации

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