Метод Pixy?
Размышлял о методе подстановки картинок с помощью CSS. Так называемый метод «pixy»(кому пришло в голову такое странное название?) сейчас во всю используется в css-вёрстке вместо картинок. Смысл в том, чтобы в тэг-контейнер поместить альтернативный текст, а сразу за ним пустой тэг. Этот пустой тэг будет играть роль картинки, т. е. с помощью CSS мы накладываем его сверху на текст. Если у бразуера будут отключены картинки, то появится альтернативный текст.
#rss1 {
position: relative;
display: block;
cursor: pointer;
width: 171px;
height: 184px;
text-align: center;
font: normal 32px/171px arial,sans-serif;
overflow: hidden;
}
#rss1 span {
position: absolute;
top: 0;
left: 0;
width: 171px;
height: 184px;
background: url(rss.png) no-repeat;
}
RSS
Вот пример:
Попробуйте отключить картинки (например, с помощью панели Web developer в Firefox) или скачайте данный пример.
Минус такого способа — нарушение семантики, потому как в контейнере лишний тэг не имеет семантического смысла. Он просто лишний. Мусор. Но другого способа нет. Или пока его не открыли.
Если все браузеры станут вдруг нормально поддерживать селектор :before, а так же свойство content, то большинство перейдёт на такой код:
#rss2 {
display: block;
position: relative;
cursor: pointer;
width: 171px;
height: 184px;
text-align: center;
font: normal 32px/171px arial,sans-serif;
overflow: hidden;
}
#rss2:before { /* перед выводом текста вставляем контент */
content: ' '; /* Вставляем пробел в качестве контента */
/* остальное всё тоже самое что и для тэга span в первом примере */
display: block;
position: absolute;
top: 0;
left: 0;
width: 171px;
height: 184px;
background: url(rss.png) no-repeat;
}
RSS
Плюс очевиден — семантика чистая. Всё представление вынесено в CSS.
Что значит «нормально поддерживать»? Сами знаете, что такой код не будет поддерживаться в IE, ни в 6, ни в 7. Корректно этот способ работает только в Opera и Safari. В Firefox этот метод глючит — почему-то он не хочет ставить этому блоку абсолютное позиционирование. В итоге альтернативный текст съезжает вниз. Если использовать :after вместо :before, тогда в FF картинка съедет вниз, а текст будет виден. В Opera и Safari опять таки будет всё в порядке.
Додумаете, разовьёте идею, найдёте способ как сделать лучше и кроссбраузерно — сообщите. Буду благодарен.
]]>Bea]]>Esho mozhno tak! Pomojemu s boljeje krosiwym CSS:
h1#logo{
padding:0;
margin:10px;
width:100px;
height:50px;
background:url(logo.jpg) no-repeat;
border:0;
clear:both}
h1#logo a{
height:50px;
display:block}
h1#logo a b{
display:none}
logo
»]]>Bea]]>ohh on njipokazywajet code
[h1 id="logo"][a href="index.html" title="logo"][b]logo[/b][/a][/h1]
»]]>Андрей]]>Нормальная семантика — когда броузер вместо незагрузившейся картинки нормально показывает её альт (IE справляется). И не надо лишних извращений.
А в данном примере с отключенными картинками в ФФ после скролла пропал текст о_О
»]]>Dimox]]>А нельзя вместо “content: url(px.gif)” использовать запись “content: ‘ ‘”. Тогда бы и прозрачный пиксель не понадобился.
»]]>Dimox]]>Знак вопроса забыл поставить после первого предложения.
»]]>Никита]]>Bea, в вашем примере не показывается альтернативный текст при выключенных картинках.
Андрей, когда картинка вставляется с помощью тэга img — да. А когда картинка вставляется через CSS?
> А в данном примере с отключенными картинками в ФФ после скролла пропал текст о_О
Я написал в посте, что в FF глючит. Не читали?
Dimox, странно, я вроде пробовал до этого и не получалось. А теперь работает. Действительно, так лучше. Спасибо.
»]]>Steward]]>2 Андрей: к сожалению для этого альта нельзя прописать свои стили отображения – а зачастую очень хочется.
Я вообще считаю извращением отключать картинки и скрипты…. но это моё личное мнение
))
Да и грузить картинки с помощью css мне тоже жутко не нравится – вот уж где семантики нет, так это здесь.
2 АВТОР: я непонял насчёт некорректного тображения второго варианта в FF – у меня вроде всё нормально.
»]]>Никита]]>Steward, во втором варианте в FF, разве всё в порядке?
»Текст показывается при отключенных картинках? У меня текст съезжает вниз.
]]>Steward]]>2 Никита:
– у меня вообще во втором варианте текста невидно 
)))
»да. лажа
]]>Никита]]>Ну не видно, потому что стоит overflow: hidden. ))
»]]>Андрей]]>Никита: ой, как-то вообще второй пример пробежал не глядя %) соответственно, глючил первый пример.
Зачем вообще вставлять картинку CSS’ом, пока придумать не могу.
Steward: можно прописать стиль для соответствующей картинки.
»]]>Никита]]>Андрей, Первый пример у меня не глючит нигде.
> Зачем вообще вставлять картинку CSS’ом, пока придумать не могу.
Во-первых, если вставлять картинку через CSS, то можем оградить себя от редактирования HTML. Один раз написали и забыли. С помощью разных CSS стилей можно верстать разный внешний вид, для одного шаблона.
Во-вторых, можно реализовать графическое-меню с эффектом rollover без javascript.
В-третих, мухи должны быть отдельно, котлеты — отдельно. Содержимое документа — в HTML, описание внешнего вида — в CSS.
Ещё много плюсов можно найти, но это основные.
»]]>Steward]]>спасибо.. учтём…
»век живи – век учись
]]>Андрей]]>О, ролловер. Хотя мне понравилось делать (полу)прозрачную картинку и менять под ней фон.
»]]>Никита]]>> Хотя мне понравилось делать (полу)прозрачную картинку и менять под ней фон.
»Это старый ненадёжный способ:
1. в IE6 не показывается альтернативный текст,
2. в Опере не сохраняются размеры,
3. Происходит задержка при загрузке картинки при роловере.
]]>zigmat]]>А кто вообще сейчас, кроме России, может сидеть с опцией не загоузки изображений?
Скоро это станет совсем не актуальным. Да и в текстовом браузере сидят или полные Линуксоидные задроты (извеняюсь)… или, больше ни кто 
»]]>Никита]]>zigmat, я когда с мобилника на сайты захожу отключаю картинки. Зачем мне платить лишнее за gprs-трафик? И таких как я “задротов” немало. ))
Кроме России (судя по статистике пользователей интернет) экономит трафик Белорусия, Украина, Кавказ, центральная и Ближняя Азия, Африка, Латинская Америка, Балканы.
»]]>xaOz]]>А как насчет text-indent: -7000px ?
Заголовок
h1 {
»width:100px;
height:50px;
background:url(logo.jpg) no-repeat;
text-indent: -7000px;
}
]]>zigmat]]>Никита, тут ты прав. Не подумал. Теперь ещё и себе придётся всё так делать
P.S. На счёт твоих курсов. Они только во вторник и четверг?
»]]>Никита]]>zigmat, с чего ты взял? )) Курсы у меня обычно по понедельникам и средам. ))
»xaOz, ну да, текст уйдёт и не будет показываться вообще. Цель была, чтоб при отключенных картинках текст показывался.
]]>zigmat]]>Просто я звонил по указанному телефону на ИСМе и мне ответили совершенно обратное. Но если всё как ты сказал, я после нового года записываюсь
И ещё вопросик, Ие6 и Ие7 должны же понимать цсс одинаково, или я не прав?
»]]>Никита]]>zigmat, по какому телефону ты звонил? Может ты на прямую в ИСМу звонил и тебе сказали по каким дням вечерники учатся? )) Скорей всего. Звони и записывайся по номеру 29632119.
IE6 и IE7 что-то воспринимают одинаково, а что-то поразному. В 7 версии часть существенных багов исправили, правда, часть добавили. )) Но в целом функциональность в 7 версии не расширилась.
»]]>zigmat]]>Хорошо, позвоним
Блин, но паддинг и маргин они же должны понимать одинаково
Или у меня какой то полтергейст, который двигает слой в ие7 не так как надо…
»]]>akella]]>Pixy – это вообще то ник человека придумавшего эту технику, Petr Stanicek (aka -pixy-), все началось отсюда http://wellstyled.com/css-repl.....image.html
just my 2c
»]]>Никита]]>akella, возможно.
»]]>akella]]>Извините, не могу согласиться с таким ответом. Ибо это было не предположение, а исторический факт.
»Просто не хочу чтобы история забывалась.
]]>Никита]]>akella, я очень рад за вас. Я лично, редко могу себе позволить быть в чём-то уверенным.
Разные методы ролловера ведь не называют никакими никами их создателей. CSSPlay столько методов для создания выпадающих меню придумали. Они тоже не называют эти методы своими именами. А тут вдруг такой пафос.
История в любом случае забудется. С поддержкой CSS3 этот метод перестанет быть актуальным.
»]]>akella]]>Ролловеры не называют, нет, однако большая часть методов замены текста на картинки названы именами их создателей – так уж сложилось. Вот самый полный документ где это хорошо видно.
Я не говорил что я уверен =) Просто это факт, такое уж происхождение этого названия. CSS3 это конечно круто, только вот всерьез о нем можно будет говорить лет через 5 минимум. =) Просто не очень приятно видеть, что уже сейчас стали забывать кто, что и как. =(
»]]>Никита]]>Да, без проблем. Я разве против? Называйте как хотите. Просто это смешно. Когда формулу называют именем гениального математика — оно понятно. Человек проделал огромную работу, иследования, расчёты и создал формулу, которую в последствии стали изучать в школе, основываясь на которую другие учёные делали свои открытия и на много-много лет эта формула была основой основ для определённой сферы иследований. А здесь что? Пятилетняя слава верстальщика! Зашибись!
»]]>akella]]>Как математик, могу сказать что там, как и в физике, логика именования часто такая же – кто первый сказал, или с кем начали ассоциировать – тем именем и названо. Но я не о том что это мегаважно =) Просто пытался сказать что “странное название” не очень верный взляд на вещи в данном случае, и все.
Взять хоть неравенство Коши, доказать его может любой пятиклассник, особых “применений” в современной науке оно не имеет, не Коши так кто-то другой доказал, тем не менее гордо и “пафосно” именуется его именем
»]]>Никита]]>akella, не верных взглядов не бывает.
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Градиентный текст с помощью CSS]]>[...] весь текст. А наложение происходит уже знакомым вам методом, правда тэг <span> здесь должен уже писаться перед [...]
»]]>rmaksim]]>>>> В Firefox этот метод глючит — почему-то он не хочет ставить этому блоку абсолютное позиционирование.
Firefox как раз таки ведет себя так – как рекомендует спецификация:
12.1 Псевдоэлементы :before и :after
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: ‘position’, ‘float’, свойства списков и свойства таблиц.
так что способ с :before и :after со свойством position изначально неверен, и то, что он где-то работает сейчас – не факт что будет работать и потом…
строки position: absolute; top: 0; left: 0; – лишние
но… способ все же работает в firefox (и position он таки игнорирует), просто этот блок вставляется перед текстом и просто вытесняет текст и его не видно благодаря overflow: hidden;
»]]>Никита]]>rmaksim, а вот это я пропустил. Спасибо за комментарий, буду знать. Хотя по-моему очень странное правило, не понятно зачем игнорировать эти свойства.
»]]>plx]]>а отрицательный text-indent не дано поставить элементу… Новички..
»]]>Никита]]>plx, отрицательный text-indent дано поставить элементу, новичок…
»