Тысячи советов по CSS, PHP, скриптам. Полезные уроки и видео-советы

Слово «градиент» подразумевает переход от одного цвета к другому цвету. Это очень полезно в веб-дизайне и позволяет создавать прекрасные эффекты. Мы собираемся пропустить всю эту «переходную» часть и посмотреть, какие хитрости CSS это разблокирует ».

Идея состоит в том, чтобы создать вид слайд-шоу без карусели. Другими словами, мы делаем серию изображений слайдом слева направо и повторяем, как только будет достигнут конец изображений. Хитрость в том, что мы используем одно фоновое изображение с анимацией CSS для (…) "

Похоже, немного волшебства наблюдать, как фигура рисует себя в сети. Или как будто это встроенное видео. Но этого не должно быть! Фактически, с удивительно небольшим кодом и ужасно умной техникой, включающей штриховые штрихи и смещения, мы можем сделать это на любом пути SVG ».

Возможно, мой любимый трюк с CSS на все времена! В нем используются четыре слоистых фоновых градиента, которые показывают тени вверху и внизу контейнеров, которые прокручиваются, чтобы указать, что вы можете прокручивать в этом направлении. Это просто хороший UX, и даже больше, чем в 2012 году, когда он был изобретен, поскольку пользовательские интерфейсы без полосы прокрутки становятся все более и более распространенными ».

Когда хэш-ссылка используется на веб-сайте, страница прокручивается до позиции, где виден элемент, на который указывает ссылка. Но так ли это ясно? Иногда это раздражает и сбивает с толку. Желтая вспышка - это идея, чтобы на короткое время выделить связанный элемент, чтобы привлечь внимание к нему и разобраться в запутанной ситуации ».

К счастью, в наши дни у нас гораздо больше контроля над загрузкой шрифтов. Нам больше не нужно заставлять наших пользователей ждать загрузки шрифта, прежде чем показывать им текст, мы можем поменять его местами по мере загрузки шрифта. Но этот обмен может быть визуально грубым с большим количеством резких сдвигов и переформатирования. Но мы можем это исправить! "

Есть несколько способов анимировать или преобразовать одну фигуру в другую в Интернете. Я не говорю о вращении стрелки или увеличении галочки, я говорю о наблюдении, как фигура перемещает те самые точки, из которых она образована, в новые места ».

Есть способ создать индикатор выполнения, показывающий, как далеко пользователь прокрутил страницу (например, «индикатор прогресса чтения»), вообще без какого-либо JavaScript. Просто умное использование градиентов и позиционирования ".

Всем привет! Добро пожаловать в полную серию статей о создании мобильного сайта для первого художника с помощью WordPress. Это немного отличается от последней серии "

Смешное слово, правда? Это визуальный эффект, который заставляет элемент как бы покачиваться, покачиваться, покачиваться на месте, придавая ему непростое, но чрезвычайно уникальное ощущение ».

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

Из последнего видео мы знаем, что у нас есть пять основных моментов, которые следует учитывать при создании дизайна этого сайта. Мы будем держать их в голове как "

Автор: Крис Койер. Это сборник моих любимых приемов, с которыми я сталкивался за все время работы с этим сайтом. Большинство из них не мои собственные, а люди гораздо умнее меня. Здесь я демонстрирую их и объясняю трюк, как я это вижу. Хотя, возможно, некоторые из них больше (…) "

Мы начинаем с открытым файлом Photoshop. Довольно глупо выглядящий «вытянутый» снимок экрана iPhone, который просто сначала дает нам холст в мобильном телефоне »

У нас есть «заголовок» дизайна, нам просто нужно разобраться с остальной частью страницы. У нас есть список самых важных целей, которые мы пытаемся достичь »

Мы хотим работать локально, работая над этим проектом. Всего несколько причин: это быстро. Мы можем работать офлайн из любого места. Мы работаем над полным "

Мы в процессе урезания нашей темы WordPress примерно до минимума, насколько это возможно. Нас не беспокоит дизайн, к которому мы стремимся ",

Мы выбрали Proxima Nova в качестве основного шрифта, который будет использоваться для сайта Джеффа. В наши дни это чертовски популярно, но отлично смотрится с работами Джеффа. Простой,"

Мы скоро перестанем смотреть здесь на старый сайт. Это последний раз! Теперь, когда у нас есть подходящая локальная среда разработки, мы планируем предоставить "

В этом скринкасте мы видим, что CodeKit начинает смотреть наш проект. Это значительно упрощает множество задач разработчика. Первое, что мы делаем, это делаем "