benben
| ارسال هاAnswers : | 3189 |
| عضویتRegistration date : | 29 /8 /1391 |
| حمایت کردهThanks : | 792 |
| حمایت شدهThanked : | 947 |
|
قالب 404 زیبا(نسخه ویرایش شده)
سلام دیدم سینا توی یه تایپیک یه قالب 404 گذاشته منم ویرایشش کردم و به چند جور گذاشتم سری 1 کد:
<h1 data-shadow='___'>404</h1><style>@import url(http://fonts.googleapis.com/css?family=Righteous); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { height: 100%; } body { text-align: center; background-color: hsla(230,40%,50%,1); } body:before { content: ''; display: inline-block; vertical-align: middle; font-size: 0; height: 100%; } h1 { display: inline-block; color: white; font-family: 'Righteous', serif; font-size: 12em; text-shadow: .03em .03em 0 hsla(230,40%,50%,1); } h1:after { content: attr(data-shadow); position: absolute; top: .06em; left: .06em; z-index: -1; text-shadow: none; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shad-anim 15s linear infinite; } @keyframes shad-anim { 0% {background-position: 0 0} 0% {background-position: 100% -100%} }</style> اینم یه مدل دیگش... کد:
<h1 data-shadow='404'>404</h1><style>@import url(http://fonts.googleapis.com/css?family=Righteous); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { height: 100%; } body { text-align: center; background-color: hsla(110,40%,50%,1); } body:before { content: ''; display: inline-block; vertical-align: middle; font-size: 0; height: 100%; } h1 { display: inline-block; color: white; font-family: 'Righteous', serif; font-size: 12em; text-shadow: .03em .03em 0 hsla(140,40%,50%,1); } h1:after { content: attr(data-shadow); position: absolute; top: .06em; left: .06em; z-index: -1; text-shadow: none; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,10%,20%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shad-anim 15s linear infinite; } @keyframes shad-anim { 0% {background-position: 0 0} 0% {background-position: 100% -100%} }</style> اگه کد نویسی بلد باشین(html & css) میتونین این قالبو به دلخواه و رنگ و ... ودتون خوشگلشکنید کاری داشتید در خدمتم دمو هم زیر کد ها هست...! موفق باشید
یاد روزای جوونی بخیر
کدستان کجایی...؟!
My Language: Html5 Css3 Android
++Learning PHP & c
|
حمایت شدهThanks :
