WOW CSS

Не так уж давно, для того чтобы сделать что-то «округленное» с нефиксированной высотой приходилось создавать таблицу и крайним ячейкам в бэкграунд задавать нарезанные углы. Вообще любое «непрямоугольное» могло быть только графическим изображением. Сейчас же современные стандарты CSS позволяют создавать весьма интересные вещи. Но все нетипичные фигуры в большинстве своем дозволено сделать благодаря псевдо-селекторам :before и :after. Даже существуют некоторые «паттерны» для этого. А в недалеком будущем появится возможность задавать любые формы для элементов. С приходом CSS Masking я бы сказал наступит веб-дизайнерская сингулярность — веб-дизайн сможет быть любым. Единственное ограничение — это предел фантазии дизайнера. Но не будем о будущем. Все же я предлагаю вдохновиться прекрасным настоящим. В этом посте я собрал несколько крутых CSS реализаций. В некоторых из них спрятаны полезные техники, а в других любовь к CSS творчеству авторов этих подделок.

Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDSСSSWINNERCSSREEL или CSSDESIGNAWARDS будет неплохой рекламой. 

Таймер на чистом CSS

5f6b3d5588c4bde8f044d0140970c956

Радуют геометрически правильные логотипы которые можно воссоздать на CSS

24853d043f8b1751681d256bf3c071bd

Crop LESS

b75e829c7a45056c0bb27834a3bb1a34
Полезный LESS миксин, который позволяет создавать именно адаптивные изображения, а не отзывчивые. О нечто подобном писал немалоизвестный хабраюзер grokru — Focal Point.

CSS Family Tree

be184ae2f3d9d792d317bc9107ab0345

3D Macintosh Plus

17f41dd0d8bb3133d50f032c753cbd51
А еще есть Macbook Pro содержащийся в одном элементе <i></i>.

CSS Dashed Shadow

eb38c9ce408db19172ed78e7659b5060

Meta Fizzy

780cb94b6efcce2efe7524da891b7110
SCSS миксин анимирует text-shadow, превращая ваш текст в кислотные заголовки.

Также могли видеть на Хабре:

 

Напоследок небольшая полезность от Криса Коера
9203ea42de2a4c9b0ae6d477fe16dd4b

Большое спасибо за внимание.