Category Archives: HTML and CSS
Кастомизация скролла — мегаплагин
Скинули ссылку на доклад о плагине для эмуляции скролла. Обещают не хуже нативного. http://techno.2gis.ru/lectures/5
Sass-mixin для media query
@mixin media($query) { @if $query { @media only screen and (#{$query}) { @content; } } } Использование:
Поддержка стилей разными почтовыми программами
https://www.campaignmonitor.com/css/
Кастомизация скролла в 21м веке
Стилизация нативного scrollbar в Chrome. Chrome custom scroll .wrapper { width: 300px; height: 200px; background-color: red; overflow-y: auto; } .element { width: 200px; height: 500px; background-color: green; } ::-webkit-scrollbar { height: 10px; width: 6px; background: #fff; } ::-webkit-scrollbar-thumb { background: #616161; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: …
Современные иконки: favicon, touchicon и т.д.
Вот более-менее полный набор иконок, который нужен сайту: <link rel=»apple-touch-icon» sizes=»57×57″ href=»/apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» sizes=»114×114″ href=»/apple-touch-icon-114×114.png»> <link rel=»apple-touch-icon» sizes=»72×72″ href=»/apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» sizes=»144×144″ href=»/apple-touch-icon-144×144.png»> <link rel=»apple-touch-icon» sizes=»60×60″ href=»/apple-touch-icon-60×60.png»> <link rel=»apple-touch-icon» sizes=»120×120″ href=»/apple-touch-icon-120×120.png»> <link rel=»apple-touch-icon» sizes=»76×76″ href=»/apple-touch-icon-76×76.png»> <link rel=»apple-touch-icon» sizes=»152×152″ href=»/apple-touch-icon-152×152.png»> <link rel=»apple-touch-icon» sizes=»180×180″ href=»/apple-touch-icon-180×180.png»> <link rel=»icon» type=»image/png» href=»/favicon-192×192.png» sizes=»192×192″> <link rel=»icon» type=»image/png» href=»/favicon-160×160.png» sizes=»160×160″> <link …
Свойство will-change
Это свойство позволяет сказать браузеру, что сейчас будут изменяться некоторые свойства некоторых элементов, чтобы тот задействовал аппаратное ускорение. http://dev.opera.com/articles/css-will-change-property/
Сервис для генерации спрайтов
Не очень управляемый, но есть возможность сделать сжатие и преобразование в png8. http://zerosprites.com/
Анимация в css
С картинками и примерами. Understanding CSS Timing Functions http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/
Лоадер страницы на javascript
http://github.hubspot.com/pace/
Как рисовать треугольники на чистом css
Для треугольника, «смотрящего наверх»: p { width: 0; height: 0; text-indent: -9999px; border-right: 80px solid transparent; border-bottom: 80px solid #f09; border-left: 80px solid transparent; } JS Bin http://blog.michelledinan.com/08/2012/drawing-triangles-with-css/ Вот тут много разных использований border-ов — https://blog.bullgare.com/2015/06/%D1%84%D0%B8%D0%B3%D1%83%D1%80%D1%8B-%D0%BD%D0%B0-css-borders/