XHTML » Страница 2 » Блог о СОЗДАНИЕ САЙТОВ | Разработка сайтов

Pannellum - просмотрщик панорам

Использует HTML5, CSS3, javascript, и WebGL.
https://pannellum.org/

ZUI - ui библиотека коллекции элементов интерфейса

Включает в себя: Alert, Badge, Banner, Button, Dialog, Example, Font, Form, Header, Image, Keyboard, Layout Group, Layout, Navigation, Page Header, Page, Pagination, Select Container, Splitter, Status Bar, Status, Steps, Tab, Table, Tag, Toolbar, Top Bar, Typography.

Пример Steps

https://github.com/zource/zui | Примеры и документация

Интересные возможности line-height

Оформление каждой строки текста своим цветом

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(white, 0.8),
    rgba(white, 0.8) $lh,
    rgba(white, 0.6) $lh,
    rgba(white, 0.6) $lh*2,
    rgba(white, 0.4) $lh*2,
    rgba(white, 0.4) $lh*3,
    rgba(white, 0.2) $lh*3,
    rgba(white, 0.2));
}

Линии между строками текста

.parent {
  padding: $lh*2;
  background: #082838;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(white, 0)   0,
    rgba(white, 0)   $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px-1,
    rgba(white, 0.1) $lh/1em*16px
  );
}

Размещение изображений на каждой строке

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}

Использовать сие на свой страх и риск, т.к. может чем-то не поддерживаться =)
ДЕМО

Responsive Shopping Cart с пересчетом на JS

http://codepen.io/justinklemm/pen/zAdoJ

Еще одна корзина c пересчетами на js

http://codepen.io/bartveneman/pen/KHxLG

Корзина на CSS с выпадающими элементами