• کد css سافت افزار
    #1
    Note 
    این کدی که من نوشتم یک کد html هست که توش کد css بکار رفته برای دیدین دموی اون میتونید روی گزینه دمو کلیک کرده .
    برا ی استفاده اونو توی نوت پد کپی کنید و فرمتشو به html تغییر بدین قابل استفاده در همه ی مرورگر ها

    دیدن دمو


    [CSS]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css"
    href="mystyle.css" />
    <title>css</title>
    </head>
    <body>

    <style>body {background: #AAAAAA;
    font-family: Verdana, Arial, Helvetica, Tahoma, monospace;
    direction:rtl;
    }

    div.img
    {

    text-align: center;
    opacity:1;

    }


    a:link {color: #FF0000}

    #my
    {-webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -khtml-transition: 1s;
    -webkit-transition: 1s;
    font-size: 20px;
    color: transparent;
    text-shadow: 0 0 15px rgba(0,0,0,0.0);
    border-radius: 9px;

    }

    #title {-webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -khtml-transition: 1s;
    -webkit-transition: 1s;
    color: #FFFFFF;
    font-size: 20px;
    padding: 5px;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    border-radius: 9px;

    }
    #de{
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;
    -khtml-transition: 1.5s;
    -webkit-transition: 1.5s;
    color: #FFFFFF;

    }

    .SAbox {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -khtml-transition: 1s;
    -webkit-transition: 1s;
    background: #0099FF;
    display: inline-block;
    padding: 4px 0px 0px;
    border: 2px solid #DDD;
    font: normal 14px arial;
    color: #424242;
    cursor: default;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #ADADAD;
    opacity:0.5;
    }
    .SAbox:hover{
    opacity:1;
    background: #FFFFFF;
    }



    .SAbox:hover #title{background: #CC0033;
    color: #000000;
    border-radius: 10px;
    padding: 5px 20px;

    }
    .SAbox:hover #de{
    color: #000000;

    }


    .SAbox:hover p{color: #000;

    }

    .SAbox:hover #my{background: #33FF66;
    color: #424242;
    border-radius: 10px;
    padding: 5px 20px;

    }

    </style>




    <br /><br /><br /><br /><div align "center">
    <div class="img">
    <a href="www.softafzar.net" target="_blank">
    <div class="SAbox" >
    <span id="title">&nbsp;&nbsp;&nbsp;&nbsp; سافت افزار&nbsp;&nbsp;&nbsp;&nbsp; </span>
    <p>
    <B><div id=de>خانه توسعه دهندگان نرم افزار</div>
    </B>
    </p>
    <div id="my">کليک کنيد</div>
    </div></a> </div></div>





    </body>
    </html>



    [/CSS]


    مبتدی هست ولی امیدوارم کمک کنه

    پاسخ
    #2
    Note 
    قشنک بود سجاد جان میشه به عنوان بنر حمایتی تو سایت ها و وبلاگها استفاده کرد
    ولی اگر فونتش رو هم عوض میکردی بهتر میشد Heart

    پاسخ
    #3
    Note 
    با اجازت یکم تغییرش دادم
    ببینید چطو شد

    [HTML]
    <!DOCTYPE html>
    <html>

    <body>
    <div align "center">
    <div class="img">
    <a href="www.softafzar.net" target="_blank">
    <div class="SAbox" >
    <div id="title">&nbsp;&nbsp;&nbsp;&nbsp; سافت افزار&nbsp;&nbsp;&nbsp;&nbsp; </div>
    <p>
    <B><div id=de>خانه توسعه دهندگان نرم افزار</div>
    </B>
    </p>
    <div id="clc">کليک کنيد</div>
    </div></a>
    </div>
    </div>
    </body>

    </html>
    [/HTML]

    [CSS]
    body {
    background: #AAAAAA;
    font-family: Verdana, Arial, Helvetica, Tahoma, monospace;
    direction:rtl;
    }
    div.img {
    text-align: center;
    opacity:1;
    }
    a:link {
    color: #FF0000
    }
    #clc {
    margin-top: 20px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -khtml-transition: 1s;
    cursor: pointer;
    font-size: 18px;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.0);
    border-radius: 5px;
    box-shadow: 0 0 15px rgb(10, 122, 0) inset, 0px 1px 2px rgb(41, 41, 41);
    }
    #clc:hover {
    background: rgb(12, 211, 12) !important;
    }
    #title {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -khtml-transition: .3s;
    color: rgb(255, 255, 255);
    font-size: 18px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    #de {
    color: rgb(255, 255, 255);
    }
    .SAbox {
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -khtml-transition: .1s;
    -webkit-transition: 0.5s;
    background: rgb(10, 169, 231);
    display: inline-block;
    padding: 5px;
    border: 2px solid rgb(9, 131, 179);
    font: normal 11px tahoma, arial;
    color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0 0 15px rgb(173, 173, 173) inset;
    height: 60px;
    cursor: default;
    width: 160px;
    overflow: hidden;
    }
    .SAbox:hover {
    background: rgb(206, 235, 248);
    height: 90px;
    }
    .SAbox:hover #title {
    background: rgb(34, 176, 221);
    color: rgb(255, 255, 255);
    padding: 5px;
    margin: -5px;
    }
    .SAbox:hover #de {
    color: #000000;
    }
    .SAbox:hover p {
    color: #000;
    }
    .SAbox:hover #clc {
    margin-top: 0px;
    background: rgb(47, 155, 5);
    color: rgb(255, 255, 255);
    padding: 5px 20px;
    }
    [/CSS]

    پاسخ
    #4
    Note 
    بد نیست اقا سجاد

    نقل قول: با اجازت یکم تغییرش دادم
    ببینید چطو شد

    از این روبه اون رو شد :laughingsmiley:

    پاسخ
    #5
    Note 
    عالیییی بود بذاریم اندر بلاگ :91:

    پاسخ
    #6
    Note 
    نقل قول: با اجازت یکم تغییرش دادم

    خیلی قشنگ شد


    ممنون

    پاسخ
    #7
    Note 
    فقط میتونم بگم عالیه

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان