bobrovnikov Oct 26 2011 at 20:36

SITH — техника CSS3 для плавной смены изображения

2 min

17K

CSS*

From sandbox

+98

Comments 48

GetWindowsDirectory Oct 26 2011 at 20:53

Извините, но ничего сверхъестественного. Если бы мне надо было так сверстать, то сделал бы не задумываясь.

+31

bobrovnikov Oct 26 2011 at 21:02

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

+20

pandas Oct 26 2011 at 21:30

Да, огромное спасибо!
Пост действительно полезен! Буду внедрять технику плавной смены! В избранное!

bogi Oct 27 2011 at 01:28

больше примеров на эту тему для начинающих можно найти вот тут: css3.bradshawenterprises.com/cfimg/

а transition лучше описать вот так:

-webkit-transition: .5s opacity;
~~-khtml-transition: .5s opacity;~~
-moz-transition: .5s opacity;
-ms-transition: .5s opacity;
-o-transition: .5s opacity;
transition: .5s opacity;

bobrovnikov Oct 27 2011 at 08:15

Очень полезная ссылка, спасибо.

Softlink Oct 27 2011 at 21:07

Да не так уж и редко.
Совсем недавно соорудил слайдер alpatriott.ru/works/slider/ для одного проекта. По точно такому же сценарию. Хотел было тоже статью написать, да подумал, что слишком просто все, для того чтобы посвятить этому топик. А в комментариях, пожалуй, можно написать о нем.

bobrovnikov Oct 27 2011 at 22:33

Качественная работа.

spmbt Oct 26 2011 at 21:32

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

kyrie Oct 27 2011 at 00:33

Есть нюанс с позишн абсолют — его далеко не в каждом проекте можно применить, иногда жизненно необходим релетив. Тогда нужно будет с марджинами отрицательными поколдовать. А еще можно сделать сплайн из покадровой анимации, это сложнее но более надежно в плане крос-браузерности.

Finom Oct 27 2011 at 00:40

Может быть статья и имеет некоторую ценность, но давать пафосное название этому эффекту — перебор.

+14

Shums Oct 27 2011 at 12:24

ничего сверхестественного, но на текущий момент в закладки занесли уже 255 человек)

UFO just landed and posted this here

shimapa23 Oct 26 2011 at 21:01

Лично мне эта статья показалась полезной! Спасибо!

bobrovnikov Oct 26 2011 at 21:03

Благодарю! Надеюсь увидеть применение этой техники на следующем Вашем проекте!

-1

SLIDERWEB Oct 26 2011 at 21:25

Как удачно, а я уже было чуть не начал писать решение на js.

bobrovnikov Oct 26 2011 at 21:41

Единственный минус данного подхода в том, что он полагается на использование свойства transition из CSS3.
Причём это свойство пока требует подстановки префиксов (-webkit-, -moz-, -o-), и в данный момент недоступен синтаксис, указанный в спецификации консорциума Всемирной паутины. www.w3.org/TR/css3-transitions/

SLIDERWEB Oct 26 2011 at 22:56

Это да, но для дизайн-проекта (чтобы показать) — достаточно. С другой стороны — количество кода на JS сравнимо, а то и меньше, нежели данный CSS.

despoth Oct 26 2011 at 21:39

Одобрения не вызовет ситхов упоминание в метода названии. Возмущение Силы может вызвать название это.

+25

bobrovnikov Oct 27 2011 at 16:33

Война клоническая началась.

Nico_izo Oct 26 2011 at 21:40

Ещё один топик о том, как использовать CSS3 transition.

This_man Oct 26 2011 at 22:02

Спасибо, пригодится. Кстати прочитав SITH сразу Звездных Войн вспомнил.

bobrovnikov Oct 26 2011 at 22:04

May the Force be with you!

Elfet Oct 26 2011 at 22:03

Не могу удержаться =)))
Акционер: chemica.ru/about

+24

romy4 Oct 26 2011 at 22:35

Странный сайтец у молодых господинов. По крайней мере можно читать и просматривать весь, даже записи под «ограниченный доступ».

tetrapak07 Oct 26 2011 at 23:21

Это не у вас случайно некий Павел Д. идею сп...?

bobrovnikov Oct 26 2011 at 23:29

Павел Д.? Нет, не слышал.

