С появлением 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/
Правда, отображаются закругления в опере или нет, я еще не проверял. Знаю точно, что работает в мозилле и сафари.
Это значительно проще и удобнее, чем рисовать скругленные края в фотошопе и тратить время на подгонку фоновых изображений друг к другу. Кроме того, такая возможность позволит реализовать скругленные края в динамическом дизайне. Делается это при помощи кода 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/
Правда, отображаются закругления в опере или нет, я еще не проверял. Знаю точно, что работает в мозилле и сафари.
-
-
18.05.2010 в 07:24всё странно придвинуто к левому краю
Просто справа должна быть картинка, которую я еще не вставлял).
-
-
18.05.2010 в 07:50Имеется ввиду вся длинна тени (подсветки) - это я навскидку сказал.
-
-
18.05.2010 в 08:35С другой стороны, свечение мне не так, чтобы и необходимо).
Кстати, вчера видел у вас, что комментавтор тоже был в рамке. Никак не могу подогнать, чтобы все аватары (разного размера) были в центре комментавтора. Какой-только маргин и пэддинг ни пробовал, все равно найдутся те, что будут не там, где надо. Не подскажете, как вы это делали?)
-
-
18.05.2010 в 09:25Я только начинаю заниматься изучением "сайтостротельства": html, css и javasсript. Но уже уеснила, что во всех браузерах сайт должен выглядеть одинаково. Это не просто хороший тон, это основа основ. Но дневник, наверное, несколько другое, да? Линчая территория и всякое такое. С ним можно делать, что захочешь. Но говорить, что все должны (Кому должны? Вам? Мне? Государству?) обновлять браузеры несколько странно.
-
-
18.05.2010 в 09:57Я говорю, то что я говорю - ни больше, не меньше.
Но дневник, наверное, несколько другое, да?
Дневник - это действительно несколько иное. Это дневник. И я не вижу ничего ужасного и "дурного" в том, что в необновленных браузерах чья-то личная страница будет выглядеть не так красиво, как должна была бы, но, тем не менее, удобоваримо и читабельно.
Но говорить, что все должны (Кому должны? Вам? Мне? Государству?) обновлять браузеры несколько странно.
Лично я такого _нигде_ не говорил. Я говорил то, что если кто-то не хочет видеть лучше, он, соответственно, и не увидит. Я говорил, что обновленные версии делаются для устранения неполадок и добавления новых функций, и следить за новинками объективно лучше, чем жить в пещере, но всяк выбирает то, что он хочет. Я могу лишь порекомендовать другим обновить браузер, обосновав свою точку зрения, а не говорить, что мне кто-то что-то должен.
Если бы я делал сайт и хотел его раскрутить, а не личную страницу, естественно, я бы уделял больше внимания кроссбраузерности.
Тем не менее, на яндексе, к примеру, человек с устаревшим браузером увидит вверху предложение скачать новую версию его же браузера.
-
-
18.05.2010 в 10:05Недостатки этого способа я указал сразу.
-
-
18.05.2010 в 10:08Я говорил, что обновленные версии делаются для устранения неполадок и добавления новых функций, и следить за новинками объективно лучше, чем жить в пещере, но всяк выбирает то, что он хочет.
Про пещеру Вы опять загнули.
Тем не менее, на яндексе, к примеру, человек с устаревшим браузером увидит вверху предложение скачать новую версию его же браузера.
Специально зашла на Яндекс. Мне он ничего не предлагает, хотя версия Оперы у меня старая.
-
-
18.05.2010 в 10:15Это я шуткую так).
Большиство пользователей не интересуют фишки новых браузеров, им подавай красивый интерфейс. Или привычный.
Увы мне, Иван Васильевич, из-за этого и возникают сложности. Многие пользуются ИЭ только потому, что им не хочется менять что-то "привычное" на иное. Лично знаю людей, которые просто не хотели пользоваться никакими другими браузерами, без конца ловили порноинформеры и вирусы из-за дырок в защите ИЭ. Мыши давились, но продолжали есть кактус. Это их личный выбор. Каждый должен, в первую очередь, не кому-то, а себе, и если хочется кушать кактус, я не буду настаивать на том, чтобы они его не ели, потому что лично я его не ем, и мне все равно. ХD
Против не сильно устаревших браузеров я ничего не имею. Скажем, тот же 7 ИЭ не так отвратен, как предыдущие версии, но, на мой взгляд, он все равно достаточно плох, чтобы я не стал им пользоваться.
Мне вот лично, не нравится Опера 10. Ну, не нравится, как она смотрится. Хотя дома я таки ей пользуюсь.
Я еще не качал, так что не могу ничего сказать относительно новой оперы. Сильно отличается от предыдущих версий?
пециально зашла на Яндекс. Мне он ничего не предлагает, хотя версия Оперы у меня старая.
Наверное, еще зависит оттого, насколько старая. Когда у меня дома стоял GPRS-интернет, я пользовался 6 иэ, ибо слишком дорого было качать что-то новое, потом установил старую мозиллу с диска. И яндекс настойчиво советовал мне скачать новые версии браузеров.
-
-
18.05.2010 в 10:29Это я шуткую так).
Я посмеялась
Скажем, тот же 7 ИЭ не так отвратен, как предыдущие версии, но, на мой взгляд, он все равно достаточно плох, чтобы я не стал им пользоваться.
Про предыдущие версии соглащусь, да и IE7 мне не нравится. Пользуюсь им только, чтобы проверить, как он отображает diary-дизайн и мои странички. Все-таки много народа им пользуется.
Сильно отличается от предыдущих версий?
Хм... Пишут вот что:
В новой версии:
• Теперь вкладки можно расположить не только в верхней и нижней частях экрана, но и по бокам;
• Некоторые улучшения интерфейса в целом и вкладок в частности;
• Улучшена стабильность (благодаря автоматической системе отчета об ошибках).
• Меню проверки орфографии перенесено в Preferences > Advanced > Browsing dialog box;
• Исправлена проблема с открытием PDF-файлов;
• Исправлена проблема с сохранением сессии;
• Исправлена проблема с веб-шрифтами в Windows 98;
• Буфер обмена теперь работает с MS Office и OpenOffice.org;
• Исправления для почтового клиента.
Меня напрягает новый интерфейс.
Наверное, еще зависит оттого, насколько старая.
Надеюсь, иначе это личная антипатия ко мне со строны Яндекса.
-
-
18.05.2010 в 10:35Аналогично. Просто я имел в виду, что "пользуюсь" - значит, пользуюсь сам, в своих личных целях, а не для работы.
вкладки можно расположить не только в верхней и нижней частях экрана, но и по бокам;
Что-то меня тоже не вдохновляют вкладки по бокам. ХD
-
-
18.05.2010 в 10:42Что-то меня тоже не вдохновляют вкладки по бокам. ХD
-
-
18.05.2010 в 11:38Какой дизайн был? просто я делаю параллельно дизайна 3-4.
«были в центре комментавтора» - немного не понял - это как?
-
-
18.05.2010 в 12:50pedobeer.diary.ru/?favorite
Если присмотреться, можно заметить, что кое-какие автары чуть ближе к левому краю рамки. Если подвинуть их, то те, что обладают большей шириной, уплывут.
Когда-то давно я делал это, но теперь не могу вспомнить точного кода с тех пор, как с моего основного дневника полгода назад слетел КСС.
-
-
18.05.2010 в 13:15-
-
18.05.2010 в 15:45Может, я что-то не туда прописываю?
-
-
18.05.2010 в 16:04К вкладкам по бокам сначала тоже отнеслась настороженно, ибо привыкла переключать их внизу, но попробовала поставить их справа в виде эскизов - и уже через день привыкла, и не представляю способа удобнее.
Проверка орфографии, цсс3 и прочие вкусные штуки однозначно приятны. Кроме того, по личным наблюдениям встроенная поддержка всяких динамических штук вроде java, flash и прочего работает гораздо лучше.
Впрочем, высказалась и будет. Да, это мой любимый браузер, что уж тут поделаешь))
Pedobeer
посмотрела по ссылке на расположение аватаров в комментариях, хотела написать, что всё по центру, но потом перечитала снова и после этого действительно обратила внимание на то, что некоторые чуточку ближе к левому краю. Буквально на пару пикселей. Это я к чему - незаметна такая мелочь, если носом в это не тыкнуть. Можно и опустить))
-
-
18.05.2010 в 16:17Блин, я начинаю ощущать себя законченным тупицей, потому что
лолшто?у меня сами собой пропали скругленные края записей, а я ничего не делал, и код параграфа не менял.-
-
18.05.2010 в 16:47То есть, начиная от того, что синтаксис неверный, и заканчивая тем, что margin-left прописан дважды.
max-width:120px указывать необязательно, нельзя загрузить аватар шире 120 пикселей.
-
-
18.05.2010 в 16:51Я вижу скругленные края.
Но вообще...
На днях столкнулась со следующим... Делаю дизайн - препросмотр в самом редакторе и в открытом окне показывает, что все зашибись.
Ставлю дизайн себе на дневник. Все хорошо.
Открываю дневник, чтоб посмотреть, как будет выглядеть из-под гостя - все по-прежнему хорошо.
Выхожу с дневников, обновляю страницу - дизайн разъезжается к чертям. Быстренько залогиниваюсь, обновляю страницу - все равно все разъехалось. Чищу кэш - все разъехалось. Проверяю через предпросмотр - все разъехалось. Проверяю код - все верно, не должно оно ТАК уезжать. А оно разъехалось! И как на место ставить, при правильном-то коде, я не знаю. И, честно говоря, руки опускаются.
-
-
18.05.2010 в 17:06Aloria, если есть какая-то коннкретная проблема, напиши, найдём причину, поправим.
-
-
18.05.2010 в 17:10Когда снова наберусь смелости взяться за диз - напишу. Просто это последний раз, когда я берусь за сколько-нибудь сложный дизайн на дневниках. Меня безумно достала взаимосвязь между логически не связанными элементами, когда меняешь один, а меняется все на свете... И вот такие сюрпризы при установке.
-
-
18.05.2010 в 17:13на месте они, а вот сползающий вниз записей фон теперь пришпилен, и не наезжает на подзаписные ссылки))
это я так, для справки)
-
-
18.05.2010 в 17:18хорошо делать дизайн локально на своём компе (сохраняешь страницу, правишь user.css), потом только заливаешь на дневники — нет никакой сложности залить ещё раз, поднять из бэкапа промежуточную версию и т.д.
"Меня безумно достала взаимосвязь между логически не связанными элементами, когда меняешь один, а меняется все на свете" — это странно, дневники никак не влияют на каскад css. Тут хорошо бы пример.
-
-
18.05.2010 в 18:40То есть, начиная от того, что синтаксис неверный, и заканчивая тем, что margin-left прописан дважды. max-width:120px указывать необязательно, нельзя загрузить аватар шире 120 пикселей.
Я понял, я случайно продублировал код, и от этого все, что было после этого кода, работать перестало).
А аватар все-таки загрузить можно. Вот, например, в этой записи сообщества diarycss.diary.ru/p109199198.htm аватара пользователя больше допустимых размеров, и в ленте избранного она весьма неприглядно смотрелась, т.к. вылезала за края обводки и обрезалась рамкой. И это не только у этого конкретного человека.
На днях столкнулась со следующим... Делаю дизайн - препросмотр в самом редакторе и в открытом окне показывает, что все зашибись. Ставлю дизайн себе на дневник. Все хорошо. Открываю дневник, чтоб посмотреть, как будет выглядеть из-под гостя - все по-прежнему хорошо. Выхожу с дневников, обновляю страницу - дизайн разъезжается к чертям. Быстренько залогиниваюсь, обновляю страницу - все равно все разъехалось. Чищу кэш - все разъехалось. Проверяю через предпросмотр - все разъехалось. Проверяю код - все верно, не должно оно ТАК уезжать. А оно разъехалось! И как на место ставить, при правильном-то коде, я не знаю. И, честно говоря, руки опускаются.
У меня однажды было на основном аккаунте (Walterka), что к чертям слетели все ксс-дизайны после того, как у меня истек платный акк, и я еще неделю не пополнял счет. Пополнил - сначала просто не отображалось, что я платник. Заблокировал - разблокировал, как советовали в техподдержке, захожу в дизайны, а там голые поля ксс. А я сохранял на компе только половину одного из дизайнов.)
на месте они, а вот сползающий вниз записей фон теперь пришпилен, и не наезжает на подзаписные ссылки))
Я убрал тень(подсветку) с параграфа, все верно, я говорил, что это из-за нее.)
-
-
18.05.2010 в 21:57А с аватарами... я года полтора назад впервые заметила этот баг, неоднократно про него говорила программисту - бесполезно
-
-
18.05.2010 в 22:41-
-
19.05.2010 в 02:17аватар 120 или меньше пикселей, сам блок для аватара чуть больше, аватар центрируется (ему вроде и задавать ничего не надо). Если добавлять границы к аватару - то сам блок получается = ширина границы + ширина аватара + ширина границы. (в некотором случае он начинает занимать больше 120 пикселей, а у предыдущего блока есть паддинг - вот и ваш сдвиг на несколько пикселей. - это паддинг + увеличенная общая ширина аватара - а паддинг с другой стороны обрезается, поэтому кажется что плохо центрируется) - проверено у Pedobeer в дневнике. С границей в 1 пиксель - это не так заметно.
Так что это вовсе не баг, в смысле браузера, ваш баг дизайна возможно.
Как исправить, если мы все таки хотим границу? Просто - .commentAuthor div задано 120 пиксел - прибавьте ваши границы - но смотрите чтобы сам блок не стал широким и комментарии не оказались под аватаром, а аватар посередине всей страницы.
-
-
19.05.2010 в 09:10Так я и говорю, что я в коде что-то не так, возможно, прописал).
но смотрите чтобы сам блок не стал широким и комментарии не оказались под аватаром, а аватар посередине всей страницы.
Это я знаю).