Category Archives: HTML and CSS

Онлайн конвертер картинок в base64

http://www.askapache.com/online-tools/base64-image-converter/ Вот ещё альтернативы: http://www.motobit.com/util/base64-decoder-encoder.asp (upload) http://www.greywyvern.com/code/php/binary2base64 (from link with little tutorials underneath) http://base64img.com — realtime HTML5 conversion of images to Base64 http://datauri.net — automatically embeds data URIs in CSS files. supports multiple files / drag & drop

Убийца Photoshop для mac

http://bohemiancoding.com/sketch/

Обрамление произвольного текста полосками слева и справа

Хочется сделать как-нибудь так: Но для произвольного текста.

Простой подход к реализации responsive design

Описано, как сделать сетку с использованием media queries. http://www.adamkaplan.me/grid/

Вывести элемент по центру другого

Без заранее не известной ширине и высоте.

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.element {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

Работает в ИЕ9+. JS Bin http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Формирует css-стили прямо по psd

http://csshat.com/ — плагин для Photoshop

CSS-анимация разных вращений

Всё сводится к подбору нужной перспективы у контейнера (http://www.w3.org/TR/css3-transforms/#perspective-property)

  perspective: 300px;
  -webkit-perspective: 300px;

1 2	perspective: 300px; -webkit-perspective: 300px;

А для самого элемента к подбору точки вращения (http://www.w3.org/TR/css3-transforms/#transform-origin-property)

  transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;

1 2	transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%;

и повороту по нужной оси на нужный угол (http://www.w3.org/TR/css3-transforms/#funcdef-rotate)

  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);

1 2	transform: rotateX(90deg); -webkit-transform: rotateX(90deg);

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

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

Сложные css-селекторы

http://learn.shayhowe.com/advanced-html-css/complex-selectors

Javascript-события при анимации

http://www.sitepoint.com/css3-animation-javascript-event-handlers/ Особенно полезна эта табличка про совместимости браузеров и префиксы: W3C standard Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd