понедельник, 17 мая 2010
17:14

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

все записи пользователя в сообществе Walterka
С появлением CSS 3 появилась отличная возможность создавать скругленные края для абсолютно любых элементов.
Это значительно проще и удобнее, чем рисовать скругленные края в фотошопе и тратить время на подгонку фоновых изображений друг к другу. Кроме того, такая возможность позволит реализовать скругленные края в динамическом дизайне. Делается это при помощи кода border-radius с вариациями для браузеров:
-webkit-border-radius - для сафари и гугл хрома, -moz-border-radius: 20px - для файерфокса, -o-border-radius - для оперы, border-radius - для прочих браузеров (работает не всегда).
Код выглядит следующим образом:
#element {-webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
Чем выше радиус закругления - тем более круглыми будут края, соответственно.
Также можно задавать разный радиус разным краям.

Для хрома/сафари:
-webkit-border-radius - закругляет все углы элемента.
-webkit-border-top-left-radius - закругляет верхний левый угол.
-webkit-border-top-right-radius - закругляет верхний правый угол.
-webkit-border-bottom-left-radius - закругляет нижний левый угол.
-webkit-border-bottom-right-radius - закругляет нижний правый угол.

Для мозиллы:
-moz-border-radius – закругляет все углы элемента.
-moz-border-radius-topleft - закругляет верхний левый угол.
-moz-border-radius-topright - закругляет верхний правый угол.
-moz-border-radius-bottomleft - закругляет нижний левый угол.
-moz-border-radius-bottomright - закругляет нижний правый угол.

Недостатки: не поддерживается старыми версиями браузеров.
И, разумеется, не поддерживается ИЕ до шестой версии точно.
Седьмую и выше лично я не проверял.
Тем не менее, с учетом того, что ИЭ также лютобешено ненавидел пнг-шки, и не читал прозрачность, а также постоянно выдавал глюки с позиционированием и отступами, вариант с CSS3 все же проще. В ИЭ просто будут отображаться квадратные углы вместо закругленных, но ничего никуда не уплывет.

Как это выглядит, можно посмотреть здесь: pedobeer.diary.ru/
Правда, отображаются закругления в опере или нет, я еще не проверял. Знаю точно, что работает в мозилле и сафари.

@темы: рамки и полоски, основные блоки, Учеба

URL
Комментарии
17.05.2010 в 17:19

Gonty
В Опере не отображаются. У меня версия 9.64.
URL
17.05.2010 в 17:25

Pedobeer
Чтоб я тя больше у нас на районе не видел!
Gonty, а теперь?
До этого у меня не было в коде -o-border-radius.
URL
17.05.2010 в 17:28

Gonty
Pedobeer
Нет и теперь нет. (
URL
17.05.2010 в 17:39

Chester
No touchy. Don't know. Don't care
Там косяки есть, но скругленные края отображаются.
Тц
URL
17.05.2010 в 17:42

Gonty
Мой скрин
URL
17.05.2010 в 17:42

Nefer-Ra
R.I.P. your mind
ИЕ7 - углы прямые.
URL
17.05.2010 в 17:43

.Vozduh
я всё знаю
Pedobeer, у меня в Опере 10.52
Отображаются круглые краешки, а вот свечение отсутствует у бордюра.
URL
17.05.2010 в 17:49

.Vozduh
я всё знаю
В ИЕ все прелести цсс3 обещают только в 9-ке, так что... :glass:
URL
17.05.2010 в 17:50

Aloria
Не сахар
В ИЕ8 не отображается, зато и не тормозит.
В ФФ 3.6.3 отображается, но тормозит так, что я поостереглась бы пока использовать эту фичу.
В Opera 10.53 отображается, но нижняя граница сдвинута вверх.

Резюме: CSS3 - штука еще новая, не вошедшая в употребление, поэтому ее использование вряд ли можно считать хорошим тоном. Надо дождаться, когда все браузеры выпустят поддерживающие ее обновления, а потом, традиционно, корячиться с оформлением под разные версии разных браузеров. Пока же из распространенных браузеров эту фишку поддерживает только ФайрФокс, но и в нем прокрутка нетяжелой страницы тормозит так, что проще плюнуть и закрыть,ч ем любоваться на скругленные углы.
URL
17.05.2010 в 18:07

.Vozduh
я всё знаю
Aloria, эта «фича» уже полностью поддерживается ФФ, Хромом и Сафари. Последние версии точно. В опере пока только градиент, точно, не поддерживается. И я видела не один сайт, где эти прелести активно используются и никаких тормозов не наблюдается. То что по в указанном дневнике притормаживает, думается мне, не проблемы браузеров.

И по мне «хороший тон» — это обновлять браузеры. :gigi:
URL
17.05.2010 в 18:07

Pedobeer
Чтоб я тя больше у нас на районе не видел!
Gonty, может быть, у вас не обновленная опера?
Chester., ага, вижу. Доделаю в мозилле - разберусь с оперой. Может, дело в бэкграунде или еще в чем-то, фактически вы сейчас наблюдаете крайне сырой диз.
Nefer-Ra, насколько я помню, ИЭ7 не поддерживает CSS 3.
mahini, я не прописывал их пока для оперы. Главное сейчас - доделать, а потом подгонять под другие браузеры).
Aloria, да, ИЭ сильно тормозят именно картинки.
В ФФ 3.6.3 отображается, но тормозит так, что я поостереглась бы пока использовать эту фичу.
О___о А в чем проявляются глюки? У меня ФФ 3.6.3, я на нем дизайн и пишу, ничего не тормозило покамест.
Единственное - у меня скорость инета сейчас крайне низкая. Но все, что не картинки, грузится нормально, и вроде бы не глючит.
В Opera 10.53 отображается, но нижняя граница сдвинута вверх.
С этим надо разбираться). Может, общий код к параграфу кривой вышел).

