Photographer: # Jarosław Kaczmarek
Try it
Code:
<style>
* {
margin: 0;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
body {
margin: 100px;
}
div.strip {
margin-right: 148px;
display: inline-block;
background-image: url(https://lh5.googleusercontent.com/-uKgoJyYpXxo/VAyGd9aBlzI/AAAAAAAA8H4/H579gooJDso/w426-h320/1.JPG);
height: 350px;
width: 64px;
position: relative;
background-position: 0 -20px;
}
div.strip2 {
background-position: -192px -20px;
}
div.strip3 {
background-position: -384px -20px;
}
div.strip:after, div.strip:before {
position: absolute;
content: '';
height: 350px;
width: 64px;
top: 20px;
left: 70px;
background-image: url(https://lh5.googleusercontent.com/-uKgoJyYpXxo/VAyGd9aBlzI/AAAAAAAA8H4/H579gooJDso/w426-h320/1.JPG);
}
div.strip:before {
left: 141px;
top: -20px;
}
div.strip1:after {
background-position: -64px -40px;
}
div.strip1:before {
background-position: -128px 0px;
}
div.strip2:after {
background-position: -256px -40px;
}
div.strip2:before {
background-position: -320px 0px;
}
div.strip3:after {
background-position: -448px -40px;
}
div.strip3:before {
background-position: -512px 0px;
}
</style>
<body>
<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
</body>
* {
margin: 0;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
body {
margin: 100px;
}
div.strip {
margin-right: 148px;
display: inline-block;
background-image: url(https://lh5.googleusercontent.com/-uKgoJyYpXxo/VAyGd9aBlzI/AAAAAAAA8H4/H579gooJDso/w426-h320/1.JPG);
height: 350px;
width: 64px;
position: relative;
background-position: 0 -20px;
}
div.strip2 {
background-position: -192px -20px;
}
div.strip3 {
background-position: -384px -20px;
}
div.strip:after, div.strip:before {
position: absolute;
content: '';
height: 350px;
width: 64px;
top: 20px;
left: 70px;
background-image: url(https://lh5.googleusercontent.com/-uKgoJyYpXxo/VAyGd9aBlzI/AAAAAAAA8H4/H579gooJDso/w426-h320/1.JPG);
}
div.strip:before {
left: 141px;
top: -20px;
}
div.strip1:after {
background-position: -64px -40px;
}
div.strip1:before {
background-position: -128px 0px;
}
div.strip2:after {
background-position: -256px -40px;
}
div.strip2:before {
background-position: -320px 0px;
}
div.strip3:after {
background-position: -448px -40px;
}
div.strip3:before {
background-position: -512px 0px;
}
</style>
<body>
<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
</body>
0 nhận xét:
Đăng nhận xét
Thanks for following my blog
Chữ in đậm : <b> Nội_dung_chữ_in_đậm </b>
Chữ in nghiêng : <i> Nội_dung_chữ_in_nghiêng </i>
Chèn code : <i rel='pre'> Nội_dung_code_đã_mã_hóa </i>
Chèn link liên kết : <a href = ' Link '> Tên_link </a>
Dùng link ảnh chèn trực tiếp vào comment
Don't spam link here. Pls
Mã Hóa