Фишки css для сайта – Интересные CSS трюки, которые помогут разнообразить создание макетов: советы по использованию

Содержание

16 «фишек» для вооружения Вашего сайта

Автор

Миша Радионов

Опубликовано: 11 Авг 2014

Вернуться в блог

Разработкой сайтов в Екатеринбурге сейчас уже никого не удивишь. Огромная конкуренция, существующая на рынке, толкает веб-студии на разные ухищрения, заставляя придумывать все новые и новые «фишки» для сайтов своих клиентов. Сегодня Студия Флаг поделится своими секретами при разработке сайтов, которые помогают повысить степень доверия к ресурсу, увеличить конверсию, упростить управление сайтом и многое другое.

Итак, разделим «фишки» на категории.

Визуальные «фишки»

  • 1. Адаптивность

Адаптивность сайта – ключевой момент для большинства современных пользователей, живущих в стремительных мегаполисах таких, как Екатеринбург. А удобство пользователя – одна из основных задач при создании сайта. Значит, возможность, позволяющая максимально эффективно и удобно представить один и тот же портал как на смартфоне с планшетом, так и на настольном компьютере, является конкурентным преимуществом Вашего сайта. Адаптивность достигается за счет динамической оптимизации размеров страницы под каждый дисплей и позволяет вашему сайту всегда быть под рукой. Подробнее про адаптивность читайте в нашей статье «Мобильная версия или адаптивность?»

  • 2. Виджеты социальных сетей

Казалось бы, что здесь нового и необычного? Но не все понимают, насколько этот элемент важен для пользователя. Виджет социальной сети, но не просто кнопка, а с миниатюрами участников группы, значительно повышает степень доверия к ресурсу. Этот виджет позволяет подписаться на группу, созданную в различных социальных сетях, а также сразу увидеть тех, кто в ней состоит. Особенно важно, что в нем на первых местах выводятся друзья пользователя.

Снимок2

  • 3. Виджет отзывов Flamp и Яндекс.Маркет

Задача виджета – автоматически выводить оставленные пользователями рекомендации по конкретному товару или услугам прямо на странице сайта. Это упростит посетителям поиск необходимой информации и позволит сразу же создать желаемый позитивный имидж компании.

  • 4. Послойный слайдер

Послойный слайдер – «фишка», поднимающая отображение информации на новый уровень. Послойный слайдер добавит визуальную динамическую составляющую на сайте. В нем можно реализовать различные графические идеи – от просто движущихся объектов на сцене и меняющегося частями изображения до встроенного видео с Youtube. Послойный слайдер – это новый способ привлечь внимание посетителя, зацепить его, по-другому донести информацию. Для получения удовлетворительного результата, реализацией такого слайдера лучше заниматься на стадии разработки сайта.

13-revslider

Отличная «фишка» для визуализации информации. Мапперы – это интерактивные области на сайте, облегчающие навигацию, взаимодействие и просто приятные глазу. Это могут карты, схемы, любые изображения. Реализация этого элемента требует времени, но какой эффект. Работаете на несколько регионов? – При разработке сайта поместите на главной странице интерактивную карту России, и пользователи наглядно увидят масштабы Вашей компании, а по клике на свой регион смогу перейти на страницу регионального филиала компании. Также решение подходит для сайтов интерьерных или мебельных магазинов, как показано на примере.

Снимок

«Фишки» для повышения или отслеживания конверсии

  • 6. Динамические заголовки

Использовать это «фишку» целесообразно только в паре с контекстной рекламой. Динамические заголовки автоматически подставляют в название целевой страницы ключевые слова, релевантные поисковому запросу пользователя. Делается это для того, чтобы результат максимально соответствовал тому, что ищет пользователь, это заметно увеличивает конверсию сайта. Небольшая, но крайне удобная для клиентов функция, которую стоит выбрать, заказывая создание сайтов в Екатеринбурге.

Функция Call Tracking обеспечивает автоматическую подмену телефонов на сайте. Т.е. для посетителя, зашедшего на сайт с контекстной рекламы, будет показан один номер, а для посетителя из социальной сети – другой. Отслеживая количество звонков по разным номерам, Вы всегда сможете определить наиболее эффективный источник рекламы и сделать упор на его развитие для привлечения максимального числа клиентов.

virtual-call-track-wect

  • 8. Онлайн-консультант с web-визором

