Удобный способ вёрстки универсальных иконок

Приветствую вас, читатели Тру-Кодера. Сегодня я расскажу вам об одном очень удобном способе вёрстки иконок, который уменьшит размер используемой для иконок графики и упростит создание css-спрайтов. Данный способ применим в основном в тех случаях, когда иконки находятся на однородном фоне. Итак, приступим. Читать далее Удобный способ вёрстки универсальных иконок

Рисуем эллипс на canvas


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

Кнопка «Вверх» с плавной прокруткой страницы на jQuery

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

Транcформации на canvas

Сохранение и восстановление состояний

Прежде чем я начну рассказывать про трансформации, я бы хотел обратить ваше внимание на два метода: save и restore. Эти методы используются для получения и восстановления состояния холста. Состояние холста — это положение системы координат и применённые стили. Каждый раз, при вызове метода save, состояние холста помещается в стек, а каждый раз при вызове метода restore достаётся оттуда. Читать далее Транcформации на canvas

Отрисовка текста на canvas’e


Для отрисовки текста на canvas‘е используеутся методы fillText(text, x, y) и strokeText(text, x, y). Первый метод рисует текст, заполненный заливкой, которая хранится в свойстве fillStyle, второй рисует обводку текста. Параметры отрисовываемого текста устанавливаются при помощи свойств Читать далее Отрисовка текста на canvas’e

Делаем мир canvas ярче. Применение стилей, цветов и теней


Раньше я рассказывал про то, как рисовать на canvas’e графические примитивы. При их отрисовке использовались установленные по умолчанию цвета и стили. Можно сделать ваши творения немного ярче и привлекательней, если использовать некоторые свойства контекста отрисовки на canvas’е. Читать далее Делаем мир canvas ярче. Применение стилей, цветов и теней

Отрисовка графических примитивов с помощью canvas


Уже далеко не новый html-элемент canvas сегодня поддерживается во всех нормальных браузерах. Если вы используете FireFox, Opera или Google Chrome последних версий, то проблем возникнуть не должно. Даже IE9 поддерживает canvas. Читать далее Отрисовка графических примитивов с помощью canvas

Placeholder HTML5 и его использование

Все, наверняка, видели подсказывающий текст в поле формы, который пропадает, как только установить курсор в это поле. Это очень экономит место, поскольку не надо подписывать каждое поле формы слева. Сегодня мы рассмотрим два способа создания данной фишки: старый (с помощью JavaScript) и новый (с помощью html5). И очередной раз восхитимся технологиями будущего 🙂 Читать далее Placeholder HTML5 и его использование

TrackBar HTML5 и его использование

Трекбар — привычный элемент управления в операционных системах, но в веб-интерфейсе его встретишь редко, так как встроенной возможности для создания этого элемента в HTML4 не было. Существуют JavaScript-библиотеки, при помощи которых можно легко создавать трекбар на веб-странице. Потребность в этих библиотеках, однако, скоро отпадёт, так как, используя HTML5, этот элемент создаётся очень легко. Читать далее TrackBar HTML5 и его использование