Твит

Прошли те времена, когда веб-разработчику были доступны всего несколько шрифтов. Сегодня есть хранилище Google Web Fonts, есть скрипты, основанные на javascript, поддержка собственных шрифтов внедрена в CSS3 — можно использовать любой метод. Но какой подходит именно в вашем случае? В статье — обзоры, плюсы и минусы каждого из сервисов. Два последних — устаревшие методы, поэтому описаны в образовательных целях.

Твит

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

Твит

Вы, наверное, были на сайтах подобных JSBin. На нем можно написать HTML, CSS или javascript коды и потом увидеть результат на соседней панеле. Это может быть очень удобно для быстрой проверки кода. Сегодня я покажу вам, как можно реализовать подобный функционал свомим руками за 10 минут. Для ввода кода у нас будет два поля: HTML и CSS
Выводиться код будет в iframe окне. При создании iframe в нем создается html объект...

Твит

Scrolling Parallax это jQuery плагин, который добавляет эффект параллакса при прокрутке страницы с помощью скролбара или колеса мыши. Это позволяет фону страницы прокручиваться с другой скоростью нежели остальной контент страницы. Эффект параллакса позволяет с легкостью создавать иллюзию глубины вашего сайта. Самый простой вариант использования плагина это просто указать плагину путь до изображения. Плагин возьмет данное изображение и растянет его на всю ширину страницы и на 150% высоты страницы. Дополнительные 50% послужат для плавной прокрутки фона вместе с основным контентом. У плагина масса опций, которые позволяют скролить быстрее, медленнее, зацикливать скрол и т.д.

Твит

В статье описан javascript, с помощью которого в статье можно оставлять ссылку на её исходный код.
Эта фишка нужна в первую очередь блогам технической тематики в вебдизайне.
Конечно можно обойтись и без этого, например:
"... а теперь, дорогие читатели, чтобы врубиться в суть моего мануала, в своём браузере щёлкните по странице этого блога/такого-то сайта курсором, нажмите на правую кнопку мыши своего браузера Firefox и выберете "исходный код страницы"...

Твит

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

Твит

Сегодня я бы хотел поведать вам о прекрасной javascript библиотеке Raphaël. Мы создадим анимированную диаграмму умений с помощью этой библиотеки. Идея очень проста: мы нарисуем несколько дуг с помощью математических функций и будем выводить уровень умения в центральном круге в процентах. Давайте приступим.

Анимированная диаграмма умений с помощью javascript библиотеки Raphaël
Анимированная диаграмма умений с помощью javascript библиотеки Raphaël

Твит

HTML5 является новой и обновленной версии HTML. Он был разработан для облегчения жизни веб-дизайнеров. HTML5 имеет большое количество функций, такие как воспроизведение видео, поддержка аудио и drag-and-drop, которые были зависимы от посторониих плагинов для браузеров в том числе adobe flash и microsoft silverlight через холст элемент html5 юзеры смогут сделать графики на лету опять же без потребности плагинов. В настоящие время HTML5 редактируется Яном Хиксоном от Google и Дэвидом Хайяттом от Apple.

Твит

Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста «на лету». Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии – позвольте пользователям применять стандартные тэги для оформления своих комментариев.

Твит

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

Содержание курса:

Как работает jQuery
Как обратиться к нужному элементу?
Выдвигающаяся панель
Эффект исчезновения
Движение и изменение элемента
Меню с эффектом аккордеон
Доработка меню с эффектом аккордеон
Всплывающие окна с подсказками
Всплывающие окна с подсказками #2
Сворачиваемые списки
Простая галерея с заменой картинок
Стилизация ссылок на файлы различных ти

Твит

Как часто при работе за компьютером вы используете горячие клавиши? Лично я очень часто. На мой взгляд, это сильно экономит время. Любой браузер, конечно, поддерживает использование горячих клавиш, но функции, которые вызываются их нажатием, обычно не могут оперировать с содержимым страницы. Для этого, чаще всего, используется javascript. С его помощью можно обрабатывать нажатие, а точнее, нажатие и отпускание клавиш, и имитировать клик по кнопке, чего достаточно, чтобы написать скрипт для отправки сообщения по нажатию, скажем, сочетания клавиш ctrl+enter, что я и предлагаю сделать.