Alex Volkov

Давно хотел запостить кучу крайне полезных шапргалок по html, css, javascript.

Итак:

HTML 5

read all »

Когда я делал карту сайта, захотелось отобразить заголовки категорий вертикально. Но ни html, css пока сделать такого не позволяют. Хотя нет, css позволяет задать порядок расположения слов для языков, у которых порядок написания справа налево и сверху вниз (китайский например), но для кирилицы это не пойдет.
Как еще можно сделать текст вертикальным? Можно обрезать слово по буквам и разместить их в столбик. Можно применить javascript.
Есть еще один способ – создать картинку на лету из svg. read all »

Карты сайта обычно у всех одинаковы – это простыня со списком ссылок, которых чем больше – тем лучше. Считается, что так лучше в плане сео. И хотя для ботов уже давно делают свою карту, в xml, многие продолжают делат как раньше.Особенно часто для вп используют плагин dagon sitemap generator.

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

Данный пример хорошо подходит для коммерческого сайта, а вот для блога переделать его проблемно. Особенно, если постов много и категорий.
Немного поколдовав, я сделал вот такую карту сайта с использованием jQuery . Под осликами наверно не будет корректно отображаться.
read all »

Давно пылится в черновиках красивый примерчик для календаря. В оригинале календарь под хтмл, я приладил для вордпресса, на страницу архивов по месяцам.
Вот тут можно посмотреть календарь в действии, скрин
read all »

Интересная техника по созданию градиентного текста. Суть в перекрытии текста прозрачным png. В заголовок h1 вставляется span, которому прописывается бекграунд.

Например вот так:

Все примеры можно глянуть тут

Сам код:

<h1><span></span>CSS Gradient Text</h1>

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Сам оригинал

Небольшой обзор полезных качеств некоторых CSS свойств

1.Overflow

Его итак все знают. Включает прокрутку, если содержимое не влазиет в блок. Однако есть у него замечательное качество – данное свойство может растянуть блок без обтекания(float).

Проблемы иногда бывают в огнелисе – элементы сжаты по высоте, для исправления нужно выставлять обтекание. Обтекание может принести проблем при auto высоте или при естесственно отпозиционированных элементов.

Таким образом, используя overflow:hidden; для блочных элементов, можно растянуть элемент по высоте без выставления обтекания.
read all »

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

С введением условных комментариев (conditional comments), жизнь немного упростилась. При их помощи можно вынести корректно отображающиеся стили под конкретный браузер.

read all »

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

read all »

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

font-family:Arial{Verdana};
font-size:10px;

Если просили покрасивее, то добавлял

color:#cecece;

Если просили поизящнее:

text-align:justify;

На этом все познания заканчивались. read all »

Краткий смысл статьи – кешируйте все, что только можно. Некоторые вещи конечно мелочи, но именно мелочи делают профессионала профессионалом. read all »