CSS *

Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.

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

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

Задача

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

Собственно, ничего принципиально нового или фантастического. Просто способ сделать такие вот стильные блоки без использования изображений:

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

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

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

Итак, что же мы имеем: чистый CSS, без единой картинки, без JavaScript (хотя и с ним, для демонстрации, тоже сделаем), с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.

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

Многие знакомы с методом скругления уголков средствами CSS, который активно использует Гугл. Я лично познакомился с ним на сайте Шторкин.ру.

Метод сделан на чистом CSS, без картинок, без JS, полностью кроссбраузерный. Он спокойно тянется в ширину и высоту. Единственный его недостаток: отсутствие сглаженности (алиасинг). В принципе, все вполне поправимо.

Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.

Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.

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

 

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».

Работает только в браузерах на движках Gecko и Webkit.

Выглядит так:

 

Проблема png в ie6 и background-repeat известна, но не всегда всё так уж очень плохо. Например, имеется полупрозрачный png размером 1х100, и нужно растянуть его по горизонтали (сделать полосочку). Кто-то скажет, что это невозможно, но не спешите, напишем фильтр для ИЕ6 как-то так:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/menu-gradient-main.png', sizingMethod='scale');

Запускаем и удивляемся… Работает! Вся фишка в значении «scale» свойства sizingMethod, оно делает как раз то что нам нужно, т.е растягивает png по ширине контейнера.

Точно также можно растянуть png и по высоте. В итоге мы, конечно, получаем не полноценный background-repeat, но хоть что-то…

Если кто не знал — в именах CSS-селекторов можно использовать юникодовые символы. Вообще любые. :)

Теперь подумаем,

Что такое Haml/Sass?

Haml (xHTML Abstraction Markup Language) это язык разметки для упрощённой генерации xHTML. В свою очередь эквивалент Haml для css — это Sass (Syntactically Awesome StyleSheets).

В данной статье я расскажу чем примечателен Sass. И с помощью чего sass-файл можно скомпилировать в css.

Ранее здесь была представлена статья о том как сделать вертикальный текст картинками, генерируемыми php.

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

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

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

В данной статье автор Steve Souders приводит наглядные доказательства, почему не стоит использовать import для загрузки стилей в документ.

LINK vs. import

Существует 2 способа загрузки файлов стилей. Использовать тег LINK:

<link rel='stylesheet' href='a.css'>

Или импортировать файлы с помощью import:

<style>
@import url('a.css');
</style>

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

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

9 апреля каждого года наступает день снятых CSS (не получается придумать адекватный перевод).

В этот день (на самом деле праздник длится 48 часов) сайтам положено снимать свои таблицы стилей, и обнажать свою структуру. Эта затея призвана привлечь внимание к веб стандартам. Не уверен, что акция является эффективной, но по крайней мере это забавно.