Онлайн-консультант сам по себе уже вещь привычная и частенько устанавливается при создании сайтов для помощи посетителям. Но функция web-визора значительно расширяет его возможности. Онлайн-консультант с web-визором поможет клиентам получить необходимую информацию о товаре или услуге, которая не представлена на статичной странице. Web-визор обеспечивает отслеживание действий пользователей в реальном времени и вводимой ими информации, что позволит специалисту заранее подготовить ответ на интересующий вопрос. Однако, минус этой «фишки» в необходимости постоянно оставаться на рабочем месте и следить.

  • 9. Форма обратной связи с SMS-уведомлением

Форма обратной связи с SMS-уведомлением крайне удобна для владельцев небольших сайтов, самостоятельно работающих с заказами пользователей. Разработка сайта с такой функцией позволяет получить текстовое сообщение на Ваш номер о поступлении нового заказа через несколько секунд. Быстрая реакция на запросы потенциальных клиентов увеличивает их лояльность, не дает им время на поиски аналогов и не позволяет передумать. Ни один клиент не останется не замеченным!

  • 10. IP-телефония с автоматическим дозвоном

Этот прием позволяет не откладывать общение с клиентом в долгий ящик, автоматически соединяя с посетителями сайта. Работает довольно просто: клиент оставляет свой номер телефона, нажимает кнопку и IP-телефония соединяет его с менеджером. Функция ускоряет получение конверсии с сайта – клиенту не нужно мучиться с заполнением длинных форм, ждать звонка оператора, тратить свои деньги или же бегать в поисках гарнитуры для звонка с сайта.

Снимок111

  • 11. A/B тестирование

Маркетинговый прием для экспериментаторов и оптимизаторов. A/B тестирование показывает разным пользователям две разные версии страницы. В результате можно оценить, как даже самое небольшое отличие в элементах влияет на поведение пользователей – захотят ли они дальше остаться на странице и сделать заказ или предпочтут уйти. A/B позволяет выявить ошибки и упущения, совершенные в процессе создания сайта, исправить их и тем самым повысить конверсию с сайта.

abtestingwebsite

«Фишки» управления сайтом

  • 12. Адаптивная админка

Нередко возникает необходимость внести изменение в перечень товаров или же добавить новую статью, а под рукой имеется только смартфон или планшет. Отличное решение в этом случае – это заказать сайт с изменяющейся под размеры экрана администраторской панелью. Своевременное обновление контента, реакция на новости города обеспечит больший интерес пользователей и позволит удержать их внимание к ресурсу.

wordpress-responsive-admin-iphones-3-8-1024x591

Сколько раз по случайности или невнимательности Вы удаляли важный документ, сохраняли ошибочные изменения или просто стирали информацию? Эта «фишка» поможет избежать подобных казусов при управлении материалами на сайте. Подобно корзине в Windows, корзина в WordPress позволит восстановить удаленные документы или страницы сайта, а дополнительная функция резервных копий поможет восстановить предыдущие версии страниц. Теперь Ваш сайт защищен как от случайных ошибок, так и от нерадивости контент-менеджера.

  • 14. Вставка видео и встроенный фото-редактор

Еще одна «фишка» WordPress – это встроенные редактор, значительно упрощающий наполнение сайта медиа-контентом. Функция редактирования фото, заботливо предлагаемая Студией Флаг своим клиентам, позволит отказаться от предварительной обработки материалов на компьютере с использованием дополнительных программ. Вместо этого будущее содержимое страницы можно загружать прямо на сайт, изменяя его в администраторской панели.

  • 15. Медиа-менеджер с drag-and-drop

Перейти от поиска файлов по папкам с помощью проводника к удобной отправке материалов прямо на сайт можно с медиа-менеджером WordPress, поддерживающим drag-and-drop функцию. Все необходимые материалы можно выделить и перенести в окно браузера, после чего они будут загружены на страницу. С такой возможностью работа над содержимым страницы занимает гораздо меньше времени.

оаоап

Расширить функционал своего сайта, не вдаваясь в сложности программирования, помогут шорткоды WordPress. Шорткод, следуя из его названия, призван экономить время при создании страницы или ее наполнении. Область применения очень широка – создание фотогалерей, показ RSS ленты, показ видео с Youtube, различные кнопки, колонки, анимация… Список можно продолжать довольно долго. Специалисты Студии Флаг с радостью помогут Вам создать для Вас подходящие шорткоды и научить ими пользоваться, экономя время при изменении сайта.

Вооружившись нашими «фишками», Вы создадите сайт, готовый ринуться в бой за внимание клиентов и успешные продажи!

Давайте дружить!


Последние записи блога
Please enable JavaScript to view the comments powered by Disqus.

Крутые CSS3 штуки для веб - мастера совершенно бесплатно

Приветствую, друзья! Сегодня будем подборка в которой Вы сможете найти очень много полезного кода, который в основном состоит из CSS. Все примеры очень полезны и пригодятся каждому веб — мастеру и разработчику. Тут Вы сможете найти несколько крутых и творческих анимационных эффектов, которые вы можете изменять и бесплатно использовать на своём сайте, так как все исходники представленные тут совершенно бесплатны.

И конечно же я как всегда обязательно рекомендую посмотреть Вам следующее:

Анимационное сердце и радуга сделанные на CSS

Перейти

Кнопка — гамбургер для меню с красивой анимацией на чистом CSS

Перейти

Анимационный прогресс бар на CSS бесплатно

Перейти

Лайтбокс для показа диалоговых окон из социальных сетей

Перейти

Простой слайдер на CSS и JQuery

Перейти

Бейджи на чистом CSS3

Перейти

Анимационная трансформация объекта на CSS

Перейти

Салют из кругов на JQuery и CSS

Перейти

Простой анимационный выключатель

Перейти

Красивая анимационная история смартфонов Meizu

Перейти

Крутой зимний и анимационный дудл для сайта

Перейти

Простой слайдер для Вашего сайта

Перейти

Красивая и анимационная открытка

Перейти

Анимационная и тёмная иконка — гамбургер

Перейти

Цветовые палитры Flat цветов

Перейти

Крутой эффект для фотографий

Перейти

Простой и красивое выпадающее меню на чистом CSS

Перейти

Красивые и анимационные checkbox для сайта

Перейти

Дизайн для приложения

Перейти

Анимационный компас на чистом CSS

Перейти

Необычная и адаптивная сетка для сайта

Перейти

Анимационный прогресс бар в стиле iOS 7

Перейти

Красивая загрузка для сайта на CSS

Перейти

Адаптивная полоса времени

Перейти

Индикатор прокрутки с анимацией на CSS

Перейти

Ещё один красивая и анимационная загрузка для сайта

Перейти

Пиксельный Бетмен на CSS

Перейти

Форма входа и навигация на CSS

Перейти

Как сделать мельницу на CSS в стиле Flat

Перейти

Анимационный эффект для текста на CSS

Перейти

Бесплатные фишки, которые точно нужны дизайнеру (Бесплатно)

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

Здесь Вы сможете встретить кнопки, иконки, несколько шрифтов, скриптов и ещё множество крутых вещей.

Выражаю благодарность www.webdesignerdepot.com и рекомендую к просмотру следующее:

Иконки минималистических лампочек

Скачать

Классный шаблон игрового сайта для WordPress

Скачать

Подборка Flat элементов для сайта

Скачать

Несколько иконок и разных элементов для сайта

Скачать

Крутые навигационные иконки с анимацией

Скачать

Шаблоны бесплатных визитных карточек

Скачать

Brick — WordPress шаблон для персональных блогов

Скачать

Элегантный шрифт для сайта — Salome

Скачать

Минималистичекие иконки настроек

Скачать

UI подборка элементов со скругленными углами

Скачать

HTML шаблон с современным дизайном

Скачать

Крутой шрифт — Sifonn

Скачать

Полноэкранный PSD макет для сайта — Orbit

Скачать

Бесплатный и «Старый» шрифт

Скачать

Шаблон Nexus 5

Скачать

Шаблон для приложения со стильным дизайном

Скачать

Необычный шрифт

Скачать

Отличная подборка бесплатных элементов для построения интерфейсов

Скачать

Деревянные кнопки на сайт

Скачать

Скрипт для загрузки файлов на сервер

Скачать

Красивые иконки социальных сетей

Скачать

Шаблоны новой Нокии 1020

Скачать

Социальные иконки в виде ромбов

Скачать

Бесплатные иконки — шрифты

Скачать

UI подборка для создания крутого дизайна

Скачать

Подборка квадратных иконок

Скачать

Шаблон в PSD — Marble

Скачать

UI элементы в стиле Флет

Скачать

Модальные окна с классными эффектами

Скачать

Романтический шрифт — Rose

Скачать

Множество полок в PSD

Скачать

Бесплатный шрифт — Louisiane

Скачать

Классный jQuery календарь с адаптивным дизайном

Скачать

Бесподобная подборка iOS иконок

Скачать

Круглые Flat иконки

Скачать

3 адаптивных шаблон для Вордпресс

Скачать

Градиенты и цвета в стиле iOS7

Скачать

Бесплатные абстрактные фоны

Скачать

UI элементы браузера Google Chrome в PSD

Скачать

Ретро шрифт — Dyspepsia

Скачать

Иконки кредитных карточек

Скачать

Диаграммы и таблицы

Скачать

Супер герои в векторе

Скачать

Несколько логотипов в PSD

Скачать

Шаблоны для крутой email рассылки

Скачать

Таблицы с ценами

Скачать

20 впечатляющих приемов, библиотек и примеров CSS3

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

Кроме того, мы включили статьи, описывающие новые потрясающие возможности CSS3 и несколько полезных библиотек, полных CSS трюков. Так что здесь есть много чего, на чем можно задержать взгляд и чему поучиться, поэтому давайте лучше начнем!

Для того чтобы в полной мере насладиться этой подборкой, вам, возможно, нужно будет воспользоваться современным браузером, таким как Google Chrome.

Это действительно хорошо выполненный и выверенный пример меню, реализованного с помощью одного только CSS. На самом деле, здесь семь отдельных примеров! В них применена новая возможность перехода CSS3, а также изобретательно использованы селекторы для создания эффекта изящного размытия:

С помощью этого приложения вы можете создать и поиграться с поразительно реалистичными облаками. Тот факт, что такое приложение существует, наводит на мысль, что веб-дизайн может предложить бесконечные возможности. Код приложения достаточно сложен, так как использует 3D преобразования CSS3, а также код JavaScript:

Это логотипы известных компаний, созданные полностью с помощью CSS. Самое крутое — это то, что вы можете навести курсор на логотип, чтобы увидеть, какие именно свойства CSS использованы для формирования изображения. Также вы можете посмотреть полный код на github:

А вот другое креативное применение CSS. В этих постах на tumblr буквы алфавита представлены в виде милых оживших картинок:

Простая, но очень стильная панель навигации. CSS-код для нее содержит всего 65 строк, но как вы можете видеть, внешний вид интерфейса впечатляет. Здесь были использованы новые возможности CSS3 (преобразование и переход) для придания эффекта глубины:

Это CSS вариант небольшой анимации дудла Google. Он справляется со своей задачей довольно хорошо — отлично анимирован, причем без какого-либо JavaScript!

Другой хорошо выполненный проект — на этот раз раздвижные панели. И снова все скользит как по маслу, не задействовав ни капельки JS, а детали отточены до последнего пикселя:

Красивое анимированное кольцо в одном элементе div и около сотни строк чистого CSS:

Еще один пример использования новых функций CSS3: переходов, фильтров, 3D преобразований и других. Само по себе демо не представляет собой ничего впечатляющего, но представьте, какой крутой дизайн можно сделать, добавив к нему несколько красивых слоев:


А теперь давайте обратимся к некоторым статьям и урокам по CSS3, которые охватывают новые важные функции.

Это углубленная статья о новых «гибких» контейнерах или так называемых flexbox. Flexbox является новым CSS подходом к настройке макета страницы. Это отличный способ изменить ширину, высоту и выравнивание HTML элементов для наилучшего заполнения пространства:


Для быстрого ознакомления вы можете воспользоваться этой шпаргалкой.

В одном из наших прошлых уроков мы рассказали о том, как создать яркое меню навигации с анимированными выпадающими списками. Никаких ухищрений с изображениями или JavaScript – все сделано полностью с CSS:

Если вам интересны новые фильтры, предлагаемые CSS, мы рекомендуем вам ознакомиться с этим уроком. Он содержит хорошо подобранные примеры и полезную информацию о поддержке браузерами и вопросах производительности:

Это бесспорно одна из лучших статей о CSS, которую я когда-либо читал. В ней представлены фигуры (shape) CSS3, а также приводится много практических примеров того, как их создать и реализовать. Очень хорошо написано!

В этом уроке авторы объясняют, как создать простой индикатор выполнения без использования каких-либо сложных скриптов. Они задействуют всевозможные крутые методы CSS3 для добавления индикатору градиентов, полосок, блеска и свечения. Конечный результат выглядит изящно и готов к использованию (демо):


И последними, но не менее важными, в нашем списке идут несколько полезных CSS библиотек, которыми мы пользовались в последнее время.

Эта библиотека очень популярна на github.com и на то есть причина! Она основана полностью на CSS и поэтому может повысить производительность любого приложения:


Мы также отметили эту библиотеку в статье «10 советов для написания JavaScript без jQuery».

Spinkit — это коллекция легко настраиваемых индикаторов загрузки, от которых мы в полном восторге и используем довольно часто:

Заголовок говорит сам за себя — ничего больше, ничего меньше, просто огромная коллекция кнопок:

Удивительное небольшое приложение, которое позволяет настроить кнопки переключателя, а затем просто скопировать код CSS. Кроме всего прочего, оно оснащено переключателями из популярных операционных систем:

CSS библиотека для всплывающих подсказок, которая не требует использования JavaScript:

Библиотека Colors.css создана для тех, кто ненавидит переводить цвет в шестнадцатеричный код. Она предлагает удобную альтернативу механизму выбора цвета, не очень хорошо проработанному в CSS:

На этом наш список заканчивается. Надеемся, эта статья оказалась вам полезна и вдохновила на исследование безграничного (почти) мира дизайна с CSS!

Данная публикация представляет собой перевод статьи «20 Impressive CSS3 Techniques, Libraries and Examples» , подготовленной дружной командой проекта Интернет-технологии.ру

Фишки в веб-дизайне - интересные и необычные задумки в веб-дизайне

Какой у вас сайт? Самый простой, сделанный на шаблоне, или с интересными эффектами? Сегодня расскажем о необычных способах сделать ваш ресурс запоминающимся и удобным для посетителей. Вы тоже можете их применить!

Зачем нужны эффекты?

  1. Чтобы отстроиться от конкурентов. Далеко не все способны к новаторству, многие владельцы сайтов почему-то боятся интересных идей. Меж тем они способны выделить ваш сайт из сотен других.
  2. Чтобы привести трафик. Достаточно рассказать о необычных функциях на стороннем ресурсе и заинтересовать пользователей - они сами придут из любопытства.
  3. Чтобы увеличить продажи. Многие эффекты не просто красивы, но и функциональны. Интересные решения побуждают псетителя принять решение в вашу пользу.

Необычные фишки в веб-дизайне

1. Игра “Выбери тариф”

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

выбери тариф

2. Прием “Сравнение”

Лучший способ мотивировать клиента сделать заказ, совершить покупку - показать ему все плюсы вашего предложения. Можно долго убеждать человека словами, но лучше наглядно показать, что он получит и сколько сэкономит. Например, вот так. Этот прием можно использовать практически в любой тематике.

прием сравнение

3. Визуализация фото в реальной жизни

Покупка в интернет-магазине - всегда определенный риск для клиента. Вдруг не подойдет, не угадаешь с размером, выбранная мебель не впишется в интерьер квартиры? Для этого и придумали визуализацию: чтобы увидеть, как тот или иной товар будет смотреться в реальной жизни.

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

онлайн примерочная

Или взять мебель. Крупная покупка, которую проблематично вернуть, если вдруг ошибешься с цветом, размером, иными параметрами. Существует масса приложений, которые помогают “увидеть”, как этот диван или люстра будут смотреться именно в вашей квартире: подойдут ли по габаритам, сочетаются ли по стилю. Можно также поиграть с цветом, подобрать дополнительные предметы интерьера. Все для удобства пользователя!

примерка мебели

4. Необычное меню

Горизонтальное, вертикальное иии… какое еще? На самом деле есть масса других вариантов, которые привлекут внимание пользователей. Один нюанс: консервативные люди могут и не оценить. Они привыкли, чтобы все было “как раньше”, привычно и понятно. Поэтому такой прием лучше использовать, если ваша целевая аудитория - люди молодые и современные, с восторгом относящиеся к новым тенденциям. Им точно понравится.

Обратите внимание на адаптивную версию: необычное меню должно быть не только удобным (человек должен разобраться в нем самостоятельно или с помощью ваших подсказок), но и отображаться на всех носителях: ПК, смартфонах, ноутбуках, планшетах. Если система глючит - лучше с таким меню не играть. Иначе выйдет как в бессмертной цитате: “Хотели как лучше, а получилось как всегда”.

меню магазина

5. Нover-эффект

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

Нover-эффект

6. Уникальные иллюстрации

Где взять уникальные картинки для своего сайта? Купить на фотостоке? Лучше не надо, сейчас это дурной тон. Сделать самому? Отличный вариант, но придется потратиться на профессиональное оборудование и услуги фотографа. Есть еще способ: нарисовать иллюстрации вручную. Это практически беспроигрышный вариант: сейчас в моде все крафтовое - то есть сделанное вручную. Понятно, что придется пригласить специалиста-иллюстратора и не раз согласовывать варианты рисунков, но дело того стоит. Если получится угадать миссию и основную идею сайта, дополнить весь остальной контент авторскими иллюстрациями - получится очень интересно и необычно.

