От автора: Время от времени я ставлю себе задачи по разработке, которые могут быть не вполне реалистичными, для того, чтобы увидеть смогу ли я их выполнить. Это помогает мне расти как разработчику, по двум причинам – мне нужно проявлять творческий подход и потому, что это, как правило, требует каких-то исследований. Сегодня задача стоит: создать ленточный баннер на чистом css и html. Никаких картинок.
Создание панорам и прокрутка фона с использованием элемента canvas
От автора: Я собираюсь создать простую 2D игру на чистом JavaScript. Для первого шага я хочу показать, как анимировать (панорамировать или прокручивать) фоновое изображение, используя элемент canvas. Я также собираюсь показать основной код, необходимый для создания цикла, в котором мы сможем прорисовывать кадры.
От автора: Веб-сайт Карла Филипа Бреннена (Carl Philipe Brenner) отличается очень креативной и изящной анимацией, и сегодня мы собираемся разобраться, как воссоздать эффект анимации рамки, применив к линиям SVG переходы CSS.
Сегодня мы хотели бы разобраться в очень тонком, но интересном эффекте анимации рамки, которую можно видеть на креативном вебсайте Карла Филипа Бреннера (Carl Philipe Brenner). При проведении мышью над одним из белых элементов сетки портфолио вы увидите изящную анимацию: элемент сетки становится прозрачным, а линии рамки с каждой стороны начинают анимацию по часовой стрелке, создавая действительно красивый эффект. В данном случае он получается путем анимации ширины или высоты нескольких тегов span с помощью JS. Мы опробуем другой подход, применяющий SVG и переходы CSS. Пожалуйста, помните, что эта техника очень экспериментальна.
От автора: CSS используется на веб-странице многими способами и до сих пор работает. Так как методов его применения огромное количество, то существует и множество разных настроек CSS.
Неважно, каким образом он установлен на страницах – CSS обязан помочь отображаться странице быстрее, а не тормозить отрисовку страницы.
От автора: одним из неотъемлемых элементов практически любого сайта, наверное, является галерея. Ее обязательно можно видеть на сайте-портфолио и даже во множестве экземпляров. Она часто необходима для блога, интернет-магазина, корпоративного сайта и т.д.
В цикле из нескольких уроков мы с вами будем создавать несложную, но вместе с тем привлекательную галерею.
От автора: Несколько простых и изобретательных стилей наложения и эффектов. От выскальзывания оверлея в окно просмотра до применения фигур-трансформеров SVG – исследуем эффекты полноэкранных наложений.
Сегодня мы хотели бы поделиться с вами идеями стилей и эффектов полноэкранного наложения. Как это происходит со всяким компонентом пользовательского интерфейса, появляются новые течения и стили, и мы хотели бы опробовать некоторые искусные и необычные эффекты оверлеев. Их особенностью является то, что у этих наложений нет фиксированного размера, как у модальных окон – они занимают весь экран, так что при создании эффектов приходится принять данный факт во внимание и постараться не переусердствовать. Но это не значит, что запрещено баловаться и применять свежие интересные эффекты – например, фигуры-трансформеры SVG.
От автора: Назначение стилей внешним ссылкам – обычное дело для большинства информационных сайтов вроде Wikipedia. Пользователю нужно понимать, когда его отсылают на другой ресурс. У многих сайтов проверка внешних ссылок происходит на серверной стороне, при этом к ним добавляется значение атрибута rel=external или класс external. В некоторых случаях это невозможно или ненужно. Прогулявшись по «паутине», я обнаружил следующие полезные фрагменты CSS для назначения стилей внешним ссылкам.
От автора: Учебник о том, как создать круговую навигацию с помощью преобразований CSS.
В этом учебнике я собираюсь показать вам, как при помощи преобразований CSS создать круговую навигацию. Я проведу вас по этапам создания нужных стилей и объясню стоящую за ними математику (фу-у-у!) и простую логику, чтобы у вас сложилось ясное понимание этой методики. Как я уже говорил, при создании этих стилей задействуется немного базовой математики наряду с преобразованиями CSS. Но не беспокойтесь, математика на самом деле очень простая и я буду ее пошагово объяснять.
От автора: Несомненно, в качестве разработчика пользовательского интерфейса вы постоянно пользуетесь HTML и, может быть, думаете, что в нем для вас не осталось ничего неизведанного. Тем не менее, его развитие (особенно при наступлении эры HTML5) иногда способно удивлять. В этой статье я покажу вам 10 тэгов HTML, которыми вы, может быть, не пользуетесь, и даже не знаете, как они помогают улучшить семантику и сопровождаемость ваших веб-страниц.
От автора: С помощью всего трех строк CSS (исключая вендорные префиксы) и transform: translateY можно выровнять по вертикали все, что угодно, даже не зная высоты элемента. Из этой статьи вы узнаете, как выровнять по вертикали что угодно с помощью трех строк CSS.
Все права защищены © 2025
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2014-04-18