زمان کنونی: ۱۰-۱-۱۴۰۳, ۱۰:۰۶ عصر درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
سایه انداختن دور باکس ها و نوشته ها توسط Css
۹-۱۰-۱۳۹۲, ۱۱:۱۹ عصر
ارسال: #1
سایه انداختن دور باکس ها و نوشته ها توسط Css
در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای 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>

منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
امضاء davdesign
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۷-۴-۱۳۹۸, ۰۵:۴۶ عصر
ارسال: #2
RE: سایه انداختن دور باکس ها و نوشته ها توسط Css
بسیار عالی بود با تشکر از شما دوست عزیز
امضاء banirazavi
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


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