Jump to content

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


Sergik+
 Share

Recommended Posts

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

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

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

http://sergik.esy.es/

 

Link to comment
Share on other sites

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

 

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

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

Link to comment
Share on other sites

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

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

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

 

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

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

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

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

Edited by Sergik+
Link to comment
Share on other sites

Текст могу хоть как выровнять
Вы да, но не забывайте про пользователей. Они не знают всех ваших css. Я про то, чтобы не получилось так, что если юзер захотел сделать по правому краю, а у вас там стоит по ширине, и пользователь в замешательстве, хотя это мелочи конечно.
  • Like 1
Link to comment
Share on other sites

 

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

 

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

Link to comment
Share on other sites

Не понял почему 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}

Link to comment
Share on other sites

 

Не понял почему 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 by Sergik+
Link to comment
Share on other sites

 

 

Не понял почему 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 by andrew312
  • Like 1
Link to comment
Share on other sites

 

Не понял почему 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 by ows.nightwolf
  • Like 1
Link to comment
Share on other sites

 

 

 

Не понял почему 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/ :)

 

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy