Создаем объёмный блок с тенью средствами CSS3

[mas1k]

Ну, в Опере 10.10 только верхние ссылочки получились с разноцветным бг.
А за материал спасибо, полезно.

[Melissa]

По идее верхние ссылки не каждому нужны будут. Получается блок с закруглёнными углами можно использовать. Ничего страшного, что круглые углы не увидят пользователи IE.

[dima_smol]

в принципе вы правы. На одном из проектов так и сделал. Вид от незакругленных уголков особо не портиться.

Осталось дождаться нормальной поддержки CSS3 хотя бы от Opera (вроде в пре-альфа релизах уже есть).
И в IE9 тоже поддержку CSS3 обещали.

[homm]

Осталось дождаться нормальной поддержки CSS3 хотя бы от Opera

Му-ха-ха. Осталось дождаться, когда вы поймете, где css3, а где нечто другое.

[homm]

Пояснение:
box-shadow и text-shadow — это css3, добавленное в Оперу недавно.
-webkit-box-shadow и -moz-text-shadow — это нечто другое, не css3, у этого не может быть «нормальной поддержки» в Опере.

[patt]

на сколько мне известно приставки означают, что свойство не полностью отвечает стандартам. В данном случае, видимо потому что по правилам w3c стандарт официально принимается после, по моему, 2-х готовых реализаций, и ещё официально не принят. Так что Опера, действительно отстаёт… надеюсь скоро подтянется.

[Chamie]

Приставки означают, что свойство действует только под указанным HTML движком. Так что понимать приставки -moz и -webkit должны, соответственно, только Mozilla-based и Webkit-based браузеры.

[mukizu]

в 10.50 аналогично… увы

[volanddd]

а если Опере дать border-radius вместо -moz-border-radius?

[fatal]

Именно так! В Opera 10.5 border-radius без префикса.

[mukizu]

а как это может повлиять на положение ссылок в меню? Я об этом)

-moz-border-radius в опере работает

[Fesor]

Уважаемый, -moz- в опере (покрайнемере у меня) не работает, однако прекрасно работает без него.

А по поводу положения ссылок — если вы о наклоне, то если добавить к CSS свойству префикс -o- все прекрасно работает, и могу заметить что отображается лучше чем в FF.

[mukizu]

хм, в 10.50 у меня все заработало и с -moz-

ок, не знал

[Fesor]

я чуть ниже выложил с CSS рабочий и скрин из оперы.

[homm]

Увы автору, никак не Опере.

[Vert]

да, жаль Оперу вся эта радость обходит стороной :(

[Fesor]

Прость CSS написан ТОЛЬКО под webkit и лису, про оперу автор попросту забыл.

[remal]

Текст при повороте выглядит ужасно. Как пример, конечно, норм, но в реальной среде это использовать пока нельзя.

[dima_smol]

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

[cronfy]

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

[impwx]

В Chrome показывается отлично. В Firefox, увы, весьма корявый.

[cronfy]

Chrome/Ubuntu — тоже весьма криво отображается. А под виндовсом в хроме да, нормально.

[tagir_valeev]

Он у меня в FF ещё шевелится, когда его выделяешь мышкой :-)

[Chamie]

Ага, и это не считая прыгающих полуповёрнутых букв и диких «лесенок»

(слева ФФ3.6, справа — Опера10.50, применены трансформ-ротейт и текст-шедоу. Фон — картинка)

[trevel]

нужно бы сами свойства из css3 дописать, а не только браузерные еквиваленты:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

[dima_smol]

а border-radius сейчас вообще хоть кто-то воспринимает? Или на будущее?

[basilkot]

слышал что в последней бете оперы не нужны приставки

[Fesor]

Для 2D трансформаций нужен префикс -o-. А так да, не нужен.

[homm]

При чем тут будущее. У вас статья называется как? Вот border-radius — это и есть css3.

[bolk]

Opera 10.50

[AlieNCrazY]

последние сборки chromium понимают border-radius

[andoriyu]

забавно. заюзаю у себя.
p.s.
да я знаю, что только избранные увидят эту красоту… простых смертных буду редиректить на скриншот того, что они могли увидеть :)

[andoriyu]

grab.by/1S6v — прикрутил к своему движку. Бабл использую как всю страницу, в лентачках будет инфа в стиле под кем залогинен и так далее :)

