<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administrative Text Effect</title>
<style>
.administrative-text {
position: relative;
z-index: 1;
font-size: 40px;
line-height: 1em;
font-weight: bold;
transform: skewX(-10deg);
//font-style: italic;
}
.administrative-text:before {
content: attr(data-text);
position: relative;
z-index: 2;
display: block;
font-size: 1em;
background: linear-gradient(to bottom, #fefeff 0%, #fff 25% , #99e2ff 85%, #609ecd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
overflow: visible;
// 渐变色文字的阴影
/* //filter: saturate(400%);
//filter: drop-shadow(10px 5px 5px #0e2f68);*/
}
.administrative-text:after {
content: attr(data-text);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
transform: translate(4px, 6px);
color: #153a74;
//text-shadow: 0 0 4px #153a74;
filter: blur(1px);
opacity: 0.8;
overflow: visible;
}
body {
background-color: #164d8e;
}
</style>
</head>
<body>
<div class="administrative-text" data-text="行政案件"></div>
</body>
</html>
