В этом уроке мы будем создавать слайдер изображений с тремя 3D панелями на JQuery. Идея состоит в том, чтобы создать одну главную панель и две боковых, которые немного повернуты создавая 3D эффект. При навигации мы будем скользить к соответствующему изображению на каждой панели. Мы будем использовать CSS 3D Transforms с perspective и CSS Transitions.
Прочитав этот топик и запись в блоге, на которой он основан, я подумал в очередной раз о том, как же любят «специалисты по веб-дизайну» (это камень в сторону автора записи в блоге, но не только — всем известны и другие любители этого) выдавать давно известные тезисы за откровение и яро их пропагандировать. Не слишком заботясь о логике того, как эти тезисы переносятся на веб-дизайн и дизайн вообще, и что они изначально значат.
Давайте разберемся, в чем тут реальная проблема.
Читать полностью »
Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.
Читать полностью »
Оказывается, хорошие дизайнеры и художники избегают чёрного цвета. Даже в художественных школах говорят, что его ни в коем случае нельзя использовать, потому что он подавляет соседние цвета. Имеется в виду чистый чёрный цвет #000000.
Сооснователь Segment.io, дизайнер Ян Сторм Тейлор (Ian Storm Taylor) показывает на примерах, что в природе вокруг на самом-то деле нет чёрного! Всё, что мы принимаем за чёрный, является оттенками тёмного серого цвета. Например, на этой фотографии самый тёмный цвет вовсе не #000000, а #130f30, это яркость 19% и насыщенность 69%!
Подобные индикаторы загрузки можно встретить на многих flash-сайтах. Но можно реализовать такое и с помощью CSS.
Читать полностью »
6-7 октября уже в пятый раз в Самаре пройдет Фестиваль 404. Наверняка, многие уже были на этом мероприятии и мне не нужно рассказывать все сначала, поэтому сразу перейду к новостям. Во-первых, у нас новый логотип:
Сам рисовал. :) Не скажу, что это какой-то шедевр, но фестивального духу в нём больше. Он более задорный. От пиксельных квадратиков старого логотипа уже как-то все устали. Плюс, мы поменяли слоган на более ёмкий.
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.Читать полностью »
Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:
Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.Читать полностью »
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №17 (4 — 10 августа 2012)")
Читать полностью »
Речь пойдет о том, как использовать облачные технологии на благо дизайнера. Как с помощью облака не боятся работать в оригинальном макете. Как держать актуальные и одни и те же макеты на работе и дома. Контролировать версии. И как укрощать большие макеты, делая их маленькими и послушными.
Читать полностью »
