Tag Archives: css

UTF-8 icons

https://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use Icon-like Smiley ☺ ☺ ☺ Hot Springs ♨ ♨ ♨ 8-Ball ➑ ➑ ➑ White Star ☆ ☆ ☆ Black Star ★ ★ ★ White Heart ♡ ♡ ♡ Black Heart ❤ ❤ ❤ Airplane ✈ ✈ ✈ Black Scissors ✂ ✂ ✂ White Scissors ✄ ✄ ✄ Crown ♕ ♕ ♕ Cross ✝ …

Pure.css — ещё один css-фреймворк

https://github.com/yahoo/pure/ Достаточно удобный, простой, производительный, от yahoo. Одно смущает — написан на чистом css, без использования препроцессоров.

Свойство will-change

Это свойство позволяет сказать браузеру, что сейчас будут изменяться некоторые свойства некоторых элементов, чтобы тот задействовал аппаратное ускорение. http://dev.opera.com/articles/css-will-change-property/

Grunt-таск для избавления от лишних стилей в css

https://github.com/addyosmani/grunt-uncss Конфиг примерно такой:

uncss: {
  dist: {
    files: {
      'dist/css/tidy.css': ['app/index.html','app/about.html']
      }
    },
    options: {
      compress:true
    }
}
processhtml: {
  dist: {
    files: {
      'dist/index.html': ['app/index.html'],
      'dist/about.html': ['app/about.html']
    }
  }
}

uncss: {

dist: {

files: {

'dist/css/tidy.css': ['app/index.html','app/about.html']

}

options: {

compress:true

}

processhtml: {

dist: {

files: {

'dist/index.html': ['app/index.html'],

'dist/about.html': ['app/about.html']

}

Less Watcher для PhpStorm

Нужно поставить less и добавить watcher: Полезные ссылки: http://webdevism.alabebop.com/?p=127 http://dan.clarke.name/2013/04/env-node-no-such-file-or-directory-error-in-intellij-idea-file-watcher/

CSS3 Flexbox in action

По ссылке http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ описано, как сделать вот такой тянущийся дизайн: http://dev.opera.com/static/articles/2013/flexbox-case-study/flexbox-modernizr.html

Анимация 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-x-fire — плагин для PhpStorm

Удобный плагин, позволяющий принимать изменения стилей из firefox в PhpStorm и применять их одним кликом. http://plugins.intellij.net/plugin/?webide&id=5348