Как стать автором
Поиск
Написать публикацию
Обновить

Комментарии 60

В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.

Он вообще не будет отображаться.

Пробел в content: " "; совсем не обязателен.
Всего голосов 9: ↑9 и ↓0 +9
Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Не согласен. Псевдоэлементы генерируют inline-сущности (можно сказать строчные элементы), которые добавляются в начало и конец содержимого элемента, к которому применяются! А не До и После самого элемента.
Всего голосов 11: ↑11 и ↓0 +11
Можно сказать До и После содержимого…
Всего голосов 3: ↑3 и ↓0 +3
Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.

Здесь та же ошибка(
Всего голосов 5: ↑5 и ↓0 +5
При это, в оригинале сказано правильно, но в здесь ошибка, статья хороша, а перевод вольного качества :-(
Комментарий пока не оценивали 0
К сожалению, это нормально работает только в последних версиях Firefox.

Проблему с транзишенами уже решил Роман Комаров: kizu.ru/en/pseudos/
Всего голосов 2: ↑2 и ↓0 +2
Вот прям таки решил? Сей костыль !== панацея, то бишь нормально это работает только в Firefox.

Ошибка в Chromium, ошибка в Webkit.
Всего голосов 3: ↑2 и ↓1 +1
Расскажите это тем кто вот такие вещи делает: codepen.io/iamvdo/pen/GsIxk
Всего голосов 2: ↑2 и ↓0 +2
МОАР!!!
Комментарий пока не оценивали 0
Очень спасибо. Может еще?
Комментарий пока не оценивали 0
Ну да, не решил, а обошёл, и не для всех свойств. Но пока есть баги вне ФФ — этим вполне можно пользоваться, если хочется сделать что-то здесь и сейчас.
Всего голосов 2: ↑2 и ↓0 +2
И в этом вы правы. И, да, спасибо за ваши эксперименты и желание научить эксперементировать других ;).
Всего голосов 1: ↑1 и ↓0 +1
transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;
Почему свойства с префиксами идут в конце? Чему вы молодёжь учите?
Всего голосов 15: ↑14 и ↓1 +13
А в чём проблема? оО
Всего голосов 12: ↑2 и ↓10 -8
Посмотрел слайды. Не понял, почему нужно писать иначе. Пример с тенью еще больше запутал — почему так?
Если не трудно, поясните, пожалуйста.
Всего голосов 2: ↑1 и ↓1 0
Потому что, в случае, если свойство уже реализовано во всех браузерах и работает без префикса, но при этом в коде префикс идёт последним, то браузер сделает примерно так:

1) Сначала увидит свойство без префикса (оно же у вас вверху)
2) Далее дойдя до свойства с префиксом браузер может применить его! А последнее может быть недоделанным или тем, которое использовалось для старых версий.

В итоге вы получите совершенно не ту реализацию свойства, которую хотели. А то и вообще, сломанную напрочь.
Всего голосов 2: ↑2 и ↓0 +2
Немного понятней, но не совсем — откуда гарантия, что свойство без префикса будет нормально работать? Нет ведь 100% гарантии, если только не протестировать все-все свойства во всех браузерах в прямом и обратном порядке?

(Я немного далек от верстки, больше серверная часть, но HTML мне всегда был интересен, отсюда глупые вопросы)
Всего голосов 6: ↑3 и ↓3 0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
+ про "::" вообще ни слова не сказано. А в CSS3 именно так и нужно писать, то бишь "::before" и "::after".
Всего голосов 2: ↑1 и ↓1 0
НЛО прилетело и опубликовало эту надпись здесь
Да я вроде как прочел, но в тексте-то по сути только про "::selection" сказано, а про остальное самим додумывать нужно. +, исходя из текста, нужно использовать только вариант с одним двоеточием, а реально же имеет смысл использовать два там, где это возможно и дописывать старый вариант там, где это нужно.
Комментарий пока не оценивали 0
А мне вот не нравится два двоеточия, ящитаю это лишний мусор исключительно ради религиозных убеждений. Все браузеры еще лет 20-30 будут поддерживать одно двоеточие ради совместимости; и я не верю, что вообще когда-нибудь введут в стандарт :before с одним двоеточием, которое будет иметь какой-то другой смысл.
Всего голосов 1: ↑1 и ↓0 +1
НЛО прилетело и опубликовало эту надпись здесь
Лучше давать ссылку на видео, презентация без него менее ценна: vimeo.com/channels/wstdays/47210831
Всего голосов 2: ↑2 и ↓0 +2
Спасибо за ссылку, в презентации нет мякотки на 39й минуте!
Комментарий пока не оценивали 0
Очень не люблю вот такой эффект:
image
Мой мозг не понимает, как может стол под листочком так изгибаться, особенно если рядом ещё такой же листок с такой же тенью.
Всего голосов 14: ↑9 и ↓5 +4
А мой мозг это воспринимает как немного приподнимающуюся бумажку.
Всего голосов 25: ↑22 и ↓3 +19
Если бы бумажка приподнималась, верхний горизонтальный край и нижний горизонтальный край были бы изогнутыми.
Всего голосов 4: ↑2 и ↓2 0
Они и КАЖУТСЯ визуально изогнутыми. Оптический обман конечно, но цель достигает.
Всего голосов 10: ↑9 и ↓1 +8
или
достигает цели
или
цель достигается
или
цель достигнута
Всего голосов 1: ↑1 и ↓0 +1
Просто некоторые дизайнеры перебарщивают и рисуют слишком массивные тени, имитируя сильный изгиб. Тогда да, мозг немного спотыкается. А с легенькими теньками «только чтобы подчеркнуть» вполне нормально.
Вот в примере, имхо, тень тоже немножко избыточна — если говорить о реальном проекте. Для демки преувеличение полезно.
Всего голосов 2: ↑2 и ↓0 +2
Мне тоже это кажется крайне низкосортным эффектом.
Всего голосов 5: ↑3 и ↓2 +1
Стоит также отметить, что для одиночных тегов, не содержащих в себе контент, псевдоэлементы особо не поюзаешь. Т.е. всякого рода img, input, br пролетают
Всего голосов 6: ↑6 и ↓0 +6
Разве? В браузерах на основе Webkit это уже вроде как не новость…
Комментарий пока не оценивали 0
НЛО прилетело и опубликовало эту надпись здесь
Ну оно-то ясно, что многие штуки будут работать в последних вебкитах и опере, возможно в ФФ, но это на уровне прототипов. На коммерческих и клиентских проектах все равно не получится использовать.
Комментарий пока не оценивали 0
НЛО прилетело и опубликовало эту надпись здесь
Можно, но с костылями для ИЕ, потому что ряд примеров даже девятка неадекватно отображает :\

Комментарий пока не оценивали 0
bottombottom: 40px;
впервые вижу такое…
Или лыжи не едут или я…!
Всего голосов 2: ↑2 и ↓0 +2
Сорри за оффтоп, а что за шрифт на рисунках?
Комментарий пока не оценивали 0
похоже на PF Din
Комментарий пока не оценивали 0
Кстати, картинки можно вставлять не только как background, но и напрямую:
content: url('image.png');
Всего голосов 4: ↑4 и ↓0 +4
Так же стоит упомянуть, что на псевдоэлементы нельзя вешать события, т.к. они не являются частью DOM.
Всего голосов 1: ↑1 и ↓0 +1
Важное замечание: если указать для :before или :after ширину/высоту в процентах (и не забыть display:block), то за 100% принимается размер блока, к которому этот псеводэлемент относится. Таким образом например можно например накладывать хитрые рамки и т.п.
Всего голосов 1: ↑1 и ↓0 +1
Если блок вложить в блок, то точно так и будет. Чем же псевдоблоки (в данном случае) должны отличаться?
Комментарий пока не оценивали 0
Ничем, но вообще штука неочевидная. При этом очень полезная при наложении всяких рамок, кромок, подписей (right: 20%; bottom: 15%) и т.п.
Комментарий пока не оценивали 0
Если понимать как все это дело устроенно, то вполне очивидная сия шука, ибо данные псевдоэлементы добавляются внутрь элемента, следовательно, они ведут себя так же, как и обычные элементы, вставленные внутрь блока, за исключением всяких ошибок браузров (к примеру, у браузеров на основе движка Webkit не работает анимация указанных псевдоэлементов по средством CSS).

Пример
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Example</title>
		<style>
			#d1{
				width:300px;
				height:300px;
				background-color:red;
			}
			#d2{
				width:100%;
				height:100%;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2"></div>
		</div>
	</body>
</html>

и
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Example</title>
		<style>
			#d1{
				width:300px;
				height:300px;
				background-color:red;
			}
			#d1::before{
				content:'';
				display:block;
				width:100%;
				height:100%;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
	</body>
</html>

Визуальной разницы нет.
Всего голосов 1: ↑1 и ↓0 +1
Ну это именно что нужно знать, что это вложенные элементы, а не предшествующие/последующие. Во втором случае 100% относилось бы к родителю.
Более того, нужно знать, что это не просто «написано в стандарте», а действительно выполняется во всех браузерах.
При том что 90% комментируемой статьи — это «вода водянистая состоит в-основном из воды», упомянуть о таком поведении как минимум не мешало бы.
Комментарий пока не оценивали 0
Дык, давно уже есть статья с CSS-Tricks. Просто автору посчастливилось перевести не ту статью… Ну а если без иронии, то спецификация + фантази решает все и вся ;).
Всего голосов 1: ↑1 и ↓0 +1
Автор смотрю все замечания проигнорил. Молодец!
Всего голосов 5: ↑4 и ↓1 +3
Если указан float, то display:block не нужен
Комментарий пока не оценивали 0
для обычных span тоже? это где-то в спецификации?
Комментарий пока не оценивали 0
А «необычное» это что? Div или p? Ну им display:block тем более не нужен. Float делает элемент блочным.
http://docs.webplatform.org/wiki/css/properties/float
With a value of left or right, the object is treated as block-level—that is, the display property is ignored.
Всего голосов 1: ↑1 и ↓0 +1
Да, спасибо, это интересно. Обычный — в плане реально созданный span, а не созданный как псевдоэлемент
Комментарий пока не оценивали 0
Редко где пишут, но ::before и ::after не работает с «открытыми» тэгами, типа img.
Комментарий пока не оценивали 0
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Разблокировать темную тему

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr