Автор

Теги

Создание сайта 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 86 jQuery 153 JS 37 SVG 3 CMS 3

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

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

Параллакс изображения

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D.

jQuery 13.05.2017

Многоуровневое выпадающее меню на CSS3

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

CSS3 29.03.2016

Стильный выпадающий список на CSS

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

CSS3 18.05.2013

Всплывающая подсказка (tooltip)

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

JS 23.03.2013

105 Публикаций

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

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

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