CSS эффекты при наведении на изображение
В современном веб дизайне доминируют тонкие линии и легкие, как бы воздушные конструкции, четкая типография, много пространства и белый цвет. Динамические элементы разрабатываемых под дизайн такого типа, должны соответствовать ему.
Изящные веб эфaекты используемые «при наведении»
Беря во внимание эти красивые и «легкие» тенденции, хотелось бы предложить Вам на рассмотрение некоторые творческие идеи для оформления галереи изображений.
Средства используемые для разработки этих эффектов включают в себя элементы, которые будут работать только в современных браузерах.
В Firefox-е некоторые элементы могут отображаться не совсем корректно.
Для создания разметки были использованы такие теги как «сетка» и «фигура»:
Отдельно взятый элемент (в данном случае «effect-sadie») будет выглядеть так:
А теперь давайте рассмотрим как работают наши эфекты исключительно при помощи таблицы стилей, для примера возьмем описанный выше «effect-sadie»:
Современный веб интерфейс
Разработка веб Интерфейсов относится к тому типу задач, выполнение которых требует знаний сразу нескольких предметных областей.
Веб дизайн
Для создания эфективного интерфейса необходимо иметь дизайнерский вкус, обладать навыки работы в специальных программах (фотошоп, илюстратор и т.д.) и постоянно быть в курсе последних тенденций вебдизайна.
XHTML и CSS
Следующая необходимая предметная область знаний это так называемая «верстка». Сам термин появился на заре зарождения вебдизайна и происходит от газетной/журнальной «верстки». Первая веб верстка сводилась к тому, что бы нарезать картинки сделанные в графическом редакторе и выводить их на странице при помощи небольшого числа тегов. Современная же верстка зависит от графических редакторов в гораздо меньшей степени, потому, что практически все так называемые стили задаются при помощи каскадных таблиц стилей «CSS».
Лично я считаю, что хороший веб-дизайнер просто обязан знать HTML и CSS, потому как невозможно создавать качественный дизайн не имея представления о его реализации в вебе.
JavaScript программирование
Третья необходимая область знаний касается программирования динамических элементов веб интерфейса. Может показаться, что специфика квалификации JavaScript-программиста заключается в том, что он не должен подбирать цвета, рисовать кнопочки и «наводить прочую красоту».. Но в современных условиях специалист по разработке веб интерфейсов по мимо дизайна и верстки должен хорошо разбиратся в JavaScript-е и уметь продумать оптимальную структуру HTML и CSS для элементов управления, с которой ему же будет удобно работать впоследствии при разработке анимации для элементов.
Золотая середина
Если что-либо возможно реализовать посредством CSS — лучше реализовать это через CSS.
Объяснить такой подход очень просто — JavaScript всегда сложнее чем CSS, конечно можно с этим поспорить, особенно если вытащить из старинной шкатулки IE 6,7,8 и показать, что средствами CSS мало что можно реализовать. Даже в том случае если CSS на вид более сложный — развивать и поддерживать его намного проще, чем JS.
Кроме того, можно сделать ещё одно наблюдение:
Даже хорошее знание JavaScript не может заменить собой знание CSS. Жижнь разработчика становится гораздо проще, если у него есть хорошее знание и CSS и JavaScript.
Можно многое сделать только при помощи JavaScript. И очень часто, не зная CSS, разработчики так и поступают. Но мы будем использовать только лучшие практики веб разработки:)
Практический взгляд
Как же подойти к созданию современного интерфейса с практической точки зрения? С чего начать и какие практические знания применять в первую очередь? Я не однократно сталкивался с проектами, владельцы которых оказывались на грани полной потери своего бизнеса в Интернете из-за накопленных в процессе жизнедеятельности проекта системных ошибок допущенных при разработке (серверные программисты, могли бы «фыркнуть» прочитав последнее предложение:) но не спешите, я сейчас все поясню на примере).
Недавно, мне по работе попался сайт, лидер по доставке продуктов из ресторанов в одном из российских городов миллионников, владельцы сайта жаловались на то, что сайт при выполнении операций стал подвисать по 30-ть и более секунд.
При детальном изучении сайта оказалось, что джаваскриптами выполняется практически всё, — от анимации различных элементов (которых было очень много), до системы выбора районов/адресов доставки продуктов и даже за адаптивность (адаптивные сайты — современный тип сайтов, подстраивающийся под разные разрешения браузеров, от мобильных телефонов и планшетов до всех возможных компьютерных дисплеев) шаблона отвечали джаваскрипты.
Джаваскрипты для этого сайта были написаны разными разработчиками, причем в числе программистов, приложивших свою руку к данному проекту были как очень скрупулезные «профи», так и явно начинающие «прогеры», которые не утруждали себя ни проработкой общей логики работы системы, ни хотя бы элементарным комментированием своего кода и до определенного момента все шло гладко.
Сайт-сервис рос и успешно развивался, добавлялись новые элементы, новые адреса доставки / охватывался пригород и соседние города появлялись новые тенденции (например таже адаптивность), но интерфейс никто не хотел менять, в него попросту при помощи JavaScript-а «запихивали» новые возможности.., паралельно с наращиванием возможностей менялись разработчики проекта и как я могу судить, тенденция состояла в том что бы найти разработчиков подешевле.
И вот настал час «Ч», — конкуренты наступают на пятки и их идентичные сервисы технически начинают опережать наблюдаемый нами сайт и поисковая выдача по ключевым запросам уже не всегда на стороне наблюдаемого сайта.. а функционал продолжает разрастается и в один прекрасный момент оказывается что среднее ожидание загрузки страницы составляет более 40-ка секунд и естественно даже постоянные клиенты начинают переходить к конкурентам.
Вот в такой момент и настает патовая ситуация, останавливать бизнес нельзя, в поддержку ссылочной массы вкладывается приличный бюджет, клиенты разбегаются, а на переработку сайта в целом нужно минимум два месяца. Как быть в такой ситуации, вопрос скорее риторический — лучше не допускать её наступления.
Добавить комментарий