Awebdesign's Blog

«Веб-дизайн — это не ЧТО сделано, а КАК это сделано» — часть I

Posted in Лучшие дизайны мира / Best World Designs by awebdesign on 12.12.2016

«Веб-дизайн — это не ЧТО сделано, а КАК это сделано»анонимный интернет-статус.

Веб — самая развивающаяся область в мире. Как космические технологии, только быстрее.

Люди вне веба (может, и вы) видят даже не вершину айсберга, а снежинку на вершине этого айсберга.

Иногда в фб можно встретить такие замечания: «Фейсбук — дешёвая поделка!» То сервисы у него «тупые», то интерфейс непонятный, то Цукерберг — враг народов мира. И постят они это все на фейсбук. И пользуются им годами.

Ради Бога… Для того, чтобы фейсбук появился в своем первоначальном виде, понадобилось ТРИ ЧЕЛОВЕКА, которые занимались кодингом ТРИ ГОДА. Для сравнения — обычный программист пишет обычный сайт 2 недели.


jam3

Читать полностью >

Блог Awebdesign переехал!

Posted in Лучшие дизайны мира / Best World Designs by awebdesign on 28.09.2016

default_image

Друзья, мы переехали на платный хостинг, теперь уроки и лучшие сайты мира находятся здесь: http://blog.awebdesign.ru/

Из того, что мы успели написать:

HTML-СТАРТ ДЛЯ ДЕТЕЙ. HEAD — ЭТО ГАЛЬЮН!

КАК ИСКАТЬ КОД В ПАПКЕ ФАЙЛОВ?

ВП МЕНЯЕТ РАЗМЕР МОЕЙ КАРТИНКИ В ПОСТЕ. ЧТО ДЕЛАТЬ?

FILIPPO BELLO — САЙТ ВИРТУАЛЬНЫХ ЭКСПЕРИМЕНТАТОРОВ

НА ЧЕРТА НАМ ЭТОТ ВОРДПРЕСС, ЕСЛИ ЕСТЬ БИТРИКС?!?

КАК ВЫВЕСТИ МИНИАТЮРУ ЗАПИСИ КАК ФОН?

КАК ВЫВЕСТИ ИКОНКИ FONT AWESOME ЧЕРЕЗ CSS

Очень сложный урок jQuery:

ОБЪЕКТ РАЗДВИГАЕТСЯ, ТОЛКАЕТ ДРУГИЕ БЛОКИ ПО ГОРИЗОНТАЛИ И МЕНЯЕТ ПОЛОЖЕНИЕ — OBJECT EXPANDS AND SHIFTS NEARBY DIVS — JQUERY, CSS3

Ну и о насущном:

УРОК ВОРДПРЕСС 2. КАК СДЕЛАТЬ БУТСТРАП МЕНЮ В ВОРДПРЕССЕ (BOOTSTRAP MENU IN WORDPRESS)

И пожалйсту, подписывайтесь на наши посты через

Фэйсбук: https://www.facebook.com/awebdesign.ru/

Или через Вконтакте: https://vk.com/aweb_blog

Объект раздвигается, толкает другие блоки по горизонтали и меняет положение — Object Expands, moves and shifts nearby divs — jQuery, CSS3

Posted in Лучшие дизайны мира / Best World Designs by awebdesign on 23.09.2016

code_with_me

Урок jQuery для продвинутых.

Открываем демо:  http://moodo.co/

Или здесь: project106.digiproduct.co.il

Внимание! Это коммерческий сайт, копировать и дублировать его ЗАПРЕЩЕНО!

Скроллим до блока с бейджиками — такие круглые этикетки а-ля парфюм (сайт про домашнюю ароматизацию через приложение). Кликаем на кругляшок.

Oh my God! It’s alive! Alive!!!

Тут у нас несколько задач, которые мы рассмотрим по отдельности.

  1. Если вы кликните на бейдж из правой колонки, вы увидите, что он (и ВЕСЬ ряд) сдвигается влево, активный бейдж встает на одну и ту же точку в веб-пространстве
  2. Разворот объекта по кругу вокруг своей оси — это язычки бейджиков;
  3. Вывод html-текста по окружности (html, jQuery).

Вы можете открыть инспектор (кликаем правой кнопкой мыши на объект в Хроме, выбираем последний пункт Inspect) и посмотреть в динамике, как это работает.

Я объясню здесь общий принцип работы, как подходить к решению подобной задачи.

Если у нас есть ряд свернутых объектов (это могут быть квадраты, прямоугольники и прочее), которые разворачиваются по горизонтали, то содержащий их контейнер должен быть в какой позиции?


.row_of_fragrancies {

position: absolute;

overflow: hidden;

width: 7777px;

}

b1

Весь ряд, который сдвигается целиком, должен быть absolute внутри relative. Relative у нас — синий блок.

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

overflow: hidden; — чтобы не появлялся горизонтальный скролл при заезде объекта за правую или левую границу экрана.

width: 7777px; — даем ширину с запасом, так как бейджи раскрываются и занимают больше ширины. Если не дать запас, то левый бейджик будет сталкивать правый вниз (как если бы они не влезали в одну корзину)…

Если это урок — то, что вам нужно — продолжайте чтение здесь!

Woom Center — New York Yoga Center

Posted in Лучшие дизайны мира / Best World Designs by awebdesign on 17.07.2016

Сайт для йога-центра в Нью-Йорке.

Front-end, HTML5-jQuery animations, Responsive html (Bootstrap), back-end (WordPress) development — Victorya Shidlovskaya.

API connection to calendar — Yuriy Belenko.

212223

Брендинг для мотогаража «Борода»

Дизайн сайта для нового СМИ Владимира Яковлева — Мулбабар

yakovlev-mulbabar

 

 

Версия для айпада:

 

yak_ipad

 

 

Версии для заставки на главную страницу для подписки на «Мулбабар» — с видео-заставкой (пройдите по ссылке, кликнув на картинку)

 

yakovlev-mulbabar

yakovlev-mulbabar

yakovlev-mulbabar

 

 

Заставка на время разработки сайта «Мулбабар» до его официального запуска с таймлайном событий. Один из вариантов — в стиле «ретро».

 

yakovlev-mulbabar

 

 

Открытки для Kick-Start — в помощь сбору средств на новое СМИ Владимира Яковлева «Мулбабар»

 

yakovlev-mulbabar

yakovlev-mulbabar

yakovlev-mulbabar

 

Автор идей, дизайн, айдентика — Шидловская Виктория.

Лендинг для BigGame — экипировка и снаряжение для охоты и рыбалки

Awebdesign.ru сдал в эксплуатацию сайт для отличной фирмы BigGame. На очереди — интернет-магазин, а пока что представляем вниманию заинтересованных два магазина и тир для стрельбы из лука!

На сайте реализована 3D-анимация силами CSS3 и HTML5. В шапке раскрывающиеся «створки» обложки и дисконтные карты соответствующего раздела, которые делают полный поворот при наведении мыши.

Сайт адаптивный, 100% экрана на любом устройстве.

Дизайн, программирование — Шидловская Виктория.

21

22

%d такие блоггеры, как: