Категории: CSS

CSS: оформление скроллбара в стиле Gmail

Владимир | | CSS, Web дизайн.

gmail scrollbar

Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).

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

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

JavaScript виджет: бесконечная загрузка твитов

Владимир | | CSS, HTML, JavaScript, Web разработка.

load on scroll

В последнее время я часто замечаю на различных сайтах виджеты, которые подгружают контент при определённых действиях посетителя. Такой подход позволяет с одной стороны, сократить количество данных на странице, а с другой – при необходимости показывать практически неограниченный объем информации.

Рассмотрим небольшой практический пример.

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

На первый взгляд всё предельно просто, twitter предоставляет API, с помощью которого можно получить твиты любого пользователя (если они открыты). Вставить их сайдбар тоже не проблема.

Но на практике возникает несколько интересных моментов.
Читать дальше

Небольшой эксперимент с использованием data: URL

Владимир | | CSS, HTML, Web разработка.

data uri

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

К сожалению, не всегда есть возможность проигнорировать устаревшие браузеры (главным образом речь идет о IE6 и 7). И это сильно замедляет использование новых стандартов.

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

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

Об одной из таких технологий и пойдёт речь в этой статье. Называется она data: URL.
Читать дальше

Galleria — плагин для создания галерей с картинками

Владимир | | CSS, HTML, JavaScript, Web разработка.

galleria

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

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

Можно, конечно, написать собственную реализацию такого плагина, но это процесс трудоемкий (если делать качественно) и, скорее всего, код процентов на 90 будет повторять то, что есть в других плагинах.

В таких случаях гораздо предпочтительнее использовать фреймворки. Об одном из них и пойдет речь в этой статье.
Читать дальше

jQuery и плагины: решения для просмотра больших изображений

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

jquery img zoom

Приветствую всех!

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

Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.

Представьте, у вас есть высококачественные изображения с высоким разрешением (фотографии, скриншоты и т.п.) и их нужно показать на сайте. Понятно, что вставить их, не меняя размеры, не получится. Картинки просто «порвут» дизайн. Поэтому предварительно нужно их уменьшить, но и возможность просмотра полноразмерного изображения необходимо обеспечить.

Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.

<a href="1.jpg"><img src="1_thumb.jpg" /></a>

где 1_thumb.jpg – уменьшенное изображение 1.jpg.

Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».

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

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

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

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

Плавающий виджет. Поддержка IE6.

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

Приветствую всех!

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для jQuery, позволяющем создать плавающий виджет.

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть 🙂 … но есть люди, которые им пользуются 🙁
Читать дальше

Плавающий виджет. Версия 2.

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

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

Сразу приведу ссылку на архив с новой версией.

Source

Изменения и новые возможности
Читать дальше

jQuery плагин: плавающий виджет с кнопками

Владимир | | CSS, HTML, JavaScript, Web разработка.

twitter button

Приветствую всех!

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

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

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

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

Возвращаемся к плагину.
Читать дальше

960 Grid System: зачем нужны CSS фреймворки

Владимир | | CSS, HTML, Web разработка.

960grid logo

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.
Читать дальше

Исправляем недостатки IE6

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

ie6-bugs-logo

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности 😉

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

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

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

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.
Читать дальше