Bài viết cung cấp mã nguồn hiển thị văn bản với hiệu ứng chữ ẩn sau nền. Đoạn source cung cấp hiệu ứng văn bản trên nền xanh và chữ viết màu đen dương kết hợp với bóng sáng xanh tạo nên hiệu ứng Text Effect - Inset Text-Shadow Trick tuyệt vời.
HTML & CSS Source:
Demo:
HTML & CSS Source:
<html>
<head>
<title>CSS3 inset text-shadow trick</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
margin: 0;
background: #0A539C;
background: linear-gradient(top, #4293d6 0%, #001e96 100%);
overflow: hidden;
}
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before,
.depth:after {
content: attr(title);
padding: 50px;
color: rgba(255, 255, 255, .1);
position: absolute;
}
.depth:before {
top: 1px;
left: 1px
}
.depth:after {
top: 2px;
left: 2px
}
</style>
</head>
<body>
<h1 class="depth" title="Lorem ipsum">
Lorem ipsum</h1>
</body>
</html>
<head>
<title>CSS3 inset text-shadow trick</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
margin: 0;
background: #0A539C;
background: linear-gradient(top, #4293d6 0%, #001e96 100%);
overflow: hidden;
}
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before,
.depth:after {
content: attr(title);
padding: 50px;
color: rgba(255, 255, 255, .1);
position: absolute;
}
.depth:before {
top: 1px;
left: 1px
}
.depth:after {
top: 2px;
left: 2px
}
</style>
</head>
<body>
<h1 class="depth" title="Lorem ipsum">
Lorem ipsum</h1>
</body>
</html>
Demo:
No comments:
Post a Comment