Свобода слова вебмастерского http://dimox.name CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинг Sat, 11 Feb 2012 08:44:18 +0000 http://wordpress.org/?v=1539 en http://creativecommons.org/licenses/by-nc-nd/2.0/Dimoxhttp://feedburner.google.com Элегантная форма авторизации с использованием CSS3 http://dimox.name/elegant-login-form-using-css3/ http://dimox.name/elegant-login-form-using-css3/#comments Mon, 23 Jan 2012 07:17:03 +0000 Dimox http://dimox.name/elegant-login-form-using-css3/ Элегантная форма авторизации с использованием CSS3

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

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

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

© 2012 Dimox.name | Элегантная форма авторизации с использованием CSS3
Все права защищены. Перепечатка запрещена.

]]> http://dimox.name/elegant-login-form-using-css3/feed/ Красивые 3D-кнопки с помощью CSS3 http://dimox.name/beautiful-3d-buttons-using-css3/ http://dimox.name/beautiful-3d-buttons-using-css3/#comments Mon, 02 Jan 2012 14:19:49 +0000 Dimox http://dimox.name/beautiful-3d-buttons-using-css3/ Красивые 3D-кнопки с помощью CSS3

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

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

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

© 2012 Dimox.name | Красивые 3D-кнопки с помощью CSS3
Все права защищены. Перепечатка запрещена.

]]> http://dimox.name/beautiful-3d-buttons-using-css3/feed/ Устранение проблемы увеличения межстрочного интервала в тексте при использовании графических смайлов http://dimox.name/text-line-height-while-using-graphic-smiles/ http://dimox.name/text-line-height-while-using-graphic-smiles/#comments Thu, 10 Nov 2011 10:09:12 +0000 Dimox http://dimox.name/text-line-height-while-using-graphic-smiles/ Я предпочитаю при написании текста использовать текстовые смайлы, а некоторые блоггеры любят графические (у WordPress, например, есть специальная опция, которая автоматически преобразует текстовые смайлы в картинки).

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

Для примера - вот так это выглядит на блоге Михаила Шакина:

shakin.ru

и вот так на блоге Сергея Сосновского:

sosnovskij.ru

Согласитесь, не очень красиво?

А устраняется данная неприятность просто - с помощью CSS. Читать далее »

© 2012 Dimox.name | Устранение проблемы увеличения межстрочного интервала в тексте при использовании графических смайлов
Все права защищены. Перепечатка запрещена.

]]> http://dimox.name/text-line-height-while-using-graphic-smiles/feed/ Загрузка части контента на WordPress с помощью AJAX http://dimox.name/downloading-of-the-content-on-wordpress-with-ajax/ http://dimox.name/downloading-of-the-content-on-wordpress-with-ajax/#comments Fri, 14 Oct 2011 10:52:52 +0000 Dimox http://dimox.name/downloading-of-the-content-on-wordpress-with-ajax/ Загрузка части контента на WordPress с помощью AJAX Сергей Сосновский в своем блоге рассказывал, что с помощью технологии AJAX в целях поисковой оптимизации скрыл часть содержимого сайта от поисковых систем (что, кстати не является клоакингом).

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

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

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

Итак, переходим к практике. Читать далее »

© 2012 Dimox.name | Загрузка части контента на WordPress с помощью AJAX
Все права защищены. Перепечатка запрещена.

]]> http://dimox.name/downloading-of-the-content-on-wordpress-with-ajax/feed/ Эмуляция псевдо-селектора :nth-child() в IE7 и IE8 http://dimox.name/nth-child-pseudo-selector-emulation-in-ie7-and-ie8/ http://dimox.name/nth-child-pseudo-selector-emulation-in-ie7-and-ie8/#comments Mon, 10 Oct 2011 10:17:14 +0000 Dimox http://dimox.name/nth-child-pseudo-selector-emulation-in-ie7-and-ie8/ Эмуляция псевдо-селектора :nth-child() в IE7 и IE8 Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять с белым и так далее.

При этом часто нет возможности изменить html-код (например, при использовании виджетов WordPress), чтобы каждому четному или нечетному элементу добавить CSS-класс, через который и менять оформление.

Выхода в таком случае только два: использовать либо JavaScript, либо CSS.

Лично для меня использование JavaScript в качестве решения данной задачи не желательно. В CSS же есть специальное свойство :nth-child(), с помощью которого можно сделать оформление зеброй, однако при этом существует загвоздка - с данным свойством не знакомы версии Internet Explorer ниже 9-й, а 8-ю и 7-ю версию пока еще нужно учитывать при верстке.

Решение задачи нашлось, хоть оно, к сожалению, и не панацея. Читать далее »

© 2012 Dimox.name | Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Все права защищены. Перепечатка запрещена.

]]> http://dimox.name/nth-child-pseudo-selector-emulation-in-ie7-and-ie8/feed/