Кстати:
В Opera 10.53 отображается, но нижняя граница сдвинута вверх.
Если вы имеете в виду вот это: radikal.ru/F/s49.radikal.ru/i123/1005/81/d4f22c... - то это не баг с границей, а некорректное отображение свечения/тени, я ее для оперы еще не настраивал.
URL
17.05.2010 в 18:14

Aloria
Не сахар
mahini, я написала "распространенные браузеры", к коим пока не относятся ни Хром, ни Сафари. Ферштейн? Вы можете меня сколько угодно переубеждать, но факт остается фактом - Хромом пользуются около 7% пользователей, Сафари - меньше 1%.
И по мне «хороший тон» — это обновлять браузеры.
Вы видите где-то среди указанных мной старые версии браузеров? Разве я полезла проверять, как отображается в ИЕ6 или ФФ2?

Pedobeer, в ИЕ как раз не тормозило. В ФФ тормозит прокрутка, очень сильно.
Да, для Оперы имела в виду это. Ок.
URL
17.05.2010 в 18:25

Pedobeer
Чтоб я тя больше у нас на районе не видел!
Aloria, в общем, мне надо будет посмотреть, что именно тормозит. Возможно, та же тень такой эффект оказывает. Х__х
URL
17.05.2010 в 18:27

Aloria
Не сахар
Pedobeer, кстати, да, вполне вероятно.
Я помню, что такой же эффект был в ИЕ7, если ставили на фон .png с полупрозрачностью - отображалось-то корректно, но прокрутка тормозила. От ФФ я такого, в общем-то, не ожидала.
Впрочем, думаю, ближайшее же обновление это исправит.
URL
17.05.2010 в 18:30

bokonist
fail better
css3generator.com - быстро и удобно генерирует css3-код со всеми вендорными префиксами.

border-radius поддерживают:
* Firafox 3.0+ с префиксом -moz
* Safari 3+ и Chrome с префиксом -webkit
* Opera 10.5+
* поддержку в IE обещают с 9 версии (2011)
URL
17.05.2010 в 18:40

.Vozduh
я всё знаю
Aloria, да ладно вам. Сафари просто хорош, а Хром и хорош и набирает обороты не по дням а по часам. А ИЕ считать браузером я отказываюсь пока он не заговорить «по-человечески». К тому же мы тут не на мировую аудиторию коды пишем, а для собственного удовольствия.
И вот мы и выяснили, что все нормальные браузеры поддерживают цсс3. А про тормоза я уже говорила.
URL
17.05.2010 в 18:41

Pedobeer
Чтоб я тя больше у нас на районе не видел!
Aloria, посмотрите, сейчас не тормозит? Я убрал градиентный фон с записей. Заметил, что прокрутка действительно глючила до этого. Сейчас, вроде бы, тормозить стало, во всяком случае, меньше.
bokonist, спасибо).
URL
17.05.2010 в 18:41

StarAnastasy
Опера 10.53, скруглённые углы есть, но ой как косят другие элементы!)) знатно неподогнан, да)) по личным наблюдениям, если подгонишь под оперу - в любом другом отображается пусть не всё, зато более-менее корректно и читабельно. впрочем, я не рою глубоко, опыт не слишком велик, так что могу ошибаться))
Но вот тень - она да, сильно тормозит страницу, особенно когда её много. У одного из моих избранных в дневнике вообще весь текст отбрасывает тень. Выглядит здорово, но даже на довольно современном компьютере подтормаживает прокрутка, а уж если откроешь на машине постарше - так и вовсе зависнуть на полминуты может. Осторожно с ней надо, да.
Ну и градиенты в опере пока не сделали, да. По крайней мере, не встречались. Равно как и курсоры... Ну да дело времени, наверное
URL
17.05.2010 в 18:43

Aloria
Не сахар
Pedobeer, чуть-чуть подтормаживает, но уже терпимо).
URL
17.05.2010 в 19:25

Pedobeer
Чтоб я тя больше у нас на районе не видел!
кошечка мяу, а что еще косит?
То, что ник и название блога наезжают на меню - я знаю, я их просто еще никуда не перемещал, мне лень было). Ссылки после постов я тоже не редактировал, картинку на фон и эпиграф не ставил, низ дневника не оформлял).
Aloria, отлично. будем думать, что делать дальше).
URL
17.05.2010 в 20:42

Gonty
Pedobeer
может быть, у вас не обновленная опера?
Сейчас ничего насчет этого сказать не могу, потому как та Опера у меня на работе, но на 100% уверена - да, не обновленна.

mahini
И по мне «хороший тон» — это обновлять браузеры.
:lol: И Вы каждому посетителю своего дневника будете говорить: "Эй, чел, у тебя старая версия! Ко мне в таком не ходят!" Право, это смешно.

Специально просмотрела статистику бразеров. Explorer 7 на третьем месте по использования. А как написал Nefer-Ra, ИЕ7 - углы прямые. Ну, а выводы сделает каждый сам: использовать border-radius или графику.
URL
17.05.2010 в 22:03

winterwolf
Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём
ыыы, а я как раз недавно статью про цсс 3 уровня писал. Самое интересное, ие 9 требует как минимум Висты, но они конечно там шикарно сделали цсс3, хтмл5, а с цсс 2.1 походу опять накосячили... Кстати очень многие свойства били частично, а некоторые и полностью реализованы в цсс 2.1, но перешли в цсс3.
Закругленные углы даже в ff 2 (lolifox) работают.
Мне вот больше шрифты понравились, но увы на дневниках нельзя указывать ссылки, ( лишь относительный путь изображения), а шрифт никуда не подгрузишь на дневник, и мелкомягий (microsoft) как всегда свой формат шрифтов гнет.
Вообщем пока что это все сомнительно и частично реализовано, но для тех, кто не особо беспокоиться о браузерах, может спокойно использовать и играться с новыми свойствами.
URL
18.05.2010 в 00:07

Pedobeer
Чтоб я тя больше у нас на районе не видел!
То что по в указанном дневнике притормаживает, думается мне, не проблемы браузеров.
Полагаю, мне нужно поработать над оптимизацией кода. Просто скругление краев, без другого кода, вообще никакого торможения не дает. Опять-таки, возможно, проблема еще в том, что я применил это к параграфу, а не, скажем, к посту в целом. Сам код для параграфа у меня достаточно объемный, плюс, еще одна фича ксс3 - свечение.
И Вы каждому посетителю своего дневника будете говорить: "Эй, чел, у тебя старая версия! Ко мне в таком не ходят!" Право, это смешно.

Специально просмотрела статистику бразеров. Explorer 7 на третьем месте по использования. А как написал Nefer-Ra, ИЕ7 - углы прямые. Ну, а выводы сделает каждый сам: использовать border-radius или графику.
С одной стороны, да, хорошо, когда везде дизайн отображается красиво. С другой - большое количество мелких картинок серьезно тормозит процесс. КСС 3 дает возможность существенно облегчить коды и вес страницы. Многие не заморачиваются над тем, какой браузер используют, так же как не заморачиваются над безопасностью браузера, его работой и проч. Лично я не считаю, что нужно отказываться от этих возможностей. Тем более, что в заглавном посте я сразу оговорил, что фича еще не обкатанная, я просто сказал, что она появилась и работает на дневниках. К тому же, обновления большинства распространенных браузеров, кроме ИЭ, выходят довольно часто. А их выпускают именно для того, чтобы устранить баги предыдущих и соответствовать стандартам, так сказать.
Ну, если человек с плохим зрением не хочет носить очки или линзы, разве другие должны из-за этого портить себе зрение, чтобы видеть так же? Или, если у кого-то монитор запачкан и заплеван, это же не значит, что нужно делать ядерные цвета, чтобы ему было видно хорошо, а тем, кто протирает монитор, резало глаза? Утрирую, но да.
К тому же, существуют т.н. "хаки" для разных браузеров. Для ИЭ и устаревших версий дизайнер может как прописать графику, так и упростить дизайн, чтобы он выглядел сносно и читабельно.
Кстати, в ИЭ6, все выглядит сносно, несмотря на квадратные углы, а вот пнгшные иконки меню он режет нещадно.

