Exore LTD » CSS3 » Объемное изображение на CSS
Лого SiteHere.ru

Июль 8, 2014 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Объемное изображение на CSS

Объемное изображение на CSS

В этом уроке я покажу как сделать иллюзию объемного изображения на CSS.

На самом деле это не объемное изображение, и здесь даже нет никаких свойств CSS3. Данный метод разработал — Roman Cortes. С примером вы можете познакомиться ниже, а также увидеть живой пример работы данного метода:

Посмотреть примерСкачать

Сейчас рассмотрим более подробно как создать объемное изображение на CSS. Для начала в HTML код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<div id="coke">
    <div id="y">
        <p id="x1"></p>
        <p id="x2"></p>
        <p id="x3"></p>
        <p id="x4"></p>
        <p id="x5"></p>
        <p id="x6"></p>
        <p id="x7"></p>
        <p id="x8"></p>
        <p id="x9"></p>
        <p id="x10"></p>
        <p id="x11"></p>
        <p id="x12"></p>
        <p id="x13"></p>
        <p id="x14"></p>
        <p id="x15"></p>
        <p id="x16"></p>
        <p id="x17"></p>
        <p id="x18"></p>
        <p id="x19"></p>
        <p id="x20"></p>
        <p id="x21"></p>
        <p id="x22"></p>
        <p id="x23"></p>
        <p id="x24"></p>
        <p id="x25"></p>
	<p id="x26"></p>
	<p id="x27"></p>
	<p id="x28"></p>
	<p id="x29"></p>
	<p id="x30"></p>
	<p id="x31"></p>
	<p id="x32"></p>
	<p id="x33"></p>
	<p id="x34"></p>
	<p id="x35"></p>
	<p id="x36"></p>
	<p id="x37"></p>
	<p id="x38"></p>
	<p id="x39"></p>
	<p id="x40"></p>
        <p id="x41"></p>
	<p id="x42"></p>
	<p id="x43"></p>
	<p id="x44"></p>
	<p id="x45"></p>
	<p id="x46"></p>
	<p id="x47"></p>
	<p id="x48"></p>
	<p id="x49"></p>
	<p id="x50"></p>
	<p id="x51"></p>
	<p id="x52"></p>
	<p id="x53"></p>
	<p id="x54"></p>
	<p id="x55"></p>
	<img src="images/coke-can.png" alt="Объемное изображение на CSS">
    </div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

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;}

Вы уже заметили, что мы просто двигаемся по изображению. Возможно вы найдете данному методу применение у себя на сайте.

Успехов!

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • marie

    Добрый вечер, спасибо за урок, но я никак не поняла, как вы вычислили координаты для x1-x55, почему только 55 точек, почему
    #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;}
    то width нет.

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *