Рубрика «css3» - 21

Солнце, лето, море, пляж — распиарю свой вояж
В свободное время я пишу ленточный движок для веб-сайтов, используя модные современные технологии. Эта статья — продолжение заметок (Tips & Tricks) про его создание.
Часть 1 находится здесь.

Как же дела у каретки за прошедший с момента публикации месяц? Новости читаю, дела идут, 200 источников, 150 тысяч записей в месяц, данные для анализа собираются. Трафик устойчиво низкий, по 80-100 человек в сутки (дубликат контента).

Мегапопулярные Фейсбук, ВК, Твиттер, Пинтерест — всё это так называемые «ленты». Лента — весьма удобный для человека способ предоставления информации, если её можно как-либо упорядочить. История циклична, всё повторяется — именно таким способом и выводили результаты расчётов первые компьютеры, только на рулоны бумаги, а не на мониторы 1920*1080*32.

Вычитал я в новостях, что туристический сезон начинается. «А ведь я тоже кое-где был — можно и поделиться» — пришла мысль, и сегодня мы будем затачивать ленту под развлекательный мини-бложек. Турлента — с гейшами и путешествиями под катом.
Читать полностью »

Всем доброго времени суток!

Совсем недавно мне нужно было сотворить некий multi-action control для списка записей. На ум сразу же пришло использование split button dropdown, т.е. в данном случае кнопки отправки формы совмещенной с выпадающим списком экшенов. Подобные контролы не редко можно встретить в современных интерфейсах. Также существуют готовые решения входящие в сборки типа Twitter Bootstrap.

Однако реализации подобные бутстраповским не нравятся по нескольким причинам:

  • излишняя и не совсем нейтивная разметка
  • заточенность под javascript

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

Адаптивная верстка: CSS&JS фреймворк Skeleton
В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать полностью »

image

В этом уроке мы будем использовать чистый CSS3 для создания навигационного меню, которое вы можете найти у Impressionist UI by Vladimir Kudinov.

ДЕМО
Исходные файлы

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

image

В этом уроке мы будем создавать видео плеер от импрессиониста UI Vladimir Kudinov. Мы будем использовать CSS3 для моделирования и "MediaElement.js" для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который не работает на старых браузерах с использованием Flash и Silverlight, который имитирует MediaElement HTML5 API.

ДЕМО
Исходные файлы

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

image

Демо
Исходные файлы

Урок о том, как создать эффект наложения, при том чтобы показывались некоторые детали объекта или изображения. Используем только CSS комбинацию: проверка псевдо-класса с одноуровневыми элементами.

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

Jquery.waypoints это плагин для реализации движения объектов по набору точек, так называемым вейпоинтам, с заданной скоростью и другими параметрами, физически имитирующие реалистичность. Частичное описание алгоритма было описано тут.

Отправляем теги в путешествие (jquery.waypoints)
Читать полностью »

CSS3 привнесло в нашу жизнь новые единицы измерения: vw, vh, и vmin. С недавних пор dev-версия Chrome (под номером 20) тоже поддерживает их, а это дарует некоторую надежду, что и разработчики других браузеров последуют этому примеру. На самом деле, это было бы кстати, ведь это очень удобно и практично, а я попробую рассказать, почему это так.

Почему это клево?

Много причин. Вот две из них:

  1. Существует такая вещь, как длина строки текста, при которой чтение является комфортным. Я не хочу разжигать холивары, но, допустим, это 80 символов. Так вот, эти единицы измерения позволяют вам соблюдать это значение на любом размере экрана
  2. Еще они могут регулировать отношение заголовка к основному тексту, как, например, в одном из постов Trent Walton (англ.)

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

CSS3 привнесло в нашу жизнь новые единицы измерения: vw, vh, и vmin. С недавних пор dev-версия Chrome (под номером 20) тоже поддерживает их, а это дарует некоторую надежду, что и разработчики других браузеров последуют этому примеру. На самом деле, это было бы кстати, ведь это очень удобно и практично, а я попробую рассказать, почему это так.

Почему это клево?

Много причин. Вот две из них:

  1. Существует такая вещь, как длина строки текста, при которой чтение является комфортным. Я не хочу разжигать холивары, но, допустим, это 80 символов. Так вот, эти единицы измерения позволяют вам соблюдать это значение на любом размере экрана
  2. Еще они могут регулировать отношение заголовка к основному тексту, как, например, в одном из постов Trent Walton (англ.)

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

Stephen Woods, фронтэнд-инженер в Flickr, объясняет, как создать простой лайтбокс с поддержкой жестов и дает советы для улучшения восприятия и производительности сенсорных интерфейсов.

Создание лайтбокса для сенсорного интерфейса на HTML5

Необходимые знания: средний уровень CSS, средний-продвинутый уровень JavaScript
Требования: Android или IOS устройство
Временные затраты: 2-3 часа
Скачать исходники
Просмотр демонстрации
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js