Tag Archives: css3

Свойство will-change

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

Фильтры картинок на клиенте

«Фильтрация изображений (автоматические корректировки параметров, эффекты, пост-обработка и т.п.) – это задачи которые до недавнего времени вообще не возможно было решить в браузере. Все делалось с помощью старых друзей: флеша, сервера или фотошопа. Сейчас, в связи с повсеместным использованием html5 и css3, появилось и развивается сразу несколько возможностей обработки изображений непосредственно в браузере. Давайте попробуем …

Блоки произвольной формы с CSS Shapes

http://sarasoueidan.com/blog/css-shapes/index.html Поддержки браузерами пока почти нет.

vw, vh, vmin, vmax

В css можно задавать ширину/высоту в процентах от ширины viewportа. 1vh(vw) = 1% ширины(высоты) vmin/vmax — минимальное/максимальное значение из ширины и высоты. https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths http://caniuse.com/#search=vh

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

CSS3 для реализации табов, аккордеона и тогглера без javascript

Табы JS Bin Методика — скрытые инпуты и следующий css:

.tab-switcher input[type=radio]:checked ~ .tab-content {
  z-index: 10;
  opacity: 1;
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ label {
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ .tab-content {

z-index: 10;

opacity: 1;

background: #888;

color: white;

}

.tab-switcher input[type=radio]:checked ~ label {

background: #888;

color: white;

}

~ позволяет обращаться к элементам-«братьям».

Сервис для генерации CSS3-градиентов

http://gradients.glrzad.com/ ещё один — http://www.cssmatic.com/gradient-generator