29 декабря 2015 г.

Верстка промо-страницы для сайта re:Store

Одна из прежних работ - верстка промо-страницы для сайта компании re:Store.

Страница посвящена работам творческих людей, которые периодически читают лекции в рамках проекта Академия re:Store.

Мое участие:

  • верстка страницы;
  • сопровождающие JS-скрипты (управление параллаксом и слайдерами картинок).


Внешний вид:


28 декабря 2015 г.

CSS transiton «наоборот»


При верстке иногда надо сделать CSS-переход (transition) при отведении мышки не таким, как при наведении. То есть, при наведении мышки - один эффект, при отведении мышки другой эффект (не такой, как при наведении).

Это возможно, и для этого в псевдоклассе :hover надо прописать еще один transition. Тот, что прописан в :hover, будет иметь более высокий приоритет, и перекроет transition, прописанный в самом классе. В итоге:

  • при наведении мышки будет использован transition, записанный в псевдоклассе :hover
  • при отведении мышки будет использован transition, записанный в основном классе

Пример (при наведении - смена цвета, при отведении - переворот):

See the Pen VemvqR by borshak (@borshak) on CodePen.


25 декабря 2015 г.

Верстка промо-страницы для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена совместной акции с Амедиатекой.

Мое участие:

  • верстка страницы;
  • анимация.

Адрес страницы: http://www.re-store.ru/promo/amediateka/

Внешний вид:


10 декабря 2015 г.

Верстка страницы для сайта сети магазинов LEGO

Очередная работа - верстка промо-страницы для сайта сети магазинов LEGO.

Мое участие:

  • верстка страницы;
  • сопровождающие JS-скрипты (подключение и адаптация плагина для имитации снега).

Кстати, снег создан с помощью плагина SnowFall - он написан на нативном JavaScript, использует для анимации CSS3, легко модифицируется, и имеет гибкие настройки.
Демо-страница плагина | плагин на GitHub.

Но вернемся к нашей странице.

Адрес страницы: http://mir-kubikov.ru/gifts/

Внешний вид:


9 декабря 2015 г.

Верстка праздничной промо-страницы для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена скидкам на зимние праздники.

Мое участие:

  • верстка страницы.

Адрес страницы: http://www.re-store.ru/promo/ny-2016/

Внешний вид:


5 декабря 2015 г.

Верстка промо-страницы для сайта UNOde50

Очередная работа - верстка промо-страницы для сайта сети бутиков UNOde50.

Мое участие:

  • верстка страницы;
  • сопроводительные JS-скрипты (управление слайдерами картинок, анимация шапки, проверка формы обратной связи).

Адрес страницы: http://unode50.ru/b2b/

Внешний вид:


4 декабря 2015 г.

И все таки Sublime...

Раньше я писал, что редактор Atom удобнее, чем Notepad++.

И это, разумеется, так.

Но я все же полностью перешел на Sublime Text.



Причина - в скорости запуска и скорости работы самого редактора.

Верстка промо-страницы к 10-летию компании re:Store

Буду постепенно выкладывать свои работы - их много, но начинать с чего-то стоит.

Первой будет недавняя - верстка промо-страницы к 10-летию компании re:Store.

Мое участие:

  • верстка (по готовому макету от дизайнера);
  • адаптивность в пределах предоставленного макета ("резиновая верстка"), автомасштабирование фотографий в зависимости от разрешения экрана;
  • анимация;
  • вспомогательные JS-скрипты (для работы слайдера истории, для проверки формы обратной связи).

Адрес страницы: http://www.re-store.ru/promo/10Y/

Внешний вид: