Bài viết cung cấp mã nguồn hiển thị văn bản với hiệu ứng bóng ẩn trong nền chữ. Đoạn source cung cấp hiệu ứng văn bản trên nền xanh và chữ viết màu xanh dương kết hợp với bóng màu xanh đen tạo nên hiệu ứng Text Effect - Inset Text-Shadow Trick.
HTML & CSS Source:
Demo:
HTML & CSS Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 inset text-shadow trick - jsFiddle demo</title>
<style type='text/css'>
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10, 60, 150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection {
background: #5af;
color: #fff;
text-shadow: none;
}
::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
</style>
</head>
<body>
<h1 class="inset-text">Inset text-shadow trick</h1>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3 inset text-shadow trick - jsFiddle demo</title>
<style type='text/css'>
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10, 60, 150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection {
background: #5af;
color: #fff;
text-shadow: none;
}
::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
</style>
</head>
<body>
<h1 class="inset-text">Inset text-shadow trick</h1>
</body>
</html>
Demo:
No comments:
Post a Comment