Автор

Теги

Создание сайта www.reefll.com

div верстка сайта 29.11.2013 В избранное

Это наверое самый интересный проект на сегодняшний день. Сайт создавался в двух версиях: английской и русской. Использовался американский хостинг, рассчитан в первую очередь на американских клиентов и английская версия основная! Это полноценный интернет магазин по продаже света для аквариумов. Дизайн полностью создан на цветах без использования изображений (кнопки, меню, футер и всё остальное), чистый CSS3. Единственной частью в изображениях является корзина заказов, в верхнем правом углу сайта. С самого начала создания данного сайта хотелось использовать новейшии технологии в веб дизайне, и я считаю что это удолось!

Вместе с заказчиком была выбрана идея о неком роботе, который будет фигурировать на сайте в качестве экскурса!

Сайт писался с нуля, не использовалось никаких шаблонов.

Начну по порядку какие скрипты и стили я применял:

1. JQuery

Слайдер на главной странице сайта сайта описан в статье «Слайдер с эффектом параллакса на jQuery».

Сворачивание и разворачивание текста в разделе FAQ.

Боковое меню описано в уроке «Вертикальное раздвижное меню с описанием».

Выпадающая панель персонального раздела пользователя на сайте.

Неавторизированый пользователь:

Авторизированый пользователь:

2. javascript

Сворачивание и разворачивание блока с информацией в корзине, описано в уроке «Java-скрипт открыть/скрыть область/текст».

3. CSS3

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

Вертикальное меню в разделе «Магазин» так же как и верхнее описано в статье «Меню только на CSS3».

Подсказки на сайте так же на CSS без использования скриптов.

Круглые изображения на сайте, описаны в статье «8 эффектов для изображений CSS3».

Лейтбоксы без скриптов на чистом CSS3, описан в статье «Создание лайтбокс-галереи с помощью CSS3».

Ну вот пока вроде всё! Если вам понравилась данная статья, то сохраните эту страницу в закладки и заходите, так как сайт находится в работе и много чего интересного вы можете тут увидеть!

С уважением Целовальников Сергей!

HTML5 7 CSS3 84 jQuery 153 JS 37 SVG 3 CMS 3

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по темеdiv верстка сайта

Анимарованная сортировка блоков с помощью Isotope

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

jQuery 24.12.2015

Metro: Навигация для сайта в стиле windows 8

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

jQuery 29.04.2013

Aнимированное меню с помощью CSS3

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.

CSS3 31.03.2013

Генераторы градиента (фона) для сайта на CSS

Представляю вашему вниманию два генератор градиента на CSS. С помощью онлайн градиент генераторов css Вы сможете создать фон (background) для вашего сайта блога или проекта. Сервисы просты в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим.

CSS3 15.01.2017

75 Публикаций

Раскрутка в соцсетях

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

Перейти в Блог