کد متن زیبا (css & html ) | چهار آنلاین

رزرو تبلیغــات

تعرفه تبلیغات
logo
تعرفه تبلیغات تعرفه تبلیغات

شمـا میتوانیــد برای دریافت آخرین مطالب و آگاهی از آخریـن اخبــار گلریـز وبـــ در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

http://s6.picofile.com/file/8209025100/Screen.png

کدphp:

موس رو روی نوشته چهار آنلاین ببرید و زیبایی رو احساس کنید

<!DOCTYPE html> 
<
html lang="en">
<
head>
    <
meta charset="UTF-8">
    <
title>4oNliNe</title>
    <
style type="text/css">
        *, *:
after, *:before {
          
box-sizingborder-box;
        }

        .
hidden {
          
height0;
          
width0;
          
overflowhidden;
          
positionabsolute;
        }

        
/* Background colors */
        
.color-background#E8E0DA; }
        
.color-background#576b67; }
        
.color-background#383A35; }
        
.color-background#333; }
        
.color-background#fda9a9; }
        
.color-background#cde7d3; }
        
.color-background#DCECDD; }
        
.color-background#dedbba; }
        
.color-10 background#222; }
        
.color-11 background#515151; }

        /* General link styles */
        
.grid {
            
text-aligncenter;
            
padding200px;
        }

        .
link {
            
outlinenone;
            
text-decorationnone;
            
positionrelative;
            
font-size8em;
            
line-height1;
            
color#9e9ba4;
            
displayinline-block;
        }

        
/* Urpi */
        
.link--urpi {
            
font-family'Oswald'sans-serif;
            
font-size10em;
            
font-weight700;
            
text-transformuppercase;
            
color#e78383;
            
-webkit-transitioncolor 0s 0.5s;
            
transitioncolor 0s 0.5s;
        }

        .
link--urpi:hover {
            
colortransparent;
            -
webkit-transitionnone;
            
transitionnone;
        }

        .
link--urpi::before,
        .
link--urpi::after {
            
contentattr(data-letters);
            
positionabsolute;
            
top0;
            
left0;
            
color#e78383;
            
overflowhidden;
            -
webkit-backface-visibilityhidden;
            -
webkit-transitioncolor 0.5s, -webkit-transform 0.5s;
            
transitioncolor 0.5stransform 0.5s;
        }

        .
link--urpi::before {
            -
webkit-clip-pathurl(#cp_up); 
            
clip-pathurl(#cp_up);
        
}

        .
link--urpi::after {
            -
webkit-clip-pathurl(#cp_down); 
            
clip-pathurl(#cp_down);
        
}

        .
link--urpi:hover::before,
        .
link--urpi:hover::after {
            
color#fff;
            
-webkit-transitioncolor 0.5s, -webkit-transform 0.5s;
            
transitioncolor 0.5stransform 0.5s;
        }

        .
link--urpi:hover::before {
            -
webkit-transformtranslate3d(4px,1px,0);
            
transformtranslate3d(4px,1px,0);
        }

        .
link--urpi:hover::after {
            -
webkit-transformtranslate3d(-4px,-1px,0);
            
transformtranslate3d(-4px,-1px,0);
        }
    </
style>
</
head>
<
body>
    <
div class="grid color-5">
        <
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

 

 


طراحی چت روم


بازدید : 2697 | تاریخ : دو شنبه 7 / 6 / 1394 ساعت : 3:57 |
نظرات
چهار آنلاین
چهار آنلاین در تاریخ 1394/6/11/3 و 20:11 گفته :
سلام
واقعا خوشحالم هنوز کسانی هستن که منبع رو ذکر میکنن

ممنون از شما
چهار آنلاین
www.fo4r.ir
برای دیدن نظرات بیشتر روی شماره صفحات در زیر کلیک کنید
نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: