Css

Заметки по css.

1 2 3

Css-анимация: пример-игрушка

10 марта 2015. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Блог выводится из летаргического сна. Насколько успешно — увидим.

Вниманию публики предлагается небольшая игрушка на css: демонстрация возможностей свойств transform и transition. «Каруселька» сделана на чистом css, без единого скрипта и без единой картинки; если бы она ещё запоминала положение стрелки, её можно было бы назвать «Лото» или «Рулетка», но такое без скрипта никак.

Примечание: каруселька работает в ИЕ, начиная с 10. В старых версиях ИЕ такое сделать невозможно. (далее…)

Отзывов (41) »

Лечить или резать?

13 августа 2012. Рубрики: Интернет, Курьёзы; автор — Юлия Панина aka Княгиня.

После отпуска ничего умного писать не хочется. Поэтому напишу немножко бреда. Но тематического. (далее…)

Отзывов (26) »

Табличные значения display: table, table-cell, table-row, table-column, и другие

10 октября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Этой заметкой я хочу заглянуть в будущее, которое, надеюсь, будет не очень отдалённым. В будущее — потому что IE7 не поддерживает табличные значения свойства display, а с арены пока не сошёл.

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

(далее…)

Отзывов (67) »

Display: inline-block, или на грани кроссбраузерности

5 сентября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Из этой заметки вы узнаете:

  • как ведёт себя элемент со значением display: inline-block;
  • какие бывают сюрпризы при его применении;
  • как обойти зловредный IE7;
  • а также как можно использовать display: inline-block и чем он лучше float: left.

(далее…)

Отзывов (47) »

Волшебное свойство display, или типы отображения элементов html

22 августа 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Часть первая, адаптированная под ИЕ7.

Css-свойство display задаёт тип отображения элемента. На русский язык его можно перевести фразой: «Веди себя как». То есть, берём любой элемент html и говорим ему: веди себя как… блок, строка, таблица или вообще как будто тебя нет.

Все существующие на данный момент значения свойства display: (далее…)

Отзывов (21) »

Селекторы атрибутов: примеры практического применения

19 июня 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

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

Отзывов (8) »

Селекторы атрибутов: краткий список

27 марта 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Чем дальше уходит в прошлое ie6, тем охотней я пользуюсь примочками css, доступными современным браузерам. Одна из таких возможностей — селекторы атрибута (attribute selectors), или селекторы по атрибутам.

Примечание: IE7 и 8 понимают селекторы атрибута только в том случае, когда у страницы указан правильный доктайп. В противном случае они утрачивают понятливость.

Виды селекторов атрибутов
Название Вид Область действия
Селектор существования атрибута (existence attribute selector) [имя атрибута] Все элементы, имеющие этот атрибут (с любым значением)
Селектор равенства атрибута (equality attribute selector) [имя=«значение»] Все элементы, имеющие данный атрибут с данным значением
Селектор атрибута с пробелами (whitespase attribute selector) [имя~=«значение»] Элементы, имеющие этот атрибут с данным словом в списке значений
Селектор атрибута с дефисом (hyphen attribute selector) [имя|=«значение»] Элементы, имеющие этот атрибут, при том, что его значение либо совпадает с указанной частью, либо начинается с неё и дефиса
Селектор префикса атрибута (prefix attribute selector) [имя^=«значение»] Элементы, у которых значение данного атрибута начинается с указанной части
Селектор суффикса атрибута (suffix attribute selector) [имя$=«значение»] Элементы, у которых значение данного атрибута оканчивается указанной частью
Селектор подстроки атрибута (substring attribute selector) [имя*=«значение»] Элементы, у которых значение данного атрибута содержит указанную часть

Между значением селектора и квадратным скобками не должно быть пробелов! Значение атрибута рекомендуется заключать в кавычки.

Селекторы атрибутом можно комбинировать друг с другом и другими селекторами:

input[type="text"]
— выбраны элементы input типа text (текстовые поля)
input[type="text"].error
— выбраны текстовые поля с классом error
td input[type="text"]
—выбраны текстовые поля, заключённые в табличные ячейки
input[type="button"][onclick]
— выбраны элементы input типа button (кнопка), на который повешено событие onclick

Селекторы существования, равенства, с пробелом и с дефисом определены в стандарте CSS2.1. Селекторы префикса, суффикса и подстроки определены в стандарте CSS3.

О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.

Отзывов (3) »

1 2 3