Свобода слова вебмастерского

Sublime Text - прекрасный текстовый редактор для веб-разработчиков

Dimox — Wed, 11 Apr 2012 07:14:56 +0000

Пишу этот пост под большим впечатлением. Не прошло и недели, как я узнал про замечательный текстовый редактор под названием Sublime Text. Если описать одним словом тот эффект, который он на меня произвел, то это просто: “Вау!“.

Думаю, что настало время сменить старый добрый Rapid PHP, которым я пользовался почти 4 года. Вообще-то я хотел перейти на Notepad++, но, узнав про Sublime Text, оказалось, что последний гораздо лучше.

jQuery-скрипт для стилизации селектов (тег select) html-форм

Dimox — Mon, 02 Apr 2012 05:28:18 +0000

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

Не поддаются полной стилизации следующие элементы html-форм:

раскрывающийся список ;
переключатель .
поле для отправки файла .

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

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

Сразу хочу заметить, что данный скрипт не подходит для всех возможных случаев применения селектов (читайте недостатки). Читать далее »

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Dimox — Wed, 21 Mar 2012 11:53:50 +0000

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.

Вариант на JavaScript

Можно посмотреть готовый пример.

Код скрипта:

var t;

function up() {

  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

  if(top > 0) {

    window.scrollBy(0,-100);

    t = setTimeout('up()',20);

  } else clearTimeout(t);

  return false;

}

Число -100 - это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20). Читать далее »

Элегантная форма авторизации с использованием CSS3

Dimox — Mon, 23 Jan 2012 07:17:03 +0000

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации.

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

Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код. Читать далее »

Красивые 3D-кнопки с помощью CSS3

Dimox — Mon, 02 Jan 2012 14:19:49 +0000

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

Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.

С помощью CSS3 я “нарисовал” практически копии этих кнопок, кодом которых и поделюсь в данной статье. Читать далее »