Автор

Теги

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

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

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

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

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

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

1. JQuery

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

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

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

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

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

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

2. javascript

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

3. CSS3

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

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

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

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

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

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

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

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

Красивая загрузка изображений на jQuery

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

jQuery 26.04.2013

Конструктор продуктов & товаров на jQuery

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

jQuery 10.05.2017

Плавная прокрутка вверх и вниз страницы

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

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

jQuery 09.04.2013

Замена стандартного checkbox по средствам CSS3

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.

CSS3 30.12.2015

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

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

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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.

Перейти на хостинг