Рамки для любых изображений средствами 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 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
.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); } |
1 2 3 4 |
<div class="photo"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample1"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample2"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample3"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample4"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample5"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample6"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample7"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample8"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample9"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample10"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample11"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample12"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample13"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |
1 2 3 4 |
<div class="photo sample14"> <span></span> <img src="Ссылка" alt="Описание" /> </div> |