В интернете много решений, я попробовал, наверное, все :) Основная проблема — не удаётся достичь кросс-браузерности. Как всегда, отличился IE.
Все записи категории ‘Танцы с CSS’
1 Ноя, 2015
Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений можно придумать много : везде, где мы имеем две одинаковые картинки, одна из которых — «до», а вторая «после». Можно, конечно, просто выложить начальное и конечное изображение рядом. Но мне пришла в голову следующая идея (видимо, где то подсмотрел).
Мы наложим две картинки друг на друга и специальным разделителем как ширмой будем открывать то одну, то другую из картинок. Так они займут вдвое меньше места, а их сравнение будет более наглядным.
Виджета у меня пока нет, давайте его сварганим.
26 Окт, 2015
Одна из типичных задач для улучшения пользовательского интерфейса на сайтах — это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай — это обновление части шаблона, используя ajax. В конце рассмотрим дополнительно менее распространенный случай — визуализацию в контейнере при ожидании загрузки картинки браузером.
23 Окт, 2015
В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). Например, с помощью подключения класса (css), который описывает эффект, или установить как анимацию HTML элемента по умолчанию. Всё в ваших руках, я покажу лишь пример.
21 Окт, 2015
Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, добавить динамики. Я не буду использовать скрипты, эффект работает на CSS3.
Читать далее »
19 Окт, 2015
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
19 Сен, 2015
Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать!
17 Сен, 2015
Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы.
16 Сен, 2015
Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, основной контент и т.п.) можно сделать адаптивной ширины, менять их положение, скрывать при достижении определенных размеров. Как быть с картинками, которые всегда имеют конкретный фактический размер?
14 Сен, 2015
Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт.
Одна из таких задач, которая нередко возникают при верстке сайтов, желание заказчика «прибить» футер шаблона к нижнему краю окна браузера. Иначе, когда на странице мало контента, нижняя часть шаблона (футер) болтается как одна субстанция в проруби.
Дальше я показываю целых три способа как разместить футер у нижнего края экрана.