CSS กับการตกแต่งกรอบรูปภาพ

เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee
css รูปภาพ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css รูปภาพ

ดูแล้ว 46,747 ครั้ง


CSS Code

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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<style type="text/css">
.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);
}
 
</style>
 
 
<!--[if lt IE 7]>
<style type="text/css">
 
.photo span { behavior: url(iepngfix.htc); cursor: pointer; }
 
.sample12 img {
    background: url(images/watercolor-bg.gif) no-repeat;
}
 
</style>
<![endif]-->

HTML Code

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
<div class="photo">
    <a href="#"><span></span><img src="images/11.jpg" alt="image" /></a>
</div>
 
<div class="photo sample1">
    <a href="#"><span></span><img src="images/9.jpg" alt="image" /></a>
</div>
 
<div class="photo sample2">
    <a href="#"><span></span><img src="images/13.jpg" alt="image" /></a>
</div>
 
<div class="photo sample3">
    <a href="#"><span></span><img src="images/2.jpg" alt="image" /></a>
</div>
 
<div class="photo sample4">
    <a href="#"><span></span><img src="images/9.jpg" alt="image" /></a>
</div>
 
<div class="photo sample5">
    <a href="#"><span></span><img src="images/6.jpg" alt="image" /></a>
</div>
 
<div class="photo sample6">
    <a href="#"><span></span><img src="images/10.jpg" alt="image" /></a>
</div>
 
<div class="photo sample7">
    <a href="#"><span></span><img src="images/12.jpg" alt="image" /></a>
</div>
 
<div class="photo sample8">
    <a href="#"><span></span><img src="images/14.jpg" alt="image" /></a>
</div>
 
<div class="photo sample9">
    <a href="#"><span></span><img src="images/5.jpg" alt="image" /></a>
</div>
 
<div class="photo sample10">
    <a href="#"><span></span><img src="images/4.jpg" alt="image" /></a>
</div>
 
<div class="photo sample11">
    <a href="#"><span></span><img src="images/8.jpg" alt="image" /></a>
</div>
 
<div class="photo sample12">
    <a href="#"><span></span><img src="images/9.jpg" alt="image" /></a>
</div>
 
<div class="photo sample13">
    <a href="#"><span></span><img src="images/13.jpg" alt="image" /></a>
</div>
 
<div class="photo sample14">
    <a href="#"><span></span><img src="images/5.jpg" alt="image" /></a>
</div>

ดาวน์โหลดรูปภาพประกอบ ดาวน์โหลดรูปภาพประกอบ

ตัวอย่างผลลัพธ์

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: css รูปภาพ







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