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 xám và chữ viết màu đen kết hợp với bóng sáng tạo nên hiệu ứng Text Effect - Inset Text-Shadow Trick tuyệt đẹp.
HTML & CSS Source:
Demo:
HTML & CSS Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cool Text Effects Using CSS Text-Shadow</title>
<style type='text/css'>
body,div,h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,img,
form,fieldset,blockquote {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #eee;
}
#inset {
padding: 100px;
background: #474747;
}
#inset h1 {
text-align: center;
margin: 200px auto;
/* font-family: "Courier", League-Gothic; */
font: bold 7em Arial, sans-serif;
font-size: 200px;
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;
}
</style>
</head>
<body>
<div id="inset">
<h1>Inset</h1>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cool Text Effects Using CSS Text-Shadow</title>
<style type='text/css'>
body,div,h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,img,
form,fieldset,blockquote {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #eee;
}
#inset {
padding: 100px;
background: #474747;
}
#inset h1 {
text-align: center;
margin: 200px auto;
/* font-family: "Courier", League-Gothic; */
font: bold 7em Arial, sans-serif;
font-size: 200px;
text-transform: uppercase;
color: #222;
text-shadow: 0px 2px 3px #666;
}
</style>
</head>
<body>
<div id="inset">
<h1>Inset</h1>
</div>
</body>
</html>
Demo:
No comments:
Post a Comment