Доброго времени суток, уважаемые хабравчане. Не так уж давно, для того чтобы сделать что-то «округленное» с нефиксированной высотой приходилось создавать таблицу и крайним ячейкам в бэкграунд задавать нарезанные углы. Вообще любое «непрямоугольное» могло быть только графическим изображением. Сейчас же современные стандарты CSS позволяют создавать весьма интересные вещи. Но все нетипичные фигуры в большинстве своем дозволено сделать благодаря псевдо-селекторам :before и :after. Даже существуют некоторые «паттерны» для этого. А в недалеком будущем появится возможность задавать любые формы для элементов. С приходом CSS Masking я бы сказал наступит веб-дизайнерская сингулярность — веб-дизайн сможет быть любым. Единственное ограничение — это предел фантазии дизайнера. Но не будем о будущем. Все же я предлагаю вдохновиться прекрасным настоящим. В этом посте я собрал несколько крутых CSS реализаций. В некоторых из них спрятаны полезные техники, а в других любовь к CSS творчеству авторов этих подделок.
Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDS, СSSWINNER, CSSREEL или CSSDESIGNAWARDS будет неплохой рекламой.
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/5f6/b3d/558/5f6b3d5588c4bde8f044d0140970c956.jpg)
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/248/53d/043/24853d043f8b1751681d256bf3c071bd.jpg)
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/b75/e82/9c7/b75e829c7a45056c0bb27834a3bb1a34.jpg)
Полезный LESS миксин, который позволяет создавать именно адаптивные изображения, а не отзывчивые. О нечто подобном писал немалоизвестный хабраюзер grokru — Focal Point.
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/be1/84a/e2f/be184ae2f3d9d792d317bc9107ab0345.jpg)
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/17f/41d/d0d/17f41dd0d8bb3133d50f032c753cbd51.jpg)
А еще есть Macbook Pro содержащийся в одном элементе .
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/eb3/8c9/ce4/eb38c9ce408db19172ed78e7659b5060.jpg)
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/780/cb9/4b6/780cb94b6efcce2efe7524da891b7110.jpg)
SCSS миксин анимирует
Напоследок небольшая полезность от Криса Коера
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/920/3ea/42d/9203ea42de2a4c9b0ae6d477fe16dd4b.png)
Большое спасибо за внимание.
Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDS, СSSWINNER, CSSREEL или CSSDESIGNAWARDS будет неплохой рекламой.
Таймер на чистом CSS
![](https://habrastorage.org/getpro/habr/post_images/5f6/b3d/558/5f6b3d5588c4bde8f044d0140970c956.jpg)
Радуют геометрически правильные логотипы которые можно воссоздать на CSS
![](https://habrastorage.org/getpro/habr/post_images/248/53d/043/24853d043f8b1751681d256bf3c071bd.jpg)
Crop LESS
![](https://habrastorage.org/getpro/habr/post_images/b75/e82/9c7/b75e829c7a45056c0bb27834a3bb1a34.jpg)
Полезный LESS миксин, который позволяет создавать именно адаптивные изображения, а не отзывчивые. О нечто подобном писал немалоизвестный хабраюзер grokru — Focal Point.
CSS Family Tree
![](https://habrastorage.org/getpro/habr/post_images/be1/84a/e2f/be184ae2f3d9d792d317bc9107ab0345.jpg)
3D Macintosh Plus
![](https://habrastorage.org/getpro/habr/post_images/17f/41d/d0d/17f41dd0d8bb3133d50f032c753cbd51.jpg)
А еще есть Macbook Pro содержащийся в одном элементе .
CSS Dashed Shadow
![](https://habrastorage.org/getpro/habr/post_images/eb3/8c9/ce4/eb38c9ce408db19172ed78e7659b5060.jpg)
Meta Fizzy
![](https://habrastorage.org/getpro/habr/post_images/780/cb9/4b6/780cb94b6efcce2efe7524da891b7110.jpg)
SCSS миксин анимирует
text-shadow
, превращая ваш текст в кислотные заголовки. Также могли видеть на Хабре:
- Client-side full-text search in CSS
- Картман
- Мона Лиза
- CSS Эволюция мышей Apple
- Симпсоны на чистом CSS
- Танцующий Бендер
- iPhone 4 на CSS3 без использования картинок
- Пример — часы на СSS3 без изображений и JavaScript
- Женская грудь на CSS3
Напоследок небольшая полезность от Криса Коера
![image](https://habrastorage.org/getpro/habr/post_images/920/3ea/42d/9203ea42de2a4c9b0ae6d477fe16dd4b.png)
Большое спасибо за внимание.