Прощай -9999px: новая техника замены изображений через CSS

Техника замены изображений через -9999px была популярна почти десятилетие. Для замены текстового элемента изображением, можно использовать следующий код:

<h1>Заменяемый текст</h1>
<style>
h1
{
  background: url("myimage.png") 0 0 no-repeat;
  text-indent: -9999px;
}
</style>

Фон элемента отображается, а текст перемещается за пределы экрана, чтобы он не мешал. Просто и эффективно. Этот приём принят для показа графических заголовков — теперь он необходим редко, потому что у нас есть веб-шрифты, — но вы всё равно найдёте примеры использования по всему Интернету.

До сих пор.

7 решений для преодоления кризиса с вендорными префиксами

Как мы уже сообщали, Mozilla, Microsoft и Opera недовольны сайтами, которые ориентированы только на свойства с -webkit. Это заставляет их браузер выглядеть плохо даже в случае, когда он реализует идентичные или лучшие технологии. Чтобы решить эту проблему, они предлагают включить поддержку префикса -webkit в не Webkit-браузеры.

Хотя это во многом маркетинговое решение, на деле это реальная проблема. Решение возмущает многих веб-разработчиков, но мы заслужили свою порцию упрёков. В этой статье мы обсудим варианты, их плюсы и минусы.

Близится судный день: Opera внедрила префиксы Webkit

В феврале 2012 года мы выложили протокол заседания W3C, на котором Mozilla, Opera и Microsoft обсуждали внедрение префиксов -webkit в не-Webkit-браузеры. Причина: часть разработчиков использует только префиксы webkit — их сайты хорошо выглядят в некоторых браузерах, но рушатся в других, даже если они предлагают такой же уровень поддержки CSS3. Проблема особенно распространена в мобильных браузерах и многие разработчики не в состоянии выйти за рамки своих высокотехничных устройств Apple или Android.

Опера анонсировала поддержку 14 CSS3-свойств Webkit в своём Mobile Emulator. Реализация в конечном итоге дойдёт до всех выпусков настольных и мобильных браузеров. Если вы считаете, что «Opera это малая доля рынка», подумайте еще раз: это наиболее используемый мобильный браузер в мире.

Возможно, я чрезмерно драматизирую, но на ум приходит известная фраза Чарлтона Хестона: «Они действительно это сделали. Вы маньяки. Вы взорвали это!».

Два новых предложения по преодолению кризиса с вендорными префиксами

Веб-разработчики начали беспокоиться по поводу кризиса с вендорными префиксами с февраля 2012 года. Подводя итог, вот что должно случиться в идеальном мире.

  1. Производители браузеров внедряют экспериментальные свойства CSS3 с помощью собственных префиксов, например: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
  2. Разработчики могут использовать современные технологии без нарушения кроссбраузерности. Чтобы свойства работали везде, они могут перечисляться с префиксами или без них.
  3. После того как свойство входит в рекомендацию W3C, все производители браузеров могут обеспечить стабильное свойство без префикса, например, transform.
  4. При необходимости разработчики могут удалить свойства с префиксами из своих стилей. Однако это не является строго обязательным, если свойство без префикса определяется последним в правилах CSS.

Близится катастрофа с вендорными префиксами

Разработчики с любовью и ненавистью относятся к вендорным префиксам CSS, которые позволяют быть на острие прогресса за счёт многословных объявлений:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

Это хорошо работает в теории, но вот что происходит в реальности.

  • Чаще всего экспериментальные свойства первыми реализуются в движке Webkit, но нет никакой гарантии что они появятся и в других браузерах.
  • Иногда бывает сложно определить, является ли свойство с вендорным префиксом частью спецификации CSS. Некоторые производители браузеров не стандартизируют свойства.
  • Даже если стандартное свойство изменилось, некорректные свойства с вендорными префиксами продолжают поддерживаться. Ваш старый код по прежнему работает и вам не надо к нему возвращаться чтобы его поправить.

Как сделать загнутые уголки на CSS3 без картинок

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

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

Как сделать ленты на CSS3 без картинок

В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.

Как сделать словесный пузырь на CSS3 без картинок

Я помню как делал первый свой словесный пузырь без картинок много лет назад. Для этого потребовалась многострочная функция JavaScript для введения элементов в DOM и ужасный CSS, который выглядел довольно страшно и не так хорошо работал в IE5.

CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.

Обрезаем длинную стро...

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

Встраиваем шрифты при помощи Font Squirrel @font-face Generator

Статья взята с сайта PHP Junior с разрешения автора.

В своей предыдущей статье «Font Squirrel @font-face Generator vs Google WebFonts» я сделал обзор двух самых популярных сервисов для встраивания шрифтов в вёрстку, а также обещал в следующей статьей раскрыть секреты его использования.

Font Squirrel @font-face Generator vs Google WebFonts

Статья взята с сайта PHP Junior с разрешения автора.

Последние года два в веб-разработке появился тренд: использовать какие-то кастомные шрифты не только в заголовках, меню и в шапке (при помощи Cufon или, не дай бог, изображений), но и вообще по всему контенту. Arial, Verdana, Times New Roman настолько приелись глазам за пару десятков лет, что людям захотелось чего-то свеженького — по крайней мере, с тех пор, как браузеры стали это позволять.

Конечно, кое-где перебарщивают с этим делом местами, перебарщивают. Но, если всё это грамотно и со вкусом сочетать, это здорово освежит ваш сайт и обрадует дизайнера, ведь зачастую его смелые и интересные идеи обламывались именно из-за технической сложности или невозможности их осуществления.

В этой статье я рассмотрю два наиболее известных веб-сервиса, помогающих встроить шрифты в HTML-вёрстку:

  • Google WebFonts
  • Font Squirrel @font-face Generator

Свой шрифт на странице

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам <h1>. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Текст и тень

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Конкурс на лучший логотип для сообщества css-live.ru

Друзья, сегодня начинается голосование за логотипы! И так, нашими участниками стали:

Евгений ИгнатушаПетр ЛисичкинМаленький зверёкИлья СвиденкоТомаш ТовтДмитрий ЗайцевАлександр Буховец и Антон Жарский.

Приглашайте друзей голосовать за свои логотипы.

Вконтакте —-> Ссылка 

Шито белыми нитками

В CSS для создания различных рамок или линий на какой-либо стороне элемента применяется свойство border. Оно достаточно универсально, имеет разные стили линий, которым просто задать нужную толщину и цвет. Через формат rgba можно установить и полупрозрачные линии. Однако, таким линиям напрямую нельзя задать желаемое расстояние от края элемента, чтобы получить дизайнерские эффекты вроде показанного на рис. 1.

Страницы