CSS закругленные углы и градиентная граница

Question

Я нахожусь в процессе нарезки PSD макета от дизайнера. Дизайн основан на сетке 960 и состоит из нескольких блоков (960 пикселей для верхнего меню, 2 460 пикселей для 2 областей содержимого, 220 пикселей и 720 пикселей для другой настройки содержимого и т. Д.). Все эти поля основаны на сплошном цвете фона (тело), ​​но все они имеют закругленные углы и границу приблизительно 10 пикселей вокруг, которые являются градиентными.

Я обдумываю, какой из них лучше всего выбрать, html, учитывая, что он должен быть проверен, хорошая семантика и т. Д.

Любые идеи / вход?

Answer 1

Я обдумываю, какой из них лучше всего выбрать, html, учитывая, что он должен быть проверен, хорошая семантика и т. Д.

Лучшим маршрутом здесь будет использование чистого CSS3 для добавления закругленных углов и градиентов.

Преимущества:

• Никакой дополнительной, семантически бессмысленной, дерьмовой разметки не требуется
• Изображения не требуются
• Простота внедрения и обслуживания
• Возможность изящного ухудшения качества для старых браузеров, которые не поддерживают CSS3

Даунсайд S

• Пока не работает в каждом браузере

Это действительно ваше дело.

Если вы хотите, чтобы ваш сайт выглядел одинаково в каждом браузере , CSS3 не подходит - вам придется полагаться на трудно поддерживаемые изображения и раздутую разметку.

Однако, если вы не против предоставить пользователям старых браузеров немного другой, но все же приятный дизайн, CSS3 определенно является подходящим вариантом.

---

‘CSS3’ градиенты:

• http://webkit.org/blog/175/introducing-css-gradients/
• https://developer.mozilla.org/en/CSS/-moz-linear-gradient
• https://developer.mozilla.org/en/CSS/-moz-radial-gradient

CSS3 закругленные углы:

• http://www.css3.info/preview/rounded-border/

Answer 2

Это не будет работать безупречно во всех веб-браузерах от IE6 и до только CSS. Вам нужно будет захватить JavaScript, чтобы он работал во всех браузерах. Существуют плагины jQuery , которые могут округлять углы на лету, работая на всех веб-браузерах, без каких-либо дополнительных изображений или CSS. У меня был хороший опыт использования этого jQuery Corner плагина .

Answer 3

Я рекомендую попробовать библиотеку javascript DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/).). Большинство браузеров уже поддерживают закругленные углы, как указано в CSS3, и DD_roundies добавляет поддержку также для браузеров, которые не поддерживают (например, IE).