От автора: несколько месяцев назад я нагло украл идею Чарли Глисона (Charlie Gleason). В его презентации на MelbJS за текстом на многих слайдах были показаны полноэкранные анимированные GIF’ы (в том числе его собственного лица) в оттенках серого. Я обнаружил, что он усердно отредактировал и оптимизировал каждый GIF в Photoshop’е, чтобы те хорошо смотрелись за текстами слайдов.
Мне захотелось сделать то же самое, но не занимаясь таким трудом.
От автора: набор экспериментальных эффектов появления модальных окон с помощью переходов и анимации CSS.
Сегодня мы хотим поделиться с вами идеями эффектов модальных окон. Они предлагают бесконечные возможности переходов появления диалоговых блоков, и мы хотели бы подсказать вам некоторые мысли о том, как показывать диалоги, и немного подстегнуть ваше воображение.
Идея состоит в необходимости кнопки запуска (или любого другого элемента), которая при щелчке заставит появиться модальное окно, применив простой переход (или анимацию).
От автора: в предыдущем уроке мы с Вами сверстали макет, удовлетворяющий двум необходимым требованиям – колонки должны иметь одинаковую высоту и футер должен быть прижат к низу, если на странице мало контента.
Шаблон мы сверстали, используя возможности табличной верстки. В этом уроке мы сверстаем абсолютно идентичный шаблон, но уже с использованием блочной верстки.
От автора: мозг – это мышца, и как все мышцы, требует регулярных упражнений для сохранения остроты, вот почему я решил взять очень старую, но действенную методику веб-оптимизации и выполнить ее новым, сумасшедшим способом. Вы наверняка слышали о загрузке изображений (и других ресурсов) по запросу – что является не только здравомыслящим решением, но и хорошим способ ускорить исходную загрузку страницы. Обычно он выполняется посредством JavaScript, но сегодня я поделюсь с вами, как добиться того же эффекта с помощью чистого CSS.
От автора: анимация CSS очень интересна; ее красота состоит в том, что с помощью множества простых свойств можно сделать что угодно от элегантного плавного проявления до очень красивых эффектов. Одно из средств CSS, находящееся где-то в промежутке между ними – это эффект переворота CSS, где при этом на обеих сторонах контейнера, как с лицевой, так и изнаночной, имеется контент. Этот учебник покажет вам, как легко и просто создать его.
От автора: Кристиан Хайлманн (Christian Heilmann) из Mozilla – это ярый миссионер, который умеет и сказать, и подтвердить свои слова. В своем блоге и великолепном Mozilla Hacks он часто создает отличные демо-примеры . Одна из моих любимых штучек от Кристиана – это не демо, а используемый у него в блоге эффект 3D боковой колонки. Я решил препарировать ее, чтобы показать вам, как он это делает!
От автора: так много новых направлений, усовершенствуется каждый год, что совсем нелегко поспевать за индустрией. Дизайнеры вебсайтов и разработчики пользовательских интерфейсов глубоко прониклись новейшими свойствами CSS3, устанавливая максимальную браузерную поддержку и находя необычные хаки. Но все еще существуют не получившие должного внимания великолепные фрагменты кода CSS2.
От автора: атрибут alt внутри тэга img обеспечивает альтернативный контент для пользователей, которые не могут скачивать изображения, или тех, у кого они отключены. Мы все время пользуемся этим атрибутом, чтобы сделать свой контент более доступным, но вы задумывались когда-нибудь, как на самом деле это смотрится?
От автора: творческие эксперименты с применением анимации и переходов к псевдоэлементам для создания интересных эффектов.
Сегодня мы собираемся поэкспериментировать с анимацией и переходами применительно к псевдоэлементам (:before и :after) и раскрыть их потенциал. Мы немного поговорим об анимации псевдоэлементов и рассмотрим четыре примера, где применяются специальные техники достижения многих эффектов. Сначала давайте рассмотрим преимущества и недостатки применения к псевдоэлементам анимации и переходов.
От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» — набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.
Все права защищены © 2025
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2013-08-23