иллюстрация на сайте

7. Сплит-макеты

Модный эффект - разделение экрана на две равные части. Такой дизайн решает сразу несколько проблем: привлекает внимание посетителя к каждому элементу, дает возможность показать в 2 раза больше информации на одном экране (особенно это актуально для лендингов, интернет-магазинов с широким ассортиментом да и везде, где много информации, и посетитель может растеряться). А еще дает возможность выбора - вспоминаем прием “Сравнение”.

Возможностей для реализации такой идеи тоже множество. Игра на контрастах, анимация, 3D-эффекты, необычная типографика - все к вашим услугам. Испортить сплит-макет практически невозможно: хороший веб-дизайнер обыграет его мастерски.

Сплит-макеты

8. Параллакс-эффект

Чувствуете, как фишки становятся все более интересными? То ли еще будет! На очереди параллакс-эффект, известный с давних времен, когда понятий “сайт” и “веб-дизайн” просто не существовало. Вообще параллакс (от греческого слова Parallax) означает смену, чередование. В природе так названо изменение видимого положения объекта по отношению к удаленному фону - в зависимости от того, где находится наблюдатель. В веб-дизайне - особый эффект, когда изображения на дальнем фоне двигаются медленнее, чем те, что находятся на переднем плане. Нет, это не сломает мозг посетителю - хороший параллакс-эффект способен сделать картинку более глубокой и объемной. Вот, например, как это выглядит.

А если использовать сразу несколько слоев, поиграть со скоростью движения элементов - возможности этого способа просто неисчерпаемы.

Параллакс-эффект

9. Виртуальная реальность

Виртуальные карты, онлайн-трансляции, 3D-путешествия по вашему офису, складу привлекают пользователей. Это возможность заглянуть одним глазком в чужую жизнь, как в замочную скважину. Мы уже писали о том, как использовать видеомаркетинг в веб-дизайне. Можно просто снимать и вставлять видео на сайт - главную страницу, карточки товаров, а можно сделать 3D-панораму, которая будет показываться посетителю постоянно. Например, продаете вы туристические путевки - показывайте карту стран, достопримечательности, прямые включения из городов мира, создавайте у себя на ресурсе эффект присутствия.

Это и есть виртуальная реальность - кто-то очень умный догадался использовать эту популярную технологию и в веб-дизайне. И это уже не просто 3D - намного шире. Можно “перенестись” куда захочешь, “побродить” по виртуальному пространству, ощутить прикосновения, послушать звуки, послушать VR-помощника, который расскажет о том, что происходит. Некоторые сайты смотришь, как кино: тут вам и эффект присутствия, и 360- градусные панорамы, и игры - что пожелаете.

Наиболее эффективно этот прием работает, когда человеку предлагается что-то протестировать. Как выбирать машину, если не едешь в автосалон? Легко: в виртуальной реальности тест-драйва для Volvo XC90 можно было оценить габариты автомобиля, почувствовать его скорость, отрегулировать сиденья. Мечта!

Конечно, не каждый может себе позволить столь масштабный и дорогой проект. Более демократичный вариант - панорама в 2D пространстве. Это не совсем виртуальная реальность, но уже с эффектом присутствия - например, стоит покрутить мышкой - и как будто поворачиваешь голову влево, вправо, вниз и вверх.

тест драйв

10. Оптические иллюзии

Оптические иллюзии вдохновляли, наверное, каждого человека. Движущиеся круги, картинки с двойным смыслом: так посмотришь - бокал вина, а взглянешь под другим углом - ба, обнаженная женщина. Функциональной нагрузки они практически не несут: главная цель оптических иллюзий - привлечь посетителя, заставить приковать взор к вашему сайту и остаться там навсегда (шутка). Они притягивают внимание, развивают творческое воображение и вообще круто смотрятся. Так, что многие студии дизайна оценили этот прием и вовсю используют в работе.

Основные приемы при создании иллюзий: изменение привычных представлений о форме и пространстве, выход за рамки стандартов, хитрые контрасты, способность увидеть то, что на первый взгляд недоступно. Вот как это можно применить на сайте. Прямо сейчас наведите курсор мыши на картинку и покрутите колесико вниз и вверх - чувствуете вибрацию?

Оптические иллюзии