XAMelleOH Oct 27 2011 at 11:43

На самом деле, если парнишка в 17 лет сам все сделал (он ведь и разработчик и дизайнер) — то вышло на очень добротном уровне!

beavis_1 Oct 26 2011 at 22:15

Выглядит приятно. Надо будет куда-нибудь приспособить.
Жалко, что не получается в голове держать всё это множество различных примочек :)

Nico_izo Oct 26 2011 at 22:24

К слову, если уж добиваться относительной кроссбраузерности, стоит добавить свойства

-ms-transition: .5s opacity;

-khtml-transition: .5s opacity;

homm Oct 26 2011 at 22:29

К слову, если уж добиваться кроссбраузерности, стоит добавить свойство:
transition: .5s opacity;
Так и хочется спросить, доколе?

bobrovnikov Oct 26 2011 at 22:55

Ждём, когда такой синтаксис будет работать. Пока что без префиксов никак.

homm Oct 26 2011 at 23:00

А дождавшись будете на всех проектах ходить менять? Что-то я сомневаюсь, скорее всего забъете, а пользователям будущих браузеров сосать лапу прикажете.

bobrovnikov Oct 26 2011 at 23:26

Поменять не так трудно, Вы явно драматизируете. Главное — не забыть.
И новые браузеры ведь не сразу сбросят поддержку первоначального префиксного синтаксиса при появлении каноничного варианта.

-5

liquidautumn Oct 27 2011 at 12:56

compass поможет

bobrovnikov Oct 26 2011 at 22:49

Спасибо, добавил.

Alexufo Oct 26 2011 at 22:41

я бы сделал секвенцию в фотошопе, а сриптом бы менял background-position для лучшей совместимости.

bobrovnikov Oct 26 2011 at 22:54

Неплохой вариант, в таком случае во всех браузерах с включённым javascript работало бы одинаково. Но это уже не CSS3. Буду рад видеть Ваш топик о кросс-браузерном решении.

kolyuchii Oct 27 2011 at 00:19

Вот как раз и пример подоспел:
www.microsoft.com/ru-ru/events/html5camp/
Поводите по соц. иконкам.

Allen Oct 26 2011 at 23:06

Пока что старый вариант без анимации выглядит естественнее. А в вашем вариатне картинка затемняется целиком, а потом из темноты выплывает иконка. Надо поиграть со скоростью трансформации обоих цветов. Хотя тут будет зависимость как от значений первоначальных цветов так и от гаммы монитора

UFO just landed and posted this here

yui_room9 Oct 27 2011 at 00:29

Ну чтож вы так, давайте ещё и про keyframe animation на Css расскажите, и назовём это SETH например?
Или нет давайте лучше сразу про webkit-apperance и смену дефолтных форм полностью, а название ну пускай будет SHITH :)

Смысл то обычныую анимацию выдавать за новую идею?
Раньше делали на JS теперь можно на Css дак это не новость, года так 2-3 уже, а ещё если что можно на Css и трёхмерную анимацию делать.

alexpogodin Oct 27 2011 at 01:05

Одному мне что ли не нравится использование тега <b> внутри, вместо использования ::before псевдо-элемента? Перестаньте использовать эти недотеги как затычки в каждой щели, только потому что они короткие! На вас же смотрит молодежь!

+14

annsar_012 Oct 27 2011 at 13:34

CSS3 анимация не работает для псевдоэлементов в Хроме.

f0rmat1k Oct 27 2011 at 08:25

habrahabr.ru/blogs/css/111658/

zorba_buddha Oct 27 2011 at 10:26

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

А ваша «новая» технология не представляет из себя ничего нового, скорее наоборот — вы попытались другим объяснить то, что уже давно используется в вебе.

lashtal Oct 27 2011 at 14:33

Это.
Момент, когда цвета сливаются в один неприятен. И анимация пол-секунды — долго.
Кажется, вместо Soft в названии было бы правильнее сделать Smooth.

-1

zorba_buddha Oct 27 2011 at 14:35

Что-то типа того, да.
Контрастности не хватает в середине анимации.

maxvipon Oct 31 2011 at 14:12

Слишком долгий переход от одного состояния к другому, глаз успевает зацепится за данное действо. А если таких иконок несколько, мельтешенье ж получится на странице.

.25 глазу гораздо приятнее.

Show the best of all time