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

[GetWindowsDirectory]

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

[bobrovnikov]

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

[pandas]

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

[bogi]

больше примеров на эту тему для начинающих можно найти вот тут: 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]

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

[Softlink]

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

[bobrovnikov]

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

[spmbt]

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

[kyrie]

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

[Finom]

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

[Shums]

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

[shimapa23]

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

[bobrovnikov]

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

[SLIDERWEB]

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

[bobrovnikov]

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

[SLIDERWEB]

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

[despoth]

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

[bobrovnikov]

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

[Nico_izo]

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

[This_man]

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

[bobrovnikov]

May the Force be with you!

[Elfet]

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

[romy4]

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

[tetrapak07]

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

[bobrovnikov]

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

[XAMelleOH]

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

[beavis_1]

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

[Nico_izo]

К слову, если уж добиваться относительной кроссбраузерности, стоит добавить свойства
-ms-transition: .5s opacity;
-khtml-transition: .5s opacity;

[homm]

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

[bobrovnikov]

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

[homm]

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

[bobrovnikov]

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

[liquidautumn]

compass поможет

[bobrovnikov]

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

[Alexufo]

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

[bobrovnikov]

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

[kolyuchii]

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

[Allen]

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

[yui_room9]

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

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

[alexpogodin]

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

[annsar_012]

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

[f0rmat1k]

habrahabr.ru/blogs/css/111658/

[zorba_buddha]

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

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

[lashtal]

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

[zorba_buddha]

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

[maxvipon]

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

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