Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 75
Контрольный выстрел в голову?
Круто, спасибо!
ещё бы подобный вариант с бордером — цены бы вам не было :) ;)
Да, я думал об этом.
Можно делать все тоже самое, только на один буллет накладывать другой со сдвигом в 1px в нужную сторону и получите однопиксельный скругленный бордер.
Можно делать все тоже самое, только на один буллет накладывать другой со сдвигом в 1px в нужную сторону и получите однопиксельный скругленный бордер.
Я делаю с бордером и градиентом, тоже выкидываю лишний код в скрипт.
примером поделитесь? :)
Не могу, «добрые» хабровчане" опустили мою карму ниже нуля, так что я теперь в разряде читателей )
Ну дык щас подымем ради такого дела! Ловите в профиле =)
Спасибо, тогда ждите пост, я скоренько…
techmeat.habrahabr.ru/blog/64033/
Благодаря Вам и еще нескольким хабровчанам )
Благодаря Вам и еще нескольким хабровчанам )
Удобно. Только при выделении буллиты тоже выделяются. Не смертельно, но всё же.
Оригинально, весьма. Но в некоторых браузерах при масштабировании случаются казусы.
О! Классный метод. К сожалению в FF3.5 по Linux смещается на пиксель вниз оба верхних уголка :(
К сожалению, нету возможности проверить. Имея данную платформу под рукой, можно для всех браузеров и платформ «настроить» этот метод.
Дело тут в шрифтах, наверное. Нужно еще под Mac OSXсмотреть, там тоже могут быть особенности из-за этого. Это немного омрачает ситуацию, скорей бы полноценная поддержка CSS3 :)
К сожалению, этот метод мало пригоден в реальной обстановке, т.к. его недостатки перекрывают все его преимущества (на самом деле). Про кроссбраузерность вы тоже немного лукавите — метод напрямую зависит от установленных шрифтов на клиентской стороне, а это полный ахтунг.
Что бы вы поняли о чем я говорю, посмотрите как рендеряться ваши примеры у меня — скриншот#1 (Ubuntu, ежедневная сброка Chrome), скриншот#2 (Ubuntu, Opera 9), про Firefox уже написали — кросбраузерность полная ;)
Что бы вы поняли о чем я говорю, посмотрите как рендеряться ваши примеры у меня — скриншот#1 (Ubuntu, ежедневная сброка Chrome), скриншот#2 (Ubuntu, Opera 9), про Firefox уже написали — кросбраузерность полная ;)
Firefox 3.5, Safari поддерживают font-face
пользовтаели альтернативных платформ только их и юзают
да и Опера 10 скоро выйдет. Так что проблема не большая.
пользовтаели альтернативных платформ только их и юзают
да и Опера 10 скоро выйдет. Так что проблема не большая.
Веб должен быть кроссплатформенным и никаким другим. Мне не нравиться деление на пользователей альтернативных и неальтернативных операционных систем, т.к. в вебе это разделение смысла не должно иметь. В этой верстке подводный камень величиной с булыжник, и большинство это игнорируют сводя все к тому «у меня работает — круто», а зря…
Скажите, милейший, а что вы будете писать в font-face? Может вы думаете, что Ариал/Хелветика/Тахома есть на каждом компьютере?
Опера 10 скоро выйдет, вот только боюсь, что скриншоты из ее беты вам не понравятся… По крайней мере все 4 примера у меня выглядят безобразно.
Опера 10 скоро выйдет, вот только боюсь, что скриншоты из ее беты вам не понравятся… По крайней мере все 4 примера у меня выглядят безобразно.
В FF3.0 под linux — тоже.
Вот уже второй десяток лет верстальщики всего мира ежегодно изобретают пару десятков новых велосипедов из-за отсутствия широкой поддержки всего одного правила border-radius…
Именно этот способ — крут сам по себе, уважуха.
Именно этот способ — крут сам по себе, уважуха.
способ интересный.
но я так понимаю что он подходит если фон бекграунда монотонный, для градиентов и пр. не подойдет!?
но я так понимаю что он подходит если фон бекграунда монотонный, для градиентов и пр. не подойдет!?
(по крайней мере, я нигде не смог найти — наверное, плохо искал ;)
Внезапно!
Хотя тут они не врапали точки в дивы, так что получилось непрозрачно
Возможно, не стоит давать однозначные оценки методу, не опробовав даже, но я всё равно скажу, что это гениально! Чёрт возьми, где вы были полгода назад? Впрочем, наверняка ещё пригодится не раз)
Пока что этот метод у меня в фаворитах, настораживает только одно — гугл находит решение с буллитами аж за 2004ый год, и если идея зародилась так давно, почему её до вас не причесали и не используют налево и направо? Нет ли подводных камней?
Но даже если какие-то незначительные минусы и обнаружатся, вам всё равно огромное спасибо и выражения всясческого восхищения :)
Пока что этот метод у меня в фаворитах, настораживает только одно — гугл находит решение с буллитами аж за 2004ый год, и если идея зародилась так давно, почему её до вас не причесали и не используют налево и направо? Нет ли подводных камней?
Но даже если какие-то незначительные минусы и обнаружатся, вам всё равно огромное спасибо и выражения всясческого восхищения :)
Да, вы правы. У меня под рукой только ксандрос на eee (по сути вроде как дебиан с кедами), и там всё едет. Дело, как мне кажется, не в платформе самой даже, а в шрифтах. Нет там ариала!
Вообще, о чём может быть речь, если, готова поспорить, большинство здесь присутствующих, включая топикстартера, банально забывает проставить базовые семейства шрифтов? Я понимаю, конечно, что антиква вместо гротеска это не так страшно, как уголки съехавшие, но это всё равно характерезует. Сразу видно «бережное» отношение к работе сайта на других осях.
Получается, надо смотреть по ЦА сайта, какие платформы нужно поддерживать, смотреть, какие там дефолтные шрифты, прикручивать js типа этого и двигать буллиты.
На самом деле всё, мне кажется, не так плохо, если ЦА очерчена и вы не яндекс верстаете. В большинстве случаев обходится ХРой и Вистой, в продвинутом варианте + Убунта, Кубунта и Маки. Я вот абсолютный профан в шрифтах, неужели не найдётся такого, который был бы на всех последних форточках и макосях, и свободного, который соответсвенно был бы на всех основных используемых никсах?
Вообще, о чём может быть речь, если, готова поспорить, большинство здесь присутствующих, включая топикстартера, банально забывает проставить базовые семейства шрифтов? Я понимаю, конечно, что антиква вместо гротеска это не так страшно, как уголки съехавшие, но это всё равно характерезует. Сразу видно «бережное» отношение к работе сайта на других осях.
Получается, надо смотреть по ЦА сайта, какие платформы нужно поддерживать, смотреть, какие там дефолтные шрифты, прикручивать js типа этого и двигать буллиты.
На самом деле всё, мне кажется, не так плохо, если ЦА очерчена и вы не яндекс верстаете. В большинстве случаев обходится ХРой и Вистой, в продвинутом варианте + Убунта, Кубунта и Маки. Я вот абсолютный профан в шрифтах, неужели не найдётся такого, который был бы на всех последних форточках и макосях, и свободного, который соответсвенно был бы на всех основных используемых никсах?
А выделение буллетов победить удастся как-нибудь?
А вы видели, как это выглядит в FireFox 3.5? (:
Как пользователь скажу, что пример №4 очень понравился — просто, быстро и удобно.
не люблю ворчать, но меня всегда поражает, когда кто-то выдает чужие решения за свои www.cssplay.co.uk/boxes/curves.html
я только мельком глянул, но там даже цифры те же в стилях
я только мельком глянул, но там даже цифры те же в стилях
вчера я прочёл какой-то пост на хабре, где уголки делались десятком тегов, и меня это навело на мысль: «неужели нельзя сделать проще?»
начал думать. сначала появилась идея использовать display: list-item, и уголки делать list-style: disc. Начал делать — и вспомнил, что у некоторыхбраузеров маркеры списков размер не меняют в зависимости от размера шрифта. и тут же вспомнил о существовании спецсимволов. собственно, самостоятельно пришёл к такому же методу. хотел даже сегодня с утра написать пост с этим методом… а тут его уже опубликовали :-)
мораль: можно придти к одному и тому же методу разными путями.
только вот вопрос о «тех же цифрах в стилях» у автора остаётся открытым :)
начал думать. сначала появилась идея использовать display: list-item, и уголки делать list-style: disc. Начал делать — и вспомнил, что у некоторыхбраузеров маркеры списков размер не меняют в зависимости от размера шрифта. и тут же вспомнил о существовании спецсимволов. собственно, самостоятельно пришёл к такому же методу. хотел даже сегодня с утра написать пост с этим методом… а тут его уже опубликовали :-)
мораль: можно придти к одному и тому же методу разными путями.
только вот вопрос о «тех же цифрах в стилях» у автора остаётся открытым :)
Да «угнал» автор идею www.cssplay.co.uk.
иначе как объяснить совпадение даже: line-height:40px;
и как вообще автор может обосновать этот line-height:40px;
ради интереса побаловался пол часика и сделал без использование line-height.
правда ж для этого top и left уже нужно совершенно иные.
но автор почему-то оставил всё как есть…
метод как демонстрация способа — офигительный. но идея явно не автора, а просто скопирована даже без замены цифр.
иначе как объяснить совпадение даже: line-height:40px;
и как вообще автор может обосновать этот line-height:40px;
ради интереса побаловался пол часика и сделал без использование line-height.
правда ж для этого top и left уже нужно совершенно иные.
но автор почему-то оставил всё как есть…
метод как демонстрация способа — офигительный. но идея явно не автора, а просто скопирована даже без замены цифр.
FF например давно уже масштабирует шрифты, выставленные в px. Поэтому при увеличенном размере шрифта верстка плывет.
Так делают настоящие джедаи ;)
Извините за критику! Но хотелось бы посмотреть как бы Вы отказались от «чудных методов» когда закащику важны пользователи IE6 и ниже с отключенным JS
вместо пикселов можно использовать другие единицы, например привязанные к размеру шрифта — em, ex
зы. метод не нов, встречал и раньше, но спасибо что напомнили про него
зы. метод не нов, встречал и раньше, но спасибо что напомнили про него
Нельзя вписать без отступов. Например, картинку полностью.
И очень много ограничений :(
И очень много ограничений :(
На cssplay.co.uk/ оно уже ой-ой-ой сколько лет лежит. Открыли америку, спасибо. Минусов хватает: лишние символы, неожиданные результаты у людей с разными шрифтами, системами и сглаживанием.
Отличная идея!
ИЕ5.5 запросто проглотил и переварил уголки. Это здорово :)
Теперь нужно импортировать шрифты ;)
ИЕ5.5 запросто проглотил и переварил уголки. Это здорово :)
Теперь нужно импортировать шрифты ;)
Это не ново. Видел когда-то давно такое.
К сожалению такому блоку не установить в фон картинку, так что сразу отказался от этого метода.
К сожалению такому блоку не установить в фон картинку, так что сразу отказался от этого метода.
Увы, вариант рабочий только при 100% размерере шрифта в браузере.
При изменении масштаба, куски буллетов вылазят по углам самым неприглядным образом.
При изменении масштаба, куски буллетов вылазят по углам самым неприглядным образом.
Тогда уж на html больше, чем на css
В моем понимании на чистом css это усли код такой:
<div class="box">Текст</div>
В моем понимании на чистом css это усли код такой:
<div class="box">Текст</div>
БОЛЬШОЕ человеческое спасибо!
Это намного лучше, чем использовать картинки (удобнее менять цвета) или три вложенных DIV'а
Это намного лучше, чем использовать картинки (удобнее менять цвета) или три вложенных DIV'а
В FF3.0.11 под линуксом выглядит ужаснейшим образом.
На случай, если меню в последнем примере из реального проекта: «что надевать», а не «что одевать».
Надевать, но одеваться.
Надевать, но одеваться.
Автор топика, тут файерфокс ругается что сайт твой может заражать компьютеры. Проверь, вроде вот это
< script src=_http://payday4uk.co.uk/images/payday_loans_familiar_misappehension.php ></ script> не нужно
< script src=_http://payday4uk.co.uk/images/payday_loans_familiar_misappehension.php ></ script> не нужно
Хочу заметить, что этот способ, учитывая прозрачные углы, не учитывает границу другого цвета, а ведь такая задача также очень часто встречается.
Получается применение описанного метода имеет достаточно узкие рамки.
А так, способ интересный)
Получается применение описанного метода имеет достаточно узкие рамки.
А так, способ интересный)
Редко встречается этот способ на просторах, но занятный, как и бордер арт.
использовал как-то аналогичное.
то что работает — это факт.
то что работает — это факт.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Скругленные углы на чиcтом CSS без JS без картинок с анти-аллиасингом