Записи, помеченные ‘урок верстка’
-
Создание вытягиваемого бокового меню для веб-сайта
В этом уроке мы расскажем, как создать боковое меню, такое, как у приложений для смартфона, но для веб-сайта. Мы опишем, как шаг за шагом создать меню, пригодное как для компьютеров, так и для смартфонов, начиная от структуры разметки и заканчивая добавлением эффекта вытягивания при открытии и закрытии меню.
Далее... 33 Комментариев » -
Создаем меню с нестандартными шрифтами на CSS3 и jQuery
В этом уроке мы создадим полностраничное меню с нестандартными шрифтами, у которого есть некоторые особенности. Когда пользователь наводит указатель мыши на пункты меню, мы передвигаем полоску, выделяющую активный пункт, чтобы подсветить его и вывести дополнительную информацию. Смотрите демонстрацию и повторяйте урок!
Далее... 1 Комментарий » -
Оформляем текст с использованием CSS3
Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.
Далее... 2 Комментариев » -
Социальные закладки на бельевой веревке при помощи CSS
Сегодня мы создадим забавные социальные закладки, которым не требуется JavaScript, так как они основаны на чистом CSS. Мы повесим повернутые уменьшенные изображения социальных закладок на бельевую веревку и посадим на нее милую птичку Twitter. Это просто пример, и, конечно, вы можете добавить любые социальные закладки, которые подойдут для вашей страницы. Это решение демонстрационное, и оно может показаться кому-то [...]
Далее... 1 Комментарий » -
Создание плиточной анимации при помощи CSS и jQuery
Приложения сервиса Google Plus для iPhone и Android устройств многим кажутся очаровательными. Все изменения в них происходят плавно, но не в ущерб производительности. Плиточная анимация, происходящая при прокручивании ленты новостей, делает еще более приятной прокрутку страницы. Разве не здорово было бы реализовать такую анимацию на вашем веб-сайте?
Далее... 1 Комментарий » -
Выезжающий поверх страницы блок сообщений при помощи CSS и jQuery
В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку jQuery, которая заставит появляться накрывающий слой и выезжать из верхнего края страницы блок сообщений. Посмотрите демонстрацию работы по ссылке.
Далее... 11 Комментариев » -
Создание трехмерной интерактивной галереи с использованием CSS и jQuery
В этом уроке мы покажем шаг за шагом, как создать прекрасную трехмерную интерактивную галерею, используя только CSS3 и jQuery. На создание этого урока автора вдохновил веб-сайт Tapmates. В этом уроке мы добавим интересные взаимодействия, которые могут быть применены к чему угодно, начиная от веб-сайта, основанного на изображениях, и заканчивая портфелем с образцами выполненных вами работ. [...]
Далее... 2 Комментариев » -
Три забавных метода оформления текста с использованием Lettering.js
Так как использование плоского дизайна начало набирать все большую популярность, на замену подхода в стиле скевоморфизма приходит наименее тяжелое оформление текстов. Сегодня мы покажем, как оживить ваш веб-сайт с плоским дизайном, применив забавные методы оформления текстов, используя Lettering.js — очень полезный инструмент, который возвращает контроль над оформлением текстов.
Далее... 5 Комментариев » -
Меню с выезжающими изображениями при помощи CSS и jQuery
В этом уроке мы покажем, как создать необычное меню. Если навести на него указатель мыши, появятся уменьшенные изображения. Уменьшенные изображения выезжают сверху, и, когда указатель мыши покидает область ссылки меню, они уезжают назад под элемент ссылки. Это создает эффект перетасовки карт.
Далее... 1 Комментарий »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191