Шпаргалки для разработки

Мар 19

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

Итак:

HTML 5

read all »

Вертикальный текст в html

Сен 24

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

Карта сайта – какая у вас?

Сен 23

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

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

slickmap-css-sitemap

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

Календарь в стиле iCal для архивов в wordpress

Сен 09

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

Градиентный текст на CSS

Май 28

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

screen1

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

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

Сам код:

<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;
}

Сам оригинал

10 полезных кроссбраузерных свойств CSS.

Май 19

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

1.Overflow

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

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

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

Условные комментарии под разные версии IE

Май 14

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

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

read all »

Трехмерность при помощи CSS уже сегодня

Май 12

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

multiple-cubes-css

read all »

Немного про типографику

Май 06

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

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

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

color:#cecece;

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

text-align:justify;

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

Ускоряем загрузку сайта

Апр 20

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