Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
ლენტა საიტის გასალამაზებლად მხოლოდ css ის გამოყენებით

მზგავი ეფექტის მისაღებად ჩვენ გამოვიყენებთ ხერხს რომელსაც სამკუთხედების შექმნა ქვია .

სრული კოდი CSS სტილებით და საჭირო HTML-ით:




<!DOCTYPE html>
<html>
    <head>
        <title>Ленточка на CSS | Материалы сайта RUSELLER.COM</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #main {
                border: 1px solid #fff;
                padding: 100px;
            }
            #menu {
                background: #c66969;
                width: 500px;
                height: 50px;
                color: #fff;
                font-size: 18px;
                text-align: center;
                position: relative;
                top: -20px;
            }
            #menu span {
                position: relative;
                top: 13px;
            }
            .cont {
                background: #b14444;
                width: 100px;
                height: 50px;
            }
            .edge-right {
                border-color: #b14444 white #b14444 #b14444;
                border-style:solid;
                border-width:25px;
                width:0;
                height:0;
                position: relative;
            }
            .edge-left {
                border-color: #b14444 #b14444 #b14444 white;
                border-style:solid;
                border-width:25px;
                width:0;
                height:0;
                position: relative;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .clear {
                clear: both;
            }
            .edge-right-small {
                position: absolute;
                top: 138px;
                left: 734px;
                border-color: #fff #fff #b14444 #873434;
                border-style:solid;
                border-width:0 0 21px 25px;
                width:0;
                height:0;
            }
            .edge-left-small {
                position: absolute;
                top: 138px;
                left: 258px;
                border-color: #b14444 #873434 #b14444 red;
                border-style:solid;
                border-width:0 25px 21px 0;
                width:0;
                height:0;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="edge-left left"></div>
            <div class="cont left"></div>
            <div id="menu" class="left"><span>Материалы сайта RUSELLER.COM<span></div>
            <div class="cont left"></div>
            <div class="edge-right left"></div>
            <div class="clear"></div>
        </div>

        <div class="edge-right-small"></div>
        <div class="edge-left-small"></div>
    </body>
</html>





გადაწერე:თქვენ არ შეგიძლიათ ფაილების გადმოწერა სერვერიდან

+2
ავტორი: admin ნანახია: 1622 | კომენტარი: 1 | Tutorials | 8-04-2012, 14:38
1By: Mr.Black And White Elite Members
 
სგ კარგია 14
 
 
  8 აპრილი 2012 14:56    
 
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



topnews

© 2009-2012 Powered By Geodles.Com