Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики. Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье: Закругление углов без использования ...
На сайте CSStemplater.com, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера: Появилась возможность задавать произвольные параметры у прежних опций, это: ширина макета; минимальная ширина макета; ширина ...
Сегодня двумя веб-разработчиками в лице меня и PHP-мастера Антона a.k.a. molodoy официально дан старт онлайн-сервису под названием «CSS Layout Generator» — генератор шаблонов HTML + CSS. Собственно, из названия сервиса становится ясно, что ...
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику. И я с удивлением обнаружил, что ...
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек. 1) Читайте блоги специалистов в данной сфере. Хотя уже и не так ...
Комментарии (72)
Скажите, пожалуйста, что в нем не так? Смотрел, но, может быть, что-то не заметил.
Ребята, данное решение — не панацея! Я сам не готов использовать его везде, где потребовалось бы закруглять углы. Это только один из возможных вариантов закругления и использовать его уместно только в некоторых случаях.
На своем же примере скажу — если я описал данный способ, это не значит, что я всегда тупо использую только его :). С закруглениями сталкиваюсь часто, но применял способ всего лишь раз.
Спасибо всем за комментарии!
у меня стоит цвет окна в настройках оформления виндоус не белый, поэтому первый и третий вариант сглаживания создают белые прямоугольнички и пиксели в углах -__-
А название «Nifty Corners Cube вам ни о чем не говорит? :) Зачем изобретать велосипед? Тем более, что использование JS в данной ситуации уместнее — верстка не замусоривается и остается семантической.
Ой-ей-ей, зачем же такая каша в коде-то? Да и, если честно, меня терзают смутные сомнения на счет того, что маленькая картинка уголков будет весить чуть ли не меньше, чем приведенный код. Ну и плюс к тому описывать все переходные цвета пикселей, а не только основной цвет рамки — как-то оно не очень радует.
А я использую вот такой способ.
Могут использоваться любые бакграунды и любой цвец рамки-фона, люббой браузер, плюс любое содержимое.
Я надеюсь, все это проделывается исключительно ради спортивного интереса?
Насколько я помню, css появились для отделения дизайна от контента и для ОПТИМИЗАЦИИ кода.
И, кстати, запись «border-width: 0 1px;» в CSS 2 недопустима, вам даже ваш редактор это подсветил.
Я уже высказывал свою позицию и в самом посте, и в комментариях, поэтому нет смысла повторяться.
Редактор абсолютно идентично подсветил и «margin: 0 1px;», но это же не значит, что такая запись неправильная.
Можете дать ссылку на источник, где говорится, что запись «border-width: 0 1px;» недопустима? Если это действительно так, то буду исправляться. Однако эта запись валидацию проходит, поэтому у меня пока сомнения на счет недопустимости.
метод конечно интересный, но 4 уголка в *.gif даже по весу меньше чем данный код ;)
Привет!
Спасибо за уголки! Зззззумительно!
А нет ли чего подобного со шрифтами? КлирТайп хорошо, но хотелось бы еще качественее — как уголки например.
Заранее спасибо
(ответ лучше на @)
E.
Если бы с графикой было бы все так просто :)
Нарисовать, вырезать, дать border при случае, блоков с сразными цветами поболее, пустить градиент (вдруг понадабиться), то размеры всех графических элементов будут по любому весить прилично.
Предложенный метод не панацея и это надо понимать.
Но иногда проще сделать именно так, а не иначе :)
Скорее всего нет.
Чесслово это уже извращенство такой код втыкать на уголки…, надо ли это? Надо, если только для общего развития…
P. S. : Без картинок сейчас полюбому ущербно как-то, хоть и сам стремлюсь к минимуму изображений…
Давайте вспомним основные принципы SEO и сайтостроения преждем чем будем городить подобного рода красоту…, да и кому она особо нужна? Те кто делает уголки круглые — делают круглыми их везде, а везде нереально будет втыкнуть это с помощью CSS, следовательно если пользователь зайдет и увидит что половина уголков (если картинки отключены) квадратные, а половина круглые (сделанные CSS) приятней его глазу не станет…
Я опять со шрифтами…
А если поставить как задачу? Ведь чего только CSS не вытворяет со шрифтами, а сглаживание получается слобо? Не так уже там (в шрифтах) и мест то много что «гладить» нужно! Зато слава будет великая!!! Вcе sIFR-ы и фльтры Виндовские просто сдохнут от зависти…
Евгений, в CSS3 есть свойство для сглаживания текста. Но Бог его знает, когда этот стандарт начнут использовать во всех популярных браузерах.
— в CSS3 есть свойство для сглаживания текста —
Ух ты!!! … а нельзя ли ссылочку, где эти свойства можно посмотреть?
Заранее спасибо
Е
Пример можно посмотреть здесь — www.css3.info/preview/text-shadow/. Поддерживает пока, насколько мне известно, только Opera 9.5.
Кстати, выше я ошибся. Это свойство введено еще в стандарте CSS2. Но до сих пор не поддерживалось популярными браузерами.
Про эти тени я знаю…
Но спасибо в любом случае. Если что на эту тему увидите-услышите-сотворите… бросьте ссылку при случае.
Спасибо!
Е.
Конечно, сглаживание, скорее всего избыточно.
Взял из примера вариант «Простое закругление углов с помощью CSS»
css — 373 байта (примерно)
html для четырех углов — 224 байта (примерно)
to Das (13 ноября 2007 г. в 14:22)
Что Вы там про траффик говорили? Доля этого кода в коде страницы просто ничтожна, а вот на коннектах к серверу экономим. И к тому же, для изменения цвета рамки не нужно перерисовывать картинки.
Жесть, зачем плодить столько не нужного кода, когда лучше вставить 4 блока с фоновыми изображениями и спозиционировать их. По крайне мере кода в 3 раза меньше будет по количеству символов. Хотя при масштабирование прекрасно работает.
Заметил баг, у меня FF v2 при размере шрифта по умолчанию, слева на закруглениях вверху и внизу есть чёрные точки, появились они там благодаря q и /q, зачем вы их вставили в код?
Проверил в FF2, у меня нет таких черных точек. q — один из элементов для сглаживания.