Рамки для любых изображений средствами CSS
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего 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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
.photo { margin: 30px; position: relative; width: 180px; height: 130px; float: left; } .photo img { background: #fff; border: solid 1px #ccc; padding: 4px; } .photo span { width: 20px; height: 18px; display: block; position: absolute; top: 12px; left: 12px; background: url(/images/digg-style.gif) no-repeat; } .photo a { text-decoration: none; } .sample1 span { width: 28px; height: 21px; display: block; position: absolute; top: -12px; left: 90px; background: url(/images/pin.png) no-repeat; } .sample2 span { width: 77px; height: 27px; display: block; position: absolute; top: -12px; left: 50px; background: url(/images/tape.png) no-repeat; } .sample3 span { width: 30px; height: 60px; display: block; position: absolute; top: -5px; left: -2px; background: url(/images/paper-clip.png) no-repeat; } .sample4 span { width: 115px; height: 32px; display: block; position: absolute; top: -13px; left: 30px; background: url(/images/tape2.png) no-repeat; } .sample5 span { width: 216px; height: 166px; display: block; position: absolute; top: -17px; left: -18px; background: url(/images/gold-frame.png) no-repeat; } .sample6 span { width: 189px; height: 137px; display: block; position: absolute; top: -5px; left: -5px; background: url(images/cut-corner.png) no-repeat; } .sample7 span { width: 170px; height: 120px; display: block; position: absolute; top: 0; left: 0; background: url(/images/round-corner.png) no-repeat; } .sample7 img { border: none; padding: 0; } .sample8 span { width: 170px; height: 120px; display: block; position: absolute; top: 5px; left: 6px; background: url(/images/round-corner.png) no-repeat; } .sample8 img { border: none; padding: 5px 6px 6px; background: url(/images/round-bg.gif) no-repeat; } .sample9 span { width: 170px; height: 120px; display: block; position: absolute; top: 6px; left: 7px; background: url(/images/stamp-pattern.png) no-repeat; } .sample9 img { border: none; padding: 6px 7px 7px; background: url(/images/stamp-bg.gif) no-repeat; } .sample10 span { width: 181px; height: 134px; display: block; position: absolute; top: -6px; left: -6px; background: url(/images/brush-border.png) no-repeat; } .sample10 img { border: none; padding: 0; } .sample11 span { width: 122px; height: 72px; display: block; position: absolute; top: -22px; left: -15px; background: url(/images/floral-corner.png) no-repeat; } .sample12 span { width: 186px; height: 137px; display: block; position: absolute; top: 2px; left: 2px; background: url(/images/watercolor-top.png) no-repeat; } .sample12 img { border: none; padding: 9px 12px 12px 11px; background: url(/images/watercolor-bg.png) no-repeat; } .sample13 span { width: 170px; height: 120px; display: block; position: absolute; top: 0; left: 0; background: url(/images/mask.png) no-repeat; } .sample13 img { border: none; padding: 0; } .sample14 span { width: 170px; height: 84px; display: block; position: absolute; top: 5px; left: 5px; background: url(/images/glossy-gradient.png); } |
2#: Для того, чтобы наложить на нужную картинку рамку, достаточно присвоить ей нужный класс:
1) Демо 1 - эффект наложения иконки в левом верхнем углу:
|
1 |
<div class="photo"><img src="Ссылка" alt="Описание" /></div> |
2) Демо 2 - эффект прикрепления на кнопке:
|
1 |
<div class="photo sample1"><img src="Ссылка" alt="Описание" /></div> |
3) Демо 3 - эффект прикрепления на скотче:
|
1 |
<div class="photo sample2"><img src="Ссылка" alt="Описание" /></div> |
4) Демо 4 - эффект прикрепления на скрепке:
|
1 |
<div class="photo sample3"><img src="Ссылка" alt="Описание" /></div> |
5) Демо 5 - эффект прикрепления на бумажном скотче:
|
1 |
<div class="photo sample4"><img src="Ссылка" alt="Описание" /></div> |
6) Демо 6 - эффект деревянной рамки:
|
1 |
<div class="photo sample5"><img src="Ссылка" alt="Описание" /></div> |
7) Демо 7 - эффект срезанных углов:
|
1 |
<div class="photo sample6"><img src="Ссылка" alt="Описание" /></div> |
8) Демо 8 - эффект простого закругления:
|
1 |
<div class="photo sample7"><img src="Ссылка" alt="Описание" /></div> |
9) Демо 9 - эффект закругления в белой рамке:
|
1 |
<div class="photo sample8"><img src="Ссылка" alt="Описание" /></div> |
10) Демо 10 - эффект волнистой рамки:
|
1 |
<div class="photo sample9"><img src="Ссылка" alt="Описание" /></div> |
11) Демо 11 - эффект рамки из мазков кисти:
|
1 |
<div class="photo sample10"><img src="Ссылка" alt="Описание" /></div> |
12) Демо 12 - эффект простой белой рамки с лозой:
|
1 |
<div class="photo sample11"><img src="Ссылка" alt="Описание" /></div> |
13) Демо 13 - эффект рамки, потёртой изнутри:
|
1 |
<div class="photo sample12"><img src="Ссылка" alt="Описание" /></div> |
14) Демо 14 - эффект абстрактной рамки:
|
1 |
<div class="photo sample13"><img src="Ссылка" alt="Описание" /></div> |
15) Демо 15 - эффект блика на стекле:
|
1 |
<div class="photo sample14"><img src="Ссылка" alt="Описание" /></div> |
Если вы работаете в программе Фотошоп - для вас не составит труда нарисовать свою коллекцию рамок
Осталось лишь залить все картинки из прикреплённого архива в папку images
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
код не работает
Как не работает? Изображения из архива залиты в нужную папку?