CSS

Руководство по внедрению CSS-колонок в адаптивный дизайн

Максим Усачев
3

Следующяя статья написана приглашённым автором Кэти Декора (под редакцией Джеймса Моррисона). Кэти исследовала колонки CSS и их отзывчивость в работе. Но, к сожалению, она не смогла найти много информации на эту тему. Поэтому, как истинный герой, она написала об этом сама. Давай, Кэти:

С помощью колонок CSS вы можете создавать макеты в стиле журнальной верстки с небольшим добавлением разметки, которая будет адаптироваться к любой, даже к не фиксированной ширине. Браузеры, которые поддерживают CSS-columns, сделают нужные расчеты, чтобы вписать и распределить содержимое по аккуратным колонкам. Если вы уже работаете с резиновым макетом, то колонки в этом случае будут подстраиваться автоматически. С правильной комбинацией свойств, колонки CSS являются интересным вариантом для создания макета, который может быть отзывчивым и поддерживает изящную деградацию.

Поведение курсора при наведении на текст

Максим Усачев
12

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

(обн. )

Снова равномерное выравнивание блоков по ширине: постепенное улучшение до Flexbox

SelenIT SelenIT
36

Задача равномерного выравнивания горизонтальных элементов (например, пунктов меню) по всей ширине контейнера стабильно остается актуальной в верстке. Два года назад Максим Усачев (psywalker) написал обстоятельнейший разбор ее решений, который заслуженно стал самой популярной статьей на CSS-live.ru. Были рассмотрены 4 варианта:

  1. Вариант с разносторонним выравниванием (на базе float), к сожалению, не способный претендовать на универсальность;
  2. Вариант с дополнительным контейнером (в принципе, работоспособное решение, но только для фиксированной ширины элементов);
  3. Вариант с text-align: justify для инлайн-блоков и дополнительным элементом-распоркой (приемлемое решение);
  4. То же самое, но с заменой элемента-распорки на псевдоэлемент :after (лучшее решение).

У двух последних решений была изюминка в виде двух малоизвестных свойств CSS3 (text-align-last и text-justify), по иронии судьбы с незапамятных времен работающих в IE (где они и появились).

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

(обн. )

CSS-свойство display и контексты форматирования

SelenIT SelenIT
20

Я давно собирался написать эту статью, но на прошлой неделе W3C дал замечательный повод… впрочем, обо всём по порядку. Кстати, спецификации W3C зря считают скучными: порой они могут дать фору любому детективу. В хорошем детективе всё выясняется лишь на последней странице. Но бывало ли, чтобы ключевая деталь детектива ― например, что злодеев было не двое, а трое ― раскрывалась вообще не в тексте, а… в списке найденных опечаток, на отдельном листке, вклеенном в книгу?

Так вот, в спецификациях W3C бывает еще и не такое. Например, всем нам знакомая спецификация CSS2.1: уже три года как она в статусе рекомендации, по идее, никаких изменений в ней быть не должно. Как вы думаете, сколько в этой спецификации описано наших любимых контекстов форматирования: два ― инлайновый и блочный? А вот и нет: три! Через год после «совсем-совсем-окончательного» утверждения спецификации ее авторы внезапно поняли, что на самом деле в ней описан еще один, ни на что не похожий, контекст форматирования ― табличный. Но поскольку менять окончательно утвержденную спецификацию по правилам игры нельзя, то единственное, куда можно было внести изменение ― список замеченных ошибок (errata). Так что внимательно читайте спецификации, и не только основной текст, но и добавочные ссылки! Кстати, кто пройдет квест на внимательность в оглавлении этой самой спецификации и найдет ее «секретный уровень» с одной загадочной фразой?

Но хватит вступлений, пора переходить к нашей первой теме, и это…

Контексты форматирования в CSS

Итак, какие они вообще бывают, по состоянию на середину-конец 2014 года?

Границы не на всю высоту в списке товаров

Максим Усачев
12

Последнее обновление: 27.11.2012.

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

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

(обн. )

Клевый эффект для текста из частиц на Canvas

Максим Усачев
0

Прикольный эффект для текста сделан с помощью элемента HTML5 canvas. Но это сделал не я. Идея принадлежит автору оригинала. Я просто нашёл его демо-страницу.

Обновление: Автором оригинала является Ruby on Tails. Я заметил, что демо-пример немного неисправен и производительность его слабая. Так что если кто-нибудь может аккуратненько подправить пример, поделитесь решением в комментариях.

Анимированная типографика на CSS3

Максим Усачев
2

Каждая буква создана с помощью нескольких элементов HTML и каждая часть буквы будет иметь собственное объявление CSS-анимации, но с разными задержками. Это отзывчивая типографика. Лучше всего она будет смотреться на экранах с разрешением 1920px или 1000px и ниже. Типографика будет трансформироваться в том случае, если ширина экрана будет 1280px и 1024px.

HTML:

<!--[if lte IE 10]>
<style type='text/css'>
html body #typo-wrap {
  margin:0 auto !important;
  padding:10px;
}
</style>
<![endif]-->
<section id="typo-wrap">
	<h1><!--
	--><span class="char char-w collapsed">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
		--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-b clear">B<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-t">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-h">H,<br><!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-w collapsed clear">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
	--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char same char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char same char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-f clear">F<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-d">D<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel bevel-right-bottom"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-o">O<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top bevel-left-bottom"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel-right-bottom"></span><!--
	--></span><!--
	--><span class="char char-m">M<!--
		--><span class="part-1"></span><!--
		--><span class="part-2 bevel bevel-top-middle"></span><!--
		--><span class="part-3 bevel bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="blink">.</span>
	</h1>
	<div class="clear"></div>
</section>

Непростая стилизация строк таблицы и непонятный баг в IE9

Максим Усачев
12

Несколько дней назад, у одной моей знакомой верстальщицы возникла задачка по вёрстке, которая касалась необычного раскрашивания строк таблицы при наведении. Во время того, как рассматривались всякие решения, был выявлен странный баг в IE9.

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

Плавающий текст на CSS3 и JavaScript

Максим Усачев
1

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

HTML:

    <!-- try changing the text -->
    <p>Floating</p>