Home / Css / Thủ Thuật / Cắt ảnh bằng Css

Cắt ảnh bằng Css

Testtem 21:13 Css , Thủ Thuật Edit

Ảnh được dùng làm demo:
Photographer: # Jarosław Kaczmarek

Ảnh đẹp và lạ dùng Css để cắt ảnh
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>

Bạn có thể test thử trênTest Html Editor
Link to this page:

About Testtem

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét ( Atom )