Об`ємне зображення на css

Об`ємне зображення на CSS

У цьому уроці я покажу як зробити ілюзію об`ємного зображення на CSS.

Насправді це об`ємне зображення, і тут навіть немає ніяких властивостей CSS3. Даний метод розробив - Roman Cortes. З прикладом ви можете познайомитися нижче, а також побачити живий приклад роботи даного методу:

Подивитися прімерСкачать

Зараз розглянемо більш докладно як створити об`ємне зображення на CSS. Для початку в HTML код:

Відео: PhotoShop: Як зробити об`ємне зображення



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
lt;div id="Coke"gt;lt;div id="Y"gt;lt;p id="X1"gt; lt;/pgt;lt;p id="X2"gt; lt;/pgt;lt;p id="X3"gt; lt;/pgt;lt;p id="X4"gt; lt;/pgt;lt;p id="X5"gt; lt;/pgt;lt;p id="X6"gt; lt;/pgt;lt;p id="X7"gt; lt;/pgt;lt;p id="X8"gt; lt;/pgt;lt;p id="X9"gt; lt;/pgt;lt;p id="X10"gt; lt;/pgt;lt;p id="X11"gt; lt;/pgt;lt;p id="X12"gt; lt;/pgt;lt;p id="X13"gt; lt;/pgt;lt;p id="X14"gt; lt;/pgt;lt;p id="X15"gt; lt;/pgt;lt;p id="X16"gt; lt;/pgt;lt;p id="X17"gt; lt;/pgt;lt;p id="X18"gt; lt;/pgt;lt;p id="X19"gt; lt;/pgt;lt;p id="X20"gt; lt;/pgt;lt;p id="X21"gt; lt;/pgt;lt;p id="X22"gt; lt;/pgt;lt;p id="X23"gt; lt;/pgt;lt;p id="X24"gt; lt;/pgt;lt;p id="X25"gt; lt;/pgt;lt;p id="X26"gt; lt;/pgt;lt;p id="X27"gt; lt;/pgt;lt;p id="X28"gt; lt;/pgt;lt;p id="X29"gt; lt;/pgt;lt;p id="X30"gt; lt;/pgt;lt;p id="X31"gt; lt;/pgt;lt;p id="X32"gt; lt;/pgt;lt;p id="X33"gt; lt;/pgt;lt;p id="X34"gt; lt;/pgt;lt;p id="X35"gt; lt;/pgt;lt;p id="X36"gt; lt;/pgt;lt;p id="X37"gt; lt;/pgt;lt;p id="X38"gt; lt;/pgt;lt;p id="X39"gt; lt;/pgt;lt;p id="X40"gt; lt;/pgt;lt;p id="X41"gt; lt;/pgt;lt;p id="X42"gt; lt;/pgt;lt;p id="X43"gt; lt;/pgt;lt;p id="X44"gt; lt;/pgt;lt;p id="X45"gt; lt;/pgt;lt;p id="X46"gt; lt;/pgt;lt;p id="X47"gt; lt;/pgt;lt;p id="X48"gt; lt;/pgt;lt;p id="X49"gt; lt;/pgt;lt;p id="X50"gt; lt;/pgt;lt;p id="X51"gt; lt;/pgt;lt;p id="X52"gt; lt;/pgt;lt;p id="X53"gt; lt;/pgt;lt;p id="X54"gt; lt;/pgt;lt;p id="X55"gt; lt;/pgt;lt;img src="Images / coke-can.jpg" alt="Об`ємне зображення на CSS"gt;lt;/divgt;lt;/divgt;

А зараз пропишемо необхідні властивості в CSS файл:

Відео: Об`ємне оригінал на фото в фотошопі

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
p{margin: 0-padding: 0-float: left-height: 336px-background-image: url(../images/coke-label.jpg)-background-attachment: fixed-background-repeat: repeat-x-width: 1px-}div div{background-repeat: no-repeat-background-position: 0 0-padding-left: 500px-width: 660px-}# x1 {background-position: 5px 30px-}# x2 {background-position: 0px 30px-}# x3 {background-position: -3px 30px-}# x4 {background-position: -6px 30px-}# x5 {background-position: -8px 30px-}# x6 {background-position: -10px 30px-}# x7 {background-position: -12px 30px-}# x8 {background-position: -14px 30px-}# x9 {background-position: -15px 30px-}# x10 {background-position: -16px 30px-}# x11 {background-position: -17px 30px-}# x12 {background-position: -18px 30px-}# x13 {background-position: -19px 30px-}# x14 {background-position: -20px 30px-}# x15 {background-position: -21px 30px-}# x16 {background-position: -22px 30px- width: 2px-}# x17 {background-position: -23px 30px-}# x18 {background-position: -24px 30px- width: 2px-}# x19 {background-position: -25px 30px- width: 2px-}# x20 {background-position: -26px 30px- width: 2px-}# x21 {background-position: -27px 30px- width: 2px-}# x22 {background-position: -28px 30px- width: 3px-}# x23 {background-position: -29px 30px- width: 3px-}# x24 {background-position: -30px 30px- width: 4px-}# x25 {background-position: -31px 30px- width: 5px-}# x26 {background-position: -32px 30px- width: 7px-}# x27 {background-position: -33px 30px- width: 12px-}# x28 {background-position: -34px 30px- width: 55px-}# x29 {background-position: -35px 30px- width: 11px-}# x30 {background-position: -36px 30px- width: 6px-}# x31 {background-position: -37px 30px- width: 5px-}# x32 {background-position: -38px 30px- width: 4px-}# x33 {background-position: -39px 30px- width: 3px-}# x34 {background-position: -40px 30px- width: 2px-}# x35 {background-position: -41px 30px- width: 3px-}# x36 {background-position: -42px 30px- width: 2px-}# x37 {background-position: -43px 30px- width: 2px-}# x38 {background-position: -44px 30px-}# x39 {background-position: -45px 30px- width: 2px-}# x40 {background-position: -46px 30px-}# x41 {background-position: -47px 30px-}# x42 {background-position: -48px 30px-}# x43 {background-position: -49px 30px-}# x44 {background-position: -50px 30px-}# x45 {background-position: -51px 30px-}# x46 {background-position: -52px 30px-}# x47 {background-position: -53px 30px-}# x48 {background-position: -54px 30px-}# x49 {background-position: -56px 30px-}# x50 {background-position: -58px 30px-}# x51 {background-position: -60px 30px-}# x52 {background-position: -62px 30px-}# x53 {background-position: -65px 30px-}# x54 {background-position: -68px 30px-}# x55 {background-position: -74px 30px-}

Ви вже помітили, що ми просто рухаємося по зображенню. Можливо ви знайдете даного методу застосування у себе на сайті.

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!