Lecaw

Учимся создавать Web-сайты

Главная - Lecaw

Как-то раз, один из наших читателей спросил меня – а что если сгенерировать радиальный градиент на html5 вместо того, чтобы использовать готовые изображения. Это не так трудно и это было бы полезно для всех. Основная идея состоит в том, чтобы разделить круг на многократные секторы и заполнить эти секторы радиальным цветом (который зависит от угла).

В последнее время нам часто стали задавать вопрос – как загрузить фотографии на веб-сайт. Мне кажется, что это интересный вопрос, и я решил поэкспериментировать с этим. Я думаю, что просто загрузка файлов это скучная тема, поэтому я решил добавить интересную опцию – Обрезка. Кроме того мы будем использовать HTML5 FileReader, чтобы выполнить обрезку будем использовать - Jcrop (jquery библиотека) на стороне клиента. В результате – мы должны получить процесс с 3 шагами: выбор файла, обрезка, загрузка. Во время выбора файла мы проверим тип файла и размер (чтобы избежать огромных файлов). Когда все будет готово и мы загрузили обрезанное изображение – мы переходим к этапу загрузки (в определенную папку сайта). Обратите внимание, что библиотека GD обрабатывает изображения.

В нашем новом учебном руководстве мы создадим простую, но эффективную палитру цветов, используя HTML5. Я думаю, что вы уже видели различные jQuery версии такой палитры цветов. Чтобы сделать её более уникальной, мы создадим 5 различных цветовых кругов, которые вы можете использовать в своем проекте.

Привет друзья! На сей раз, мы переходим к разговору о чем-то более практическом, чем кнопочные переключатели: выпадающие списки. Цель этого учебного руководства - создание стильного выпадающего списка, без использования изображений, только на CSS. Для правильной работы мы добавим небольшую строчку JavaScript.

WINDY - jQuery плагин, который позволяет построить быструю навигацию через груду элементов, используя CSS 3D transforms и transitions. Эффект непрерывного потока навигации напоминает о колоде карт или пачке листов, отсюда его имя. Эта идея вдохновлена примерами программ построения CSS теней, как показано в Introducing CSS shaders: Cinematic effects for the web.

Сегодня я подготовил новую игру – SkyWalker. В основном это - моделирования полета c многократными врагами. Наша цель – добраться до финишной черты. Есть следующие главные особенности: используем спрайты для объектов и взрывов, возможность нажатия нескольких клавиш (можете перемещаться и атаковать одновременно), длина определенного уровня, улучшенное обнаружение коллизий , жизнь и множество других параметров.

В этом учебном руководстве мы создадим упрощенный слайдер продукта для интернет-магазина или портфолио. Идея состоит в том, чтобы создать различные разделы в полноэкранном виде: изображение или предварительный просмотр, навигация и описание. При навигации элементов мы будем передвигать раздел предварительного просмотра и раздел с описанием в противоположных направлениях. Идея "противоположного" перехода присутствует на красивом веб-сайте Национального Музея LGBT, который перемещает левую и правую сторону таким же образом при навигации страницы.

В последнее время, на многих веб-сайтах стали использовать эффект 'перелистывания страниц', поэтому я начал размышлять о том, как создать такой эффект используя jQuery и CSS3. Я попытался сделать создание эффекта максимально простым.

 
 

Применение CSS 3D transform, может придать дополнительный реализм к обычным веб-элементам. Мы поэкспериментировали с некоторыми простыми веб-сайтами ресторанов и придумали интересное 3D меню (реальное меню, не "веб" меню). Результат - это шаблон веб-сайта ресторана, в котором присутствует наше меню. Щелчок по объединенным элементам покажет модальное наложение, содержащее дополнительную информацию.

Страница 1 из 12