Роман Кортез продемонстрировал интересный CSS трюк, он сделал на чистом CSS 3D банку колы используя background-attachment, background-position и еще несколько параметров чтобы добиться такого эффекта, при этом он не использовал хитрых возможностей CSS 3.


Вот ключевой кусок кода:

PLAIN TEXT
CSS:
  1. p {
  2.         background-image: url(coke-label.jpg);
  3.         background-attachment: fixed;
  4.         background-repeat: repeat-x;
  5.         width: 1px;
  6. }
  7.  
  8. #x1 {background-position: 5px 30px;}
  9. #x2 {background-position: 0px 30px;}
  10. #x3 {background-position: −3px 30px;}
  11. #x4 {background-position: −6px 30px;}
  12. #x5 {background-position: −8px 30px;}

С помощью него отображается сама банка и «обертка» на ее поверхности.

Источник

Популярность: 3% [?]

Добавить в закладки