کد 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 مهمان