Lecaw

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

Главная - Lecaw

На сей раз мы вдохновлены скользящим эффектом меню, также известным как эффект Lavalamp (напр. здесь). Мы воссоздадим его на чистом css – используя css3 transitions и общий элемент combinator. Ниже мы создадим три простых примера (убедитесь, что уже посмотрели демонстрационный пример).

Привет ребята! В этом уроке я расскажу Вам, как создать выпадающее Мега Меню на CSS3. Мега Меню обычно используются на корпоративных сайтах/сайтах электронной коммерции, они становятся все более популярными, потому что они - отличный способ показать/организовать содержание. Дизайн этого мега меню может быть найден в The Bricks UI. Давайте начнем с HTML разметки.

В прошлом уроке мы сделали современный раздел HEADER на CSS3. Эта статья была очень популярна (мы получили много отзывов). Поэтому, сегодня я решил продолжить начатый проект. Сегодня мы рассмотрим основные элементы страницы, такие как блоки и формы. Я думаю, что если мы сделаем все блоки в таком стиле – это будет скучно, поэтому, я подготовил четыре типа блоков с пользовательскими заголовками и нижними колонтитулами.

Хотели бы вы когда-нибудь поменять шапку вашего сайта? Header это - самый важный раздел любого веб-сайта. Прежде всего, посетители обращают внимание на эту часть. И чем более чистый и красивый заголовок, тем лучше мнение о Вашем сайте складывается у посетителей. В нашей сегодняшней статье я покажу, как создать высококачественную и современную шапку сайта. Этот заголовок будет содержать логотип, несколько ссылок в правом верхнем углу, выпадающее навигационное меню и форму поиска.

Сегодня мы закончим наш Pinterest проект. В нашем пятом уроке я подготовил следующие функции: repin и поиск. Как Вы знаете, “like” это своего рода система оценки. В нашем проекте – любой зарегистрированный участник может оценить любую фотографию один раз в час. Если Вам понравилась фотография и Вы хотите добавить ее к Вашему профилю – можете нажать кнопку “repin”. Что касается поиска – все просто: мы давно подготовили панель поиска, но она не работала. Сегодня я добавил эту функцию.

Пришло время опубликовать наш четвертый урок, где мы создаем наш собственный Pinterest проект. На данный момент я добавил ajax систему комментариев и несколько страниц в профиле. Теперь мы можем оставлять комментарии (это доступно для зарегистрированных пользователей), непосредственно на наших миниатюрах или на увеличенных версиях изображений.

Сегодня я хочу рассказать вам, как создать простое и веселое круговое слайд-шоу. Идея состоит в том, чтобы зеркально отразить плоскость в определенной точке, в зависимости от места в которое мы нажимаем. Есть три различных области для каждой стороны круга: верхняя, средняя и нижняя часть. Например, при щелчке по верхней правой части изображения, круг повернется в соответствующую сторону, как будто мы надавливаем на ту часть чтобы увидеть следующее изображение, которое находится на задней стороне круга.

Я надеюсь, что Вы с нетерпением ждете нового урока. На сегодня я подготовил много новых изменений. Во-первых это - новый вход в систему и систему регистрации, во-вторых – сегодня мы будем использовать базы данных, чтобы хранить информацию о пользователях, фотографиях и будущие комментарии. Теперь чтобы загрузить фотографии мы должны войти в систему.

Сегодня я хотел бы представить второе обучающее руководство, где мы создаем собственный Pinterest сценарий. На сегодня я подготовил новые функции: загрузчик фотографий на HTML5 (обратите внимание, что эта функция работает во всех современных браузерах за исключением IE), и ajaxy, раскрывающиеся, полноразмерные фотографии. Для этого я использовал jQuery плагин ColorBox.

Нравится Pinterest? Я уверен, что да и вероятно, что Вы бы хотели создать подобный фото сайт. Я решал написать ряд учебных статей о разработке подобного проекта. Для начала – давайте решим, какие функции будут добавленны в сценарий. Я думаю, что кроме хорошего проекта и дружественного интерфейса, мы должны добавить следующие вещи: ajax, раскрывающиеся, полноразмерные фотографии, возможность комментировать записи, для функциональности - форму загрузки, способ сортировать фотографии (зависит от его размера) и возможно, что то ещё. В нашем первом уроке я подготовил HTML разметку со стилями нашего проекта. Кроме того, чтобы сортировать фотографии (выравнивать их) – я буду использовать jQuery плагин “masonry”.

Страница 9 из 22