گروه وب طراحان جوان

طراحی حرفه ای سایت جزئی از تخصص ماست

خوش آمدید مهمان 

نمایش یا پنهان کردن سربرگ

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





صفحات: [1]
نوسینده عنوان ها :کد Css ویژه انیمیشن کردن باکس
maryamsite-
dar
کاربر جدید
پست ها: 10
Permalink
پست کد Css ویژه انیمیشن کردن باکس
در March 8, 2014, 12:07
نقل قول

در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای Html5 و Css3 نوشت که برای مثال عکس بالا توسط css دور باکس ها به صورت انیمیشن درست شده و ترتیب درست کردن آنرا توضیح میدهیم,

برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :

کد Css :

*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{ width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}

کد html :

<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>
آدرس:
http://goo.gl/TNVkrE

http://goo.gl/GxM6FP

صفحات: [1]
Mingle Forum by cartpauj
نسخه: 1.0.34 ; زمان بارگزاری صفحه : 0.01 ثانیه.
آمار سایت
  • کاربران آنلاین : 0
  • بازدید امروز: 1867
  • بازدید دیروز: 2885
  • کل بازدید ها: 4057563
  • تعداد مطالب سایت 48
  • تعداد نظرات کاربران 56
  • تعداد کاربران سایت 59
  • آخرین آپدیت سایت ۰۶/۰۵/۱۳۹۳
  • تعداد نمونه کار ها : 32
نمودار پيشرفت پروژه‌ها‌
  • بهینه سازی سایت انجمن علمی
  • هماهنگ سازی سایت انجمن با وب طراحان
  • طراحی قالب جدید WebTJ.Ir
  • طراحی پروفایل کاربران
  • طراحی قسمت پرسش و پاسخ
  • طراحی تالار های گفتگو
  • طراحی سایت گروه