Javascript & Ajax \ Javascript

Параллакс-скроллинг изображений при помощи CSS 3D и JavaScript

От автора: эффекта параллакс-скроллинга можно добиться множеством способов, однако я считаю, что большая их часть лишь имитирует глубину изображения. Взглянув на скринсейвер с OS X, я понял, что CSS 3D позволяет по-настоящему сместить изображения на задний план по оси Z, создавая настоящую перспективу и параллакс-эффект во время прокрутки изображений вверх и вниз.

Читать далее

Верстка \ CSS 3

Как подобрать правильный набор CSS инструментов и фреймворки

От автора: вопросы и ответы по фреймворку Susy и другим инструментам с Мириам Сюзанн. Мириам – сооснователь OddBird, а также автор книги Jump Start Sass на сайте SitePoint. Она является создателем фреймворка Susy, а также активно поддерживает другие инструменты и проекты с открытым исходным кодом.

Читать далее

Верстка \ CSS 3

8 трюков с функциями в CSS

От автора: CSS способен на гораздо большее, чем многие веб-разработчики полагают. С каждым годом язык разметки стилей становится все мощнее и мощнее, создавая новый функционал в браузерах, который раньше можно было реализовать только через JS. В этой статье мы рассмотрим 8 трюков с функциями CSS, которые совсем не требуют JS.

Читать далее

Верстка \ CSS 3

Основы анимации: понятие частиц

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

Читать далее

Верстка \ CSS 3

Редактирование изображений в CSS: смешение техник

От автора: в предыдущих двух уроках этой серии мы узнали, как фильтры и режимы наложения могут полностью изменить изображения. В этом же уроке я расскажу про основные моменты редактирования изображений css обоими способами.

Читать далее

Верстка \ CSS 3

Принудительное выделение блока с текстом

От автора: вы когда-нибудь сталкивались с такой ситуацией, когда текст размещают в полях формы textarea или input для упрощения выделения всего блока? У таких полей формы есть свои границы выделения, т.е. можно кликнуть внутри этой границы и выделить весь текст поля. Есть CSS свойство, позволяющее делать то же самое без необходимости задействовать несемантические поля формы.

Читать далее

Верстка \ CSS 3

Как создать легкие фоновые рисунки для Retina экранов с помощью функции image-set

От автора: относительно экранов с высоким DPI обычные изображения довольно хорошо работают в HTML5 и CSS. Поддержка тега picture и атрибутов srcset и sizes также довольно обширна. Однако фоновых изображений для ретина дисплеев прогресс не коснулся. Такие фоновые изображения зачастую очень большие (как в пикселях, так и по весу), и это негативно на них сказывается. На протяжении довольно долгого времени нам был доступен промежуточный метод решения данной проблемы, но сейчас появился способ куда лучше.

Читать далее

Верстка \ CSS 3

Красивые и уникальные снежинки: как работать с селектором :only-of-type

От автора: селектор only-of-type является логическим продолжением CSS селекторов empty и only-child. Данный селектор выбирает один экземпляр конкретного элемента в определенном контексте.

Читать далее