Хотя нет, мы вас обманули. Есть в оптических иллюзиях и функциональность, в основном это придание элементам двойного смысла, что подчеркивает креативность бренда. Часто этот прием используется при создании фирменного стиля, особенно логотипов. Вот посмотрите на лого компании FedEx. Ничего не замечаете? А еще раз? Ладно, откроем секрет (мы сами не заметили без подсказки): между буквами E и X расположена белая стрелка. Это и игра воображения, и вполне конкретный посыл от бренда: мы движемся вперед, come together, my friend.

лого FedEx

Как правильно внедрять интересные фишки?

  1. Главный принцип - не навреди. Описанные эффекты - достаточно сложная штука, это вам не лендинг на шаблоне создать. Если привлечь к работе косорукого веб-дизайнера или отчаянного креативщика, которому собственные амбиции дороже выгоды клиента, ничего хорошего не получится. Эффекты будут смотреться колхозно и ничего, кроме усмешек и отторжения, не вызовут.
  2. Постоянно тестируйте. Если дизайнер справился, все получилось отлично, нужно еще проверить, как отреагирует аудитория. Вдруг людям не понравится? Поэтому любую фишку нужно протестировать, а уж потом запускать в работу. Приготовьтесь к тому, что дизайн придется менять, 2, 5 или 100 раз - пока не найдется оптимальный вариант, который устроит всех. Не стесняйтесь спрашивать напрямую у пользователей, нравятся ли им нововведения. Это укрепит обратную связь и создаст вам репутацию лояльной компании, которой интересно мнение клиентов.
  3. Не копируйте бездумно. Часто так бывает - понравилась идея, надо срочно утащить ее себе на сайт. Но, во-первых, помните об авторских правах, а во-вторых, любую хорошую идею можно чуть изменить, дополнить, подстроить под себя. Просто адаптируйте ее к вашей нише, специфике - и получайте вкусную конфетку в красивой обертке.

Где брать идеи?

У веб-дизайнеров есть много потайных мест, где они берут идеи для вдохновения. Это может быть как обычный Pinterest, так и профессиональные сообщества и ресурсы. Это, например, Awwwards, Designer News, Dribbble, Web Design Freebies, Behance Pinterest, Revision и другие. Ну а как технически внедрять идеи конкретно на ваш сайт - это вам подскажут специалисты.

Творите, экспериментируйте, перенимайте чужой опыт и адаптируйте его под себя! Не бойтесь экспериментов - лучше сделать и пожалеть, чем не сделать и наблюдать, как вашу идеи воплощают в жизнь конкуренты. Ну а мы, студия дизайна IDBI, всегда готовы помочь в разработке интересных проектов!

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!

Центрирование блока по вертикали и горизонтали

Чаще всего такие блоки с помощью свойств top и left смещают на 50%, а затем сдвигают в центр отрицательными отступами. Но есть более элегантный способ, о котором знают не все:
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

В случае, если позиционируется блок, а не изображение, придется также задать ему высоту и ширину.
Этот прием не сработает в IE7. Надеюсь, вы на него давно не ориентируетесь)

Вывод строки текста в многоточие

Довольно-таки старое свойство (работает в IE 6!), однако официально было добавлено только к стандарту CSS3. Так как его применение нечасто встречается в сети, можно сделать вывод, что о нем знают не все.
.text-overflow {
    white-space: nowrap;       /* Перво-наперво, запретим перенос строк */
    overflow: hidden;          /* Скрываем текст, который не помещается в блок */
    text-overflow: ellipsis;   /* Уводим текст в многоточие */
    display: block;            /* Элемент обязательно должен быть блочным */
}


Блоку можно задать ширину, но по умолчанию он растягивается на всю ширину родителя. Соответственно, многоточие начнет появляться, когда ширина дочернего блока превысит ширину блока родительского. Работает данный прием только для одной строки.
Блоки с зависимой шириной

Допустим, мы хотим добавить на сайт боковую панель.
<aside>
    ...
</aside>
<div>
    ...
</div>

Причем, ширина контента зависит только от ширины панели. Как это сделать без явного указания ширины? Способ есть:
.content {
    overflow: hidden;
}
.panel {
    float: right;
    width: 20%;
}


Как видите, «overflow: hidden» решил все проблемы.
Эллиптические углы

Немногие знают (или просто не используют на практике), что в параметре border-radius можно задавать не 4, а целых 8 параметров, по 2 параметра на угол. В этом случае первый параметр задает радиус по горизонтали, а второй — по вертикали. Пример:
.circle {
    border-radius: 150px/100px 100px/200px 0 0;
}

