Comments 48
Извините, но ничего сверхъестественного. Если бы мне надо было так сверстать, то сделал бы не задумываясь.
+31
Я не сомневаюсь в Ваших способностях.
Данный приём мало где встречается. Надеюсь, что некоторым этот пост будет полезен.
Данный приём мало где встречается. Надеюсь, что некоторым этот пост будет полезен.
+20
Да, огромное спасибо!
Пост действительно полезен! Буду внедрять технику плавной смены! В избранное!
Пост действительно полезен! Буду внедрять технику плавной смены! В избранное!
0
больше примеров на эту тему для начинающих можно найти вот тут: css3.bradshawenterprises.com/cfimg/
а transition лучше описать вот так:
а transition лучше описать вот так:
-webkit-transition: .5s opacity;
-khtml-transition: .5s opacity;
-moz-transition: .5s opacity;
-ms-transition: .5s opacity;
-o-transition: .5s opacity;
transition: .5s opacity;
+7
Да не так уж и редко.
Совсем недавно соорудил слайдер alpatriott.ru/works/slider/ для одного проекта. По точно такому же сценарию. Хотел было тоже статью написать, да подумал, что слишком просто все, для того чтобы посвятить этому топик. А в комментариях, пожалуй, можно написать о нем.
Совсем недавно соорудил слайдер alpatriott.ru/works/slider/ для одного проекта. По точно такому же сценарию. Хотел было тоже статью написать, да подумал, что слишком просто все, для того чтобы посвятить этому топик. А в комментариях, пожалуй, можно написать о нем.
+1
Хорошо расписанный пример, несомненно, полезен, даже для тех, кто знает, как это делается. Одно дело — знать, что можно сделать, другое — увидеть работающий пример.
+3
Может быть статья и имеет некоторую ценность, но давать пафосное название этому эффекту — перебор.
+14
ничего сверхестественного, но на текущий момент в закладки занесли уже 255 человек)
+3
UFO just landed and posted this here
Лично мне эта статья показалась полезной! Спасибо!
+8
Как удачно, а я уже было чуть не начал писать решение на js.
0
Единственный минус данного подхода в том, что он полагается на использование свойства transition из CSS3.
Причём это свойство пока требует подстановки префиксов (-webkit-, -moz-, -o-), и в данный момент недоступен синтаксис, указанный в спецификации консорциума Всемирной паутины. www.w3.org/TR/css3-transitions/
Причём это свойство пока требует подстановки префиксов (-webkit-, -moz-, -o-), и в данный момент недоступен синтаксис, указанный в спецификации консорциума Всемирной паутины. www.w3.org/TR/css3-transitions/
0
Одобрения не вызовет ситхов упоминание в метода названии. Возмущение Силы может вызвать название это.
+25
Ещё один топик о том, как использовать CSS3 transition.
+2
Спасибо, пригодится. Кстати прочитав SITH сразу Звездных Войн вспомнил.
+1
Не могу удержаться =)))
Акционер: chemica.ru/about
Акционер: chemica.ru/about
+24
Странный сайтец у молодых господинов. По крайней мере можно читать и просматривать весь, даже записи под «ограниченный доступ».
0
Это не у вас случайно некий Павел Д. идею сп...?
+2
На самом деле, если парнишка в 17 лет сам все сделал (он ведь и разработчик и дизайнер) — то вышло на очень добротном уровне!
0
Выглядит приятно. Надо будет куда-нибудь приспособить.
Жалко, что не получается в голове держать всё это множество различных примочек :)
Жалко, что не получается в голове держать всё это множество различных примочек :)
0
К слову, если уж добиваться относительной кроссбраузерности, стоит добавить свойства
-ms-transition: .5s opacity;
-khtml-transition: .5s opacity;
+2
К слову, если уж добиваться кроссбраузерности, стоит добавить свойство:
Так и хочется спросить, доколе?
transition: .5s opacity;
Так и хочется спросить, доколе?
+6
Ждём, когда такой синтаксис будет работать. Пока что без префиксов никак.
0
А дождавшись будете на всех проектах ходить менять? Что-то я сомневаюсь, скорее всего забъете, а пользователям будущих браузеров сосать лапу прикажете.
+2
Спасибо, добавил.
0
я бы сделал секвенцию в фотошопе, а сриптом бы менял background-position для лучшей совместимости.
0
Пока что старый вариант без анимации выглядит естественнее. А в вашем вариатне картинка затемняется целиком, а потом из темноты выплывает иконка. Надо поиграть со скоростью трансформации обоих цветов. Хотя тут будет зависимость как от значений первоначальных цветов так и от гаммы монитора
+1
UFO just landed and posted this here
Ну чтож вы так, давайте ещё и про keyframe animation на Css расскажите, и назовём это SETH например?
Или нет давайте лучше сразу про webkit-apperance и смену дефолтных форм полностью, а название ну пускай будет SHITH :)
Смысл то обычныую анимацию выдавать за новую идею?
Раньше делали на JS теперь можно на Css дак это не новость, года так 2-3 уже, а ещё если что можно на Css и трёхмерную анимацию делать.
Или нет давайте лучше сразу про webkit-apperance и смену дефолтных форм полностью, а название ну пускай будет SHITH :)
Смысл то обычныую анимацию выдавать за новую идею?
Раньше делали на JS теперь можно на Css дак это не новость, года так 2-3 уже, а ещё если что можно на Css и трёхмерную анимацию делать.
+1
Одному мне что ли не нравится использование тега
<b>
внутри, вместо использования ::before
псевдо-элемента? Перестаньте использовать эти недотеги как затычки в каждой щели, только потому что они короткие! На вас же смотрит молодежь!+14
habrahabr.ru/blogs/css/111658/
+2
В примере так ужасно сменяются цвета, что хочется выколоть себе глаза. Уж лучше бы мгновенно цвета сменялись.
А ваша «новая» технология не представляет из себя ничего нового, скорее наоборот — вы попытались другим объяснить то, что уже давно используется в вебе.
А ваша «новая» технология не представляет из себя ничего нового, скорее наоборот — вы попытались другим объяснить то, что уже давно используется в вебе.
+4
Слишком долгий переход от одного состояния к другому, глаз успевает зацепится за данное действо. А если таких иконок несколько, мельтешенье ж получится на странице.
.25 глазу гораздо приятнее.
.25 глазу гораздо приятнее.
0
Sign up to leave a comment.
SITH — техника CSS3 для плавной смены изображения