Мне вот больше шрифты понравились, но увы на дневниках нельзя указывать ссылки, ( лишь относительный путь изображения), а шрифт никуда не подгрузишь на дневник, и мелкомягий (microsoft) как всегда свой формат шрифтов гнет.
Можно же указывать на изображения в БИ. Вы имеете в виду тень под шрифтом в виде изображения (типа, "горящий", "ледяной" шрифт и проч.)?
Границы теперь, кстати, тоже можно прописывать картинками. Всякие вилюшки, цветуечки, колючие проволоки и все, что вздумается.
URL
18.05.2010 в 00:36

winterwolf
Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём
Хаки не советую использовать - это дурной тон. А про шрифты - www.htmlbook.ru/css/@font-face.html и опять же браузеры не живут дружно (про ие с форматом oet). Как им нравиться плодить стандарты.
URL
18.05.2010 в 00:53

Pedobeer
Чтоб я тя больше у нас на районе не видел!
winterwolf, а, это. Видел. Но, увы, если этот шрифт не стоит на компе у пользователя, он и не увидит всей красоты, насколько я понимаю?
И, да, это не тот пример, что с браузерами. Ибо браузеров гораздо меньше, чем шрифтов)
Хаки не советую использовать - это дурной тон.
Я вот лично не могу понять, как в данном случае можно определить "дурной" тон или нет?)
Ну, скажем, стоял у меня одно время дизайн с пнгшной полупрозрачностью и пнгшными иконками. ИЭ ниже седьмой версии их нещадно резал, да еще и частично коверкал таблицу. Тогда я только начинал интересоваться дизайнами, и много чего не знал. Потом только догадался, что вместо пнгшек можно использовать жпег, в фш нарисованный как прозрачный (иконка накладывается на цвет фона).
Тогда я с помощью кода *html убрал пнгшки из ИЭ, чтобы дизайн в этом браузере был хотя бы читабельным. Тут уж дурным тоном было оставлять белые полоски на фоне и прочую дребедень, которую показывал ИЭ.
Иногда, чтобы устранить баги в ИЭ, до сих пор пользуюсь этим кодом.
URL
18.05.2010 в 01:07

Pedobeer
Чтоб я тя больше у нас на районе не видел!
Только что проверил без свечения. Со скругленными краями без свечения блоков прокрутка, кажется, не тормозит вообще.
URL
18.05.2010 в 01:36

winterwolf
Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём
«winterwolf, а, это. Видел. Но, увы, если этот шрифт не стоит на компе у пользователя, он и не увидит всей красоты, насколько я понимаю? »
эта вещь из CSS позволяет разработчику задавать на сайте тот шрифт, который ему нужен(пользовательский браузер должен загрузить указанный шрифт)

Это тоже самое, что и goto. Т.е. есть другие пути это обойти. Прекрасно знаю, что кроссбраузерности порой сложно добиться, я даже видел реальные баги, даже баги с инструментом разрабочиков (ие8), когда один и тот же код показывал разные эффекты. Кстати ИЕ6 похоронили. Вот тебе пример - riateche.diary.ru/ - зайди под ие6 и ие7 или посмотри исходный код.

вот еще интересный эффект (видно только в лисице)




some text


А также приме скругления углов


URL
18.05.2010 в 01:39

winterwolf
Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём
«Только что проверил без свечения. Со скругленными краями без свечения блоков прокрутка, кажется, не тормозит вообще.»
Это и логично 10 тысяч *ширину тени пикселей не рисуется браузером ^_^
URL
18.05.2010 в 07:06

StarAnastasy
Pedobeer
чем рассказывать, лучше покажу. это я из полноэкранного режима сделала скриншот, чтобы показать, как всё странно придвинуто к левому краю. Не знаю, может, так и задумано (смотреть в других броузерах лениво), но мне не понравилось
надеюсь, эта информация как-то поможет с дальнейшей доработкой))
URL
18.05.2010 в 07:16

Pedobeer
Чтоб я тя больше у нас на районе не видел!
эта вещь из CSS позволяет разработчику задавать на сайте тот шрифт, который ему нужен(пользовательский браузер должен загрузить указанный шрифт)
А... Вот оно че, Михалыч, вото оно че))).


Кстати ИЕ6 похоронили. Вот тебе пример - riateche.diary.ru/ - зайди под ие6 и ие7 или посмотри исходный код.
Кстати, на этом дневнике другой пример реализации скругленных краев при динамическом дизайне. Но это тоже графика, просто человек сумел ее правильно подогнать так, чтобы все это отображалось корректно).
Смотрится даже в ИЕ6 неплохо, несмотря на отсутствие скругленных краев.

Исходный код - это, что ли, прописанный на дайрях, чтобы помочь пользователям добиться кроссбраузерности?

Это и логично 10 тысяч *ширину тени пикселей не рисуется браузером ^_^
Десять тысяч? О__о Я такого не прописывал нигде).
URL