How to become an author
Search
Write a publication
Pull to refresh

Comments 60

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

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

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

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

Здесь та же ошибка(
Total votes 5: ↑5 and ↓0+5
При это, в оригинале сказано правильно, но в здесь ошибка, статья хороша, а перевод вольного качества :-(
This comment wasn’t rated yet0
К сожалению, это нормально работает только в последних версиях Firefox.

Проблему с транзишенами уже решил Роман Комаров: kizu.ru/en/pseudos/
Total votes 2: ↑2 and ↓0+2
Очень спасибо. Может еще?
This comment wasn’t rated yet0
Ну да, не решил, а обошёл, и не для всех свойств. Но пока есть баги вне ФФ — этим вполне можно пользоваться, если хочется сделать что-то здесь и сейчас.
Total votes 2: ↑2 and ↓0+2
И в этом вы правы. И, да, спасибо за ваши эксперименты и желание научить эксперементировать других ;).
Total votes 1: ↑1 and ↓0+1
transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;
Почему свойства с префиксами идут в конце? Чему вы молодёжь учите?
Total votes 15: ↑14 and ↓1+13
Посмотрел слайды. Не понял, почему нужно писать иначе. Пример с тенью еще больше запутал — почему так?
Если не трудно, поясните, пожалуйста.
Total votes 2: ↑1 and ↓10
Потому что, в случае, если свойство уже реализовано во всех браузерах и работает без префикса, но при этом в коде префикс идёт последним, то браузер сделает примерно так:

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

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

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

This comment wasn’t rated yet0
bottombottom: 40px;
впервые вижу такое…
Или лыжи не едут или я…!
Total votes 2: ↑2 and ↓0+2
Сорри за оффтоп, а что за шрифт на рисунках?
This comment wasn’t rated yet0
Кстати, картинки можно вставлять не только как background, но и напрямую:
content: url('image.png');
Total votes 4: ↑4 and ↓0+4
Так же стоит упомянуть, что на псевдоэлементы нельзя вешать события, т.к. они не являются частью DOM.
Total votes 1: ↑1 and ↓0+1
Важное замечание: если указать для :before или :after ширину/высоту в процентах (и не забыть display:block), то за 100% принимается размер блока, к которому этот псеводэлемент относится. Таким образом например можно например накладывать хитрые рамки и т.п.
Total votes 1: ↑1 and ↓0+1
Если блок вложить в блок, то точно так и будет. Чем же псевдоблоки (в данном случае) должны отличаться?
This comment wasn’t rated yet0
Ничем, но вообще штука неочевидная. При этом очень полезная при наложении всяких рамок, кромок, подписей (right: 20%; bottom: 15%) и т.п.
This comment wasn’t rated yet0
Если понимать как все это дело устроенно, то вполне очивидная сия шука, ибо данные псевдоэлементы добавляются внутрь элемента, следовательно, они ведут себя так же, как и обычные элементы, вставленные внутрь блока, за исключением всяких ошибок браузров (к примеру, у браузеров на основе движка 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>

Визуальной разницы нет.
Total votes 1: ↑1 and ↓0+1
Ну это именно что нужно знать, что это вложенные элементы, а не предшествующие/последующие. Во втором случае 100% относилось бы к родителю.
Более того, нужно знать, что это не просто «написано в стандарте», а действительно выполняется во всех браузерах.
При том что 90% комментируемой статьи — это «вода водянистая состоит в-основном из воды», упомянуть о таком поведении как минимум не мешало бы.
This comment wasn’t rated yet0
Дык, давно уже есть статья с CSS-Tricks. Просто автору посчастливилось перевести не ту статью… Ну а если без иронии, то спецификация + фантази решает все и вся ;).
Total votes 1: ↑1 and ↓0+1
Автор смотрю все замечания проигнорил. Молодец!
Total votes 5: ↑4 and ↓1+3
для обычных span тоже? это где-то в спецификации?
This comment wasn’t rated yet0
А «необычное» это что? 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.
Total votes 1: ↑1 and ↓0+1
Да, спасибо, это интересно. Обычный — в плане реально созданный span, а не созданный как псевдоэлемент
This comment wasn’t rated yet0
Редко где пишут, но ::before и ::after не работает с «открытыми» тэгами, типа img.
This comment wasn’t rated yet0
UFO just landed and posted this here
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr