Разноцветная линия средствами CSS

[volshebnyi]

Здравствуйте!

 

Подскажите, оптимально ли я сделал вот такую линию средствами CSS? Может быть есть варианты попроще?

 

 

http://jsfiddle.net/X3ssR/

 

[afdw]

http://jsfiddle.net/X3ssR/1/

 

PS: узнал о фиче http://jsfiddle.net/ : если ввести, например

.test {background: linear-gradient(to top, #fefcea, #f1da36);}

, и попробовать поставить табуляцию перед этой строкой c градиентом, то автоматический добавятся префиксы:

.gradient {background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefcea), to(#f1da36));background: -webkit-linear-gradient(to top, #fefcea, #f1da36);background: -moz-linear-gradient(to top, #fefcea, #f1da36);background: -o-linear-gradient(to top, #fefcea, #f1da36);background: linear-gradient(to top, #fefcea, #f1da36);}

!

Edited May 29, 2014 by afdw

[amelice]

PS: узнал о фиче http://jsfiddle.net/ : если ввести, например,  и попробовать поставить табуляцию перед этой строкой c градиентом, то автоматический добавятся префиксы:

 

Прикольно, при чем в кодпене так же получается )
Случайно узнали( как обычно у меня бывает) ) или где то прочитали?

[DivMan]

http://cssdeck.com/labs/7nlgme6h

[afdw]

Случайно узнали( как обычно у меня бывает) ) или где то прочитали?

Случайно, хотел поставить табуляцию, а тут... 

[DivMan]

у меня ничего не добавляется 

[SelenIT]

то автоматический добавятся префиксы:

.gradient {background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefcea), to(#f1da36));background: -webkit-linear-gradient(to top, #fefcea, #f1da36);background: -moz-linear-gradient(to top, #fefcea, #f1da36);background: -o-linear-gradient(to top, #fefcea, #f1da36);background: linear-gradient(to top, #fefcea, #f1da36);}

…и не дадут почти никакого толку, т.к. старые префикснутые реализации не поймут записи с «to». Ох, сырая фича, недоделанная!

[afdw]

 

то автоматический добавятся префиксы:

.gradient {background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefcea), to(#f1da36));background: -webkit-linear-gradient(to top, #fefcea, #f1da36);background: -moz-linear-gradient(to top, #fefcea, #f1da36);background: -o-linear-gradient(to top, #fefcea, #f1da36);background: linear-gradient(to top, #fefcea, #f1da36);}

…и не дадут почти никакого толку, т.к. старые префикснутые реализации не поймут записи с «to». Ох, сырая фича, недоделанная!

 

Да "to" я сам написал изначально

[SelenIT]

В новом синтаксисе оно и должно быть, но только в нём. Странно, что добавлялка префиксов не скорректировала запись для старого синтаксиса, хотя для совсем старого -webkit-варианта, вроде, справилась…

[amelice]

Случайно, хотел поставить табуляцию, а тут... 

Так и думала ))