کد متن زیبا (css & html ) | چهار آنلاین
به ادامه مطلب بروید
کدphp:
موس رو روی نوشته چهار آنلاین ببرید و زیبایی رو احساس کنید
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4oNliNe</title>
<style type="text/css">
*, *:after, *:before {
box-sizing: border-box;
}
.hidden {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
/* Background colors */
.color-1 { background: #E8E0DA; }
.color-2 { background: #576b67; }
.color-3 { background: #383A35; }
.color-4 { background: #333; }
.color-5 { background: #fda9a9; }
.color-7 { background: #cde7d3; }
.color-8 { background: #DCECDD; }
.color-9 { background: #dedbba; }
.color-10 { background: #222; }
.color-11 { background: #515151; }
/* General link styles */
.grid {
text-align: center;
padding: 200px;
}
.link {
outline: none;
text-decoration: none;
position: relative;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
/* Urpi */
.link--urpi {
font-family: 'Oswald', sans-serif;
font-size: 10em;
font-weight: 700;
text-transform: uppercase;
color: #e78383;
-webkit-transition: color 0s 0.5s;
transition: color 0s 0.5s;
}
.link--urpi:hover {
color: transparent;
-webkit-transition: none;
transition: none;
}
.link--urpi::before,
.link--urpi::after {
content: attr(data-letters);
position: absolute;
top: 0;
left: 0;
color: #e78383;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--urpi::before {
-webkit-clip-path: url(#cp_up);
clip-path: url(#cp_up);
}
.link--urpi::after {
-webkit-clip-path: url(#cp_down);
clip-path: url(#cp_down);
}
.link--urpi:hover::before,
.link--urpi:hover::after {
color: #fff;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--urpi:hover::before {
-webkit-transform: translate3d(4px,1px,0);
transform: translate3d(4px,1px,0);
}
.link--urpi:hover::after {
-webkit-transform: translate3d(-4px,-1px,0);
transform: translate3d(-4px,-1px,0);
}
</style>
</head>
<body>
<div class="grid color-5">
<a class="link link--urpi" href="#" data-letters="4oNliNe">4oNliNe</a>
</div>
<svg class="hidden" viewBox="0 0 390 160">
<defs>
<clippath id="cp_up">
<polygon id="cp_poly_up" points="0,0 390,0 390,160" />
</clippath>
<clippath id="cp_down">
<polygon id="cp_poly_down" points="0,0 0,160 390,160" />
</clippath>
</defs>
</svg>
</body>
</html>
افزودن به علاقهمندیها
حذف از علاقهمندی
- 07 شهریور 1394
- 3 دیدگاه
- 5353 بازدید
آدرس وب:
http://jokenews-facebook.loxblog.com/
عنوان وب:جوک نیوز
آدرس بنر:
http://8pic.ir/images/7fo3o5asubtx0daeq5fw.gif
roomzahedan.tk