[mas1k]

Нижняя полоса не круто смотрится, так как полоса сгиба выглядит слишком толсто, по сравнению с тонкой полосой.
Нужно переделать.)

[andoriyu]

угу, я ее верх загну еще.

[andoriyu]

also вы забили указать class=«info»

[dima_smol]

там ничего интересного, просто паддинги. Я решил в пост вынести только элементы с новыми CSS свойствами

[dohlik]

browsershots.org/http://my-html.ru/example/3D_css/index.html

[egorinsk]

А нельзя triangle-* заменить на псевдлэлементы :before и :after?

[Fesor]

dumpz.org/16206/ — добавил поддержку оперы.
Opera 10.5 Build 3186

[Fesor]

i46.tinypic.com/2lldbpz.jpg — демонстрация в опере. Вроде как все работает.

[Clou]

Хм. В сегодняшней сборке Оперы часть букв не отрисовывается — dmitrymaslov.ru/imges/res/opera-10.50-css3.jpg

[Clou]

да уж, пропустил буковку…

dmitrymaslov.ru/images/res/opera-10.50-css3.jpg

[Fesor]

Поставил — проверил. Действительно… Надо бы баг репорт сделать что-ли

[Clou]

Уверен, это и без багрепорта исправят, версия-то совсем сырая. :-)

Хотя можно и отписаться разработчикам конечно.

[Fesor]

Отписался

[fatal]

Они в курсе ;)

[homm]

Автор, убейся. Это не CSS3, тебя обманули. Это вендорные расширения CSS. заточенные под 2 конкретных браузера.

[ne0d1n]

Ну, зачем авторов сразу так? Человек старался, а придраться ко всему можно.
На хабре итак много злости, чем-то фильм «Эксперимент» напоминает…

[homm]

Автор написал статью, не потрудившись разобраться в вопросе. Статья на хабре — это не запись в личный бложик. Уже давно известно, что статья на хабре — истина в последней инстанции для новичков. Моя задача — отреагировать так, чтобы автор понял что он накосячил и исправил статью.

[ne0d1n]

Готов подписаться под каждым словом в комменте выше.

Но не в первом комменте «Автор, убейся». CSS3 еще в разработке, так что если говорить серьезно, то его еще не существует как стандарта.

[homm]

Ладно, резко получилось, не могу не согласиться.

[IonDen]

Ну ведь когда нибудь это может стать стандартом без всяких там -moz-, -webkit-

[homm]

Браво! CSS3 — это и есть «без всяких там -moz-, -webkit-», чего у автора не наблюдается.

[dima_smol]

сейчас в пример добавлю

[homm]

Ок, в примере появилось, а в статье, которая называется «… средствами CSS3», будет что-либо про CSS3?

[Fesor]

Вы не все добавили, я вам готовый CSS опубликовал даже! У вас изменение наклона текста так и не сделано для оперы!

[impwx]

Там же написано, откуда взята статья. Это скорее хороший перевод некорректного оригинала.

[piupiu]

Нет, ну правда, поменяй заголовок :-)

[Xenkok]

автор, читайте книги, а потом когда уверены — пишите статьи.

[macgera]

Вы начитаны? Напишите лучше.

[macgera]

За материал спасибо. IE блин как всегда!

[Sakura]

Новые «печеньки» которые CSS3 нам дает конечно классные и удобные.
Но сам файл стилей становится довольно таки громоздким.
Если так и дальше пойдет, то что ж будет в css4. Хотя думаю пока появится 4 версия, сам css эволюционирует во что-то более удобное и менее емкое.

[Fesor]

Почему громоздким? На мой взгляд реализация намного компактнее нежели реализовывать по средствам традиционных методов.

[aps]

>компактнее нежели реализовывать по средствам традиционных
А вы приплюсуйте традиционный метод, необходимый для кроссброузерности и посчитайте во сколько этот «нетрадиционный» вывих обойдется.

[Fesor]

а зачем тогда реализовывать на CSS3? Либо то либо то, если уж придеться мучаться)

[aps]

>а зачем тогда реализовывать на CSS3?
Вот и я думаю, зачем реализовывать?
= = = = = = = = = = = = = =
Папа папа посмотри я чет непойму пластилин это или не пластилин??!!! Папа посмотрел, панюхал, надкусил. — да ну сынок эт гавно какоето! — да вот и я пап думаю откуда у меня в жопе пластилин!
= = = = = = = = = = = = ==

[Fesor]

Ну так от вас же никто этого не требует, статья несет собой лишь показательный характер.

p.s. Вариант этого анегдота с Василий иванычем и Петькой меня улыбал больше)

[aps]

>показательный характер.
Ну да, ну да. Зачем было надкусывать.

[Sakura]

в целом, реализация действительно стала компактней, если учитывать что раньше приходилось переносить часть реализации в html & js.
а вот сам css при этом стал ведь больше за счет того что в него перенесли эти «печеньки»

[pdev]

Зачем надо было говорить про оперу, если вы не использовали CSS3 аттрибутов? Их то она прекрасно поддерживает, без -moz-.

[dima_smol]

версия 10.10 которая на официальном сайте представлена как последняя, и через меню в браузере так же это подтверждает даже с применением border-radius закругленные уголки так и не показала.

[Fesor]

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

[Clou]

Позволю себе уточнить, версия Оперы 10.50.

[homm]

10.50 = 10.5
в школе должны были проходить.

[homm]

Всетаки версии оперы означают десятые и 10.01 ≠ 10.10, а вот 9.50 чаще называют 9.5.

[lol2Fast4U]

10.5 — это Mac OS X Leopard, а Opera — 10.50.
Почему Опера пишет справа ноль — их спросите.

[pepelsbey]

Официальный номер версии всё-таки 10.50. Имеем же мы право шутить? Всё началось с 10.10 (1010 = 10, вроде)

[bungu]

А почему в словах «реально» и «круто» буквы неровно стоят
можно как нибудь исправить?

[Fesor]

так походу только в лисе… ну и в хроме под линуксом…

[Demiska]

2\5 пафоса и деферамб кемерону, 2\5 кадров из фильма, и только 1\5 интересного материала.
Ну вообщем как всегда, когда рассказывают о кино.

[homm]

Дак вот о чем пост :)

[pepelsbey]

Не то окно, да?

[Demiska]

Ага) Спасибо за понимание)

[pepelsbey]

Если вы использовали для написания топика западную статью, то не забывайте — там у ребят другая специфика. А у нас большое распространение имеет Opera, которую тоже не мешало бы учесть в примерах. Ну и совместимость с браузерами, которые просто отбросят префиксы в будущем — тоже дело важное, поэтому:

-webkit-box-shadow
-moz-box-shadow
box-shadow

-webkit-border-radius
-moz-border-radius
border-radius

-webkit-transform
-moz-transform
-o-transform
transform

-webkit-transition
-moz-transition
-o-transition
transition

[homm]

Да даже не в Опере дело, просто написать статью о CSS3 и не написать ни одного CSS3 свойства, это же умудрится надо.

[pepelsbey]

Ну, даа… Но вопрос скользкий. Вендорные расширения — это те же CSS 3 свойства, но только с оговоркой «если мы их перестанем поддерживать — никаких претензий, ребята». Так что я бы не стал так категорично.

И да — хабр уже не торт! </irony>

[almalexa]

Посмотри на себя, вебмастер! Одним неловким движением ты закрыл всю иронию в комментах дальше!

[pepelsbey]

Во-первых, это была провокация ;)
Во вторых, я наоборот закрыл все открытые до меня айрони…

[almalexa]

Ой и правда, вот что бывает когда клонит в сон в пять часов вечера :/

[Fesor]

Просто на момент написания той статьи опера еще не поддерживала эти свойства.

[pepelsbey]

Глупости.

Первый публичный релиз Opera 10.50 вышел в конце декабря 2009 года,
а статья уже 2010 года. А перевод (адаптация) статьи совсем свежий, так что автора это не оправдывает. Голову из песка стоит вынимать ;)

[Fesor]

действительно, прошу меня извенить за неточность.

[4epT]

Делал когда-то похожие блоки, ещё и цвета надо было легко менять, всех подробностей не вспоню постомотреть мой вариант можно тут

[Fragster]

Автор, добавьте в css примера ещё -khtml- свойства, если не трудно

[Mew]

рабочий пример не юзает нативные свйоства ксс трансформа. Следствие: не работает в опере 10.60