Немного о псевдоэлементах

Псевдоэлементы :before и :after по умолчанию будут перекрывать элемент, к которому они добавлены. В случае, когда псевдоэлемент нужно поместить по оси Z ниже родителя, указывается отрицательный z-index.

Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента. К ним относятся <img>, <br> и, как ни странно, <input>.

А вот <hr> по какой-то причине подхватывает псевдоэлементы нормально.

Бонус: мини-firebug на чистом HTML

Просто вставьте на страницу этот код:
<style contenteditable></style>


Вуаля, все работает. Спасибо, HTML5!
Штука практически бесполезная, однако, если ей задать больший размер шрифта, может сослужить хорошую службу во время презентаций. Ведь мало кто сможет разглядеть крохотные буковки настоящего firebug-а.

На сегодня все. Всем спасибо за внимание! Ждем ваших комментариев!

10 вещей в HTML, о которых вы вряд ли знали

Если хотите хоть как-то отличаться от других HTML-щиков, изучите нераспространённые приёмы языка.

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

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

Мы решили сделать подборку интересных приёмов в HTML (кажется, каждый программист уже умеет в этот язык разметки), про которые не напишут в обычных учебниках и не расскажут в видеокурсах. Эти приёмы были отобраны вручную среди сотен других, посоветованных участниками Stack Overflow. Кстати, тем, кто ещё не знаком с этой платформой, советуем взять на вооружение. Здесь удобно находить ответы на стандартные и нестандартные вопросы, а если вы чего-то просто не понимаете, то вам помогут опытные пользователи, по крайней мере, на это стоит надеяться. Ну что, пора приступать к рассмотрению интересных HTML-приёмов!


Если браузер просматривает страницу в SSL через HTTPS, он работает с протоколом HTTPS, если же нет, то с HTTP.

Это предотвращает появление в Internet Explorer сообщения об ошибке «Эта страница содержит как защищённые, так и незащищенные элементы» и сохраняет все ваши запросы в рамках одного и того же протокола.

Предостережение: при использовании  или @import для таблицы стилей, 7-я и 8-я версия Internet Explorer загружают файл дважды. Тем не менее, в остальном всё отлично.

Тег label логически связывается с элементом формы, используя атрибут «for». Большинство браузеров превращают это в ссылку, которая активирует связанный элемент формы.

Fiscal Year

 

Это делает ячейки доступными для редактирования! Можете протестировать, если не верите.

Тег optgroup — это одна из функций, которая зачастую не используется, большинство даже не в курсе его существования.

Optgroup, как контейнер объединяет в группу теги. Этот тег выделяет варианты в выпадающем списке select в отдельную группу.

Пример работы:


Volvo
Saab
  
Mercedes
Audi
  


Если вам нужно использовать маршрутизацию или перезаписывать URL, то можно воспользоваться тегом .

Допустим, вы располагаетесь на этом адресе — www.anypage.com/folder/subfolder/

Обычный анкор

Click here

указывает на www.anypage.com/folder/subfolder/test.html

Теперь, если добавить тег :

Click here

То анкор поведёт на www.anypage.com/test.html

onerror — это JavaScript событие, которое будет запущено прямо перед отображением маленького красного крестика.

Это можно использовать для написания сценариев замены «битых» изображений каким-либо альтернативным контентом.

На первый взгляд это может показаться бесполезным, потому что нельзя знать заранее такие вещи, но, предположим, что вы используете изображение со стороннего ресурса, который вы не контролируете. Stack Overflow обслуживается gravatar.com, они его не контролируют, но если что, то у SO, будут проблемы.

Элемент kbd может обозначать как набираемый текст, так и горячие клавиши. Многие заменяют его с помощью CSS.

Тег kbd используют для обозначения клавиш на клавиатуре. Например (да, выглядит страшновато):

Ctrl+Alt+Del

Тег blink

Должен использоваться для чего-либо крайне важного на сайте. Элементы под тегом будут мигать.

Тег marquee

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

Это малоизвестно, но вы можете указать lowsrc для показа превью, пока загружается основное изображение из src:


Это будет полезно, если вы не уважаете чересстрочные изображения.

Однако ещё в 2000-м году это свойство использовалось для атаки на Hotmail.

Для того, чтобы промаркировать удалённые элементы, можно использовать теги <del> и <ins>:

HTML sucks rocks!

Источник: Обсуждение на Stack Overflow

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *