Оцените верстку

[Sergik+]

Не понял почему border-image не работает в лисе  .

Есть еще некоторые косяки, вот и думаю может это вовсе не косяки.

Жду суровой критики, сразу же прошу возможные способы решения проблем.

http://sergik.esy.es/

 

[npofopr]

Текст выравненный по ширине, это ужасно...

 

А где у вас там border-image и зачем он там вообще?

Макету уж сто лет в обед, в те времена, когда его выкладывали и знать не знали, я думаю, про border-image.

[DivMan]

правый сайдбар съезжает вниз, при уменьшении сайта до 33%

[Sergik+]

правый сайдбар съезжает вниз, при уменьшении сайта до 33%

Никогда не уменьшайте сайты на 33%.

Текст выравненный по ширине, это ужасно...

 

А где у вас там border-image и зачем он там вообще?

Макету уж сто лет в обед, в те времена, когда его выкладывали и знать не знали, я думаю, про border-image.

Текст могу хоть как выровнять , а border-image решил использовать чтобы лишние картинки не вставлять.

Переделать центрирование текста ? И главное почему ? Я ведь учусь.

Edited July 29, 2014 by Sergik+

[npofopr]

Текст могу хоть как выровнять

Вы да, но не забывайте про пользователей. Они не знают всех ваших css. Я про то, чтобы не получилось так, что если юзер захотел сделать по правому краю, а у вас там стоит по ширине, и пользователь в замешательстве, хотя это мелочи конечно.

[Sergik+]

 

Текст могу хоть как выровнять

Вы да, но не забывайте про пользователей. Они не знают всех ваших css. Я про то, чтобы не получилось так, что если юзер захотел сделать по правому краю, а у вас там стоит по ширине, и пользователь в замешательстве, хотя это мелочи конечно.

 

Спасибо учту.

[andrew312]

Не понял почему border-image не работает в лисе

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?

Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

[Sergik+]

 

Не понял почему border-image не работает в лисе

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?

Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

 

http://css-tricks.com/examples/GradientBorder/

на stackowerflow тоже жалуются что лиса не может так.

Edited July 29, 2014 by Sergik+

[andrew312]

 

 

Не понял почему border-image не работает в лисе

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?

Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

 

http://css-tricks.com/examples/GradientBorder/

на stackowerflow тоже жалуются что лиса не может так.

 

Примеры, которые даны по ссылке у меня не работают в firefox 26, а в хроме работают.

Это видимо какие-то недокументированные команды. Я думаю лучше использовать только то, что

есть в спецификации http://www.w3.org/

Edited July 29, 2014 by andrew312

[ows.nightwolf]

 

Не понял почему border-image не работает в лисе

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?

Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

 

 

Согласно спецификации свойство border-image (п. 6.7) в одном из своих параметров устанавливает свойство border-image-source, которое в свою очередь может принимать своими значениями типы none и <image> (п. 6.1). В свою очередь тип <image> (п. 3) может принимать значения таких типов как: <url> | <image-list> | <element-reference> | <gradient>

 

т.е. градиент можно применять во всех свойствах, которые ожидают в качетсве своего значения тип данных <image>. В дополнение отрывок из того же пункта спецификации:

An ‘<image>’ can be used in many CSS properties, including the ‘background-image’, ‘list-style-image’, ‘cursor’ properties [CSS21] ( where it replaces the ‘<url>’ component in the property's value ).

Переводится примерно как:

Тип <image> может быть использован в множестве CSS свойств, включая свойства ‘background-image’, ‘list-style-image’, ‘cursor’ (где он замещает <url> компонент в значении свойства).

 

По поводу вашей задачи - вот так вот вроде бы должно работать в современных браузерах, но проверить у меня пока возможности нету (система только что установлена). У меня FF nightly - все отображается корректно.

http://jsbin.com/rusicoze/1/

Edited July 29, 2014 by ows.nightwolf

[Sergik+]

 

 

 

Не понял почему border-image не работает в лисе

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?

Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

 

http://css-tricks.com/examples/GradientBorder/

на stackowerflow тоже жалуются что лиса не может так.

 

Примеры, которые даны по ссылке у меня не работают в firefox 26, а в хроме работают.

Это видимо какие-то недокументированные команды. Я думаю лучше использовать только то, что

есть в спецификации http://www.w3.org/

 

На коммерческом проекте я не стал бы применять такие фичи, а здесь просто экспериментами занимался.

Посмотрите у меня нету не хедера не футера и не одного клерфикса, сейчас вот смотрю и думаю еще

мог кое что облегчить сильно.

[Sergik+]

Посоветуйте какой следующий макет сверстать из ветки "макеты для верстки", желательно чтобы скилл рос.