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

@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: #fff;
}

.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: #fff;

}

http://css-tricks.com/examples/WebKitScrollbars/

Современные иконки: favicon, touchicon и т.д.

Вот более-менее полный набор иконок, который нужен сайту:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Для IE11 и Windows 8.1 нужен ещё файл browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>

Более подробно: http://css-tricks.com/favicon-quiz/ Генератор favicon — http://realfavicongenerator.net/

Свойство 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;
}

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/