Category Archives: HTML and CSS

pointer-events: пробрасывание событий через SVG-слой ниже

В css надо написать:

#my-cool-svg {
  pointer-events: none;
}

#my-cool-svg {

pointer-events: none;

}

Можно делать с событиями много интересного, подробнее здесь: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Анимация css-ом

Все-таки лучше делать это translate-ом. Из-за обработки через WebGL (т.е. мощностями видеокарты) и субпиксельности анимации (нет «рывков»). http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ http://css-tricks.com/tale-of-animation-performance/

Генерилка кастомных шрифтов

http://fontcustom.com/

Повернуть картинку при помощи css

Проблема, как всегда, в ИЕ. Вот сервис? который генерит стили и для нормальных браузеров, и для старых ИЕ — http://www.useragentman.com/IETransformsTranslator/ На выходе получаем что-то вроде:

box-sizing: border-box

Чтобы padding выделялся внутри блока, а не «распирал» его (т.е. чтобы, к примеру, не подгонять высоту одновременно с padding-top).

box-sizing: border-box

1	box-sizing: border-box

http://paulirish.com/2012/box-sizing-border-box-ftw/

Grunt: система сборки для фронтенд-разработчиков

http://gruntjs.com/ Ставится как пакет к node, через npm. Конфиги пишутся на javascript.

Библиотека для создания презентаций на html+js

Демо — http://lab.hakim.se/reveal-js/#/. Репозиторий на github — https://github.com/hakimel/reveal.js. Умеет экспорт в pdf.

Подборка полезного для любителей Twitter Bootstrap

http://habrahabr.ru/post/154687/ — инструменты для работы с twitter bootstrap.

Сервис для показа вёрстки, html и js онлайн

http://codepen.io/ — в общем-то, аналог jsFiddle.

Сервис для подбора нестандартных шрифтов и их загрузки

Давно, когда я ещё верстал, обычно смотрел и сравнивал нестандартные шрифты в ворде. Тут пришлось опять немного поверстать, а офиса у меня уже очень давно как нет. Нашёл такой замечательный сервис: http://www.google.com/webfonts. Можно подобрать шрифт по параметрам (ширина букв, толщина линий, наклон) и после этого подгрузить себе в шаблон простым тэгом типа <link href=’http://fonts.googleapis.com/css?family=Tenor+Sans’ rel=’stylesheet’ …