آهسته نشان دادن بکگراند

Pouya · خرداد 91

سلام. یه رنگ به عنوان بکگراند برای بعضی از لینک ها گذاشتم که هر وقت موس روی اون میره بکگراند در یک چشم به زدن ظاهر میشه. حالا چطوری می تونم این ظاهرشدن بکگراند رو کندش کنم? مثلا 1 ثانیه

**Parsa** · خرداد 91

خاصیت Transition CSS3


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transition Document</title>
<style>
.transition {
-webkit-transition: all 0.6s ease-out;  /* Saf3.2+, Chrome */
-moz-transition: all 0.6s ease-out;  /* FF4+ */
-ms-transition: all 0.6s ease-out;  /* IE10? */
-o-transition: all 0.6s ease-out;  /* Opera 10.5+ */
transition: all 0.6s ease-out;
}
.divc{
background-color:#0C6;
width:300px;
height:300px;
}
.divc:hover{
background-color:#39C;
}
</style>
</head>
<body>
<div class="divc transition">
Transition Test.
</div>
</body>
</html>

Pouya · خرداد 91

این جا زمانش چقدر تعیین شده?

**Parsa** · خرداد 91

0.6s

0.6 ثانیه

مرتضی نظری · خرداد 91

اما به نظر من همین مقداری که پارسا عزیز انتخاب کردند خیلی بهتره.چون 1 ثانیه خیلی لوس هست برای اجرای این کار...

Pouya · خرداد 91

اما به نظر من همین مقداری که پارسا عزیز انتخاب کردند خیلی بهتره.چون 1 ثانیه خیلی لوس هست برای اجرای این کار...

آره کنده. فقط می خواسنم بدونم کدوم مقداره.

به هر حال ممنون. یه پوسته دارم طراحی می کنم ازش استفاده می کنم. ;-)

miladgradient · خرداد 91

سلام

ببخشید

من چطوری میتونم این افکت زیبا رو برای سایتم داشته باشم؟

کد css منوهای من به این صورته

.nav {
background:url(images/menu_bg.png) no-repeat right;
height:42px;
margin: 10px auto;
width:960px;
}
hl {
list-style: none;
}
.nav ul {
margin: 10px;
position: relative;
text-transform: none;
padding:0 0 0 15px;
}
.nav ul li {
float: right;
position: relative;
margin:6px 0;
}
.nav li a {
background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
background:-webkit-linear-gradient(#ffffff, #e6e6e6);
background:-moz-linear-gradient(center top, #ffffff 0%, #e6e6e6 100%);
background:-moz-gradient(center top, #ffffff 0%, #e6e6e6 100%);
-webkit-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
-moz-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
border:1px solid #999;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
color: #666;
display: inline-block;
float: none;
font-size: 12px;
line-height: 14px;
margin-left: 8px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFF;
}
.nav ul li a:hover {overflow: visible;
background:#4fa4cb;
background:-webkit-gradient(linear, left top, left bottom, from(#a1cb4f), to(#7fa92d));
background:-webkit-linear-gradient(#b54fcb, #9e17bb);
background:-moz-linear-gradient(center top, #a1cb4f 0%, #7fa92d 100%);
background:-moz-gradient(center top, #a1cb4f 0%, #7fa92d 100%);
border: 1px solid #5D870B;
color: #fefefe;
text-shadow: 0 1px 3px rgba(230, 230, 230, 0.5);
}

کد html هم به این صورته

<nav class="nav">
  <ul>
	<li class="current_page_item"><a href="http://www.androidha.in">اندرویدها</a></li>
	<li class="page_item page-item-169"><a href="http://www.androidha.in/ads/">تبلیغات</a></li>
<li class="page_item page-item-31"><a href="http://www.androidha.in/contactus/">تماس با ما</a></li>
  </ul>

ویرایش شده خرداد 91 توسط Morteza
کدها در تگ CODE

Pouya · خرداد 91

سلام

ببخشید

من چطوری میتونم این افکت زیبا رو برای سایتم داشته باشم؟

کد css منوهای من به این صورته

.nav {
background:url(images/menu_bg.png) no-repeat right;
height:42px;
margin: 10px auto;
width:960px;
}
hl {
list-style: none;
}
.nav ul {
margin: 10px;
position: relative;
text-transform: none;
padding:0 0 0 15px;
}
.nav ul li {
float: right;
position: relative;
margin:6px 0;
}
.nav li a {
background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
background:-webkit-linear-gradient(#ffffff, #e6e6e6);
background:-moz-linear-gradient(center top, #ffffff 0%, #e6e6e6 100%);
background:-moz-gradient(center top, #ffffff 0%, #e6e6e6 100%);
-webkit-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
-moz-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
border:1px solid #999;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
color: #666;
display: inline-block;
float: none;
font-size: 12px;
line-height: 14px;
margin-left: 8px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFF;
}
.nav ul li a:hover {overflow: visible;
background:#4fa4cb;
background:-webkit-gradient(linear, left top, left bottom, from(#a1cb4f), to(#7fa92d));
background:-webkit-linear-gradient(#b54fcb, #9e17bb);
background:-moz-linear-gradient(center top, #a1cb4f 0%, #7fa92d 100%);
background:-moz-gradient(center top, #a1cb4f 0%, #7fa92d 100%);
border: 1px solid #5D870B;
color: #fefefe;
text-shadow: 0 1px 3px rgba(230, 230, 230, 0.5);
}

کد html هم به این صورته

<nav class="nav">
  <ul>
	<li class="current_page_item"><a href="http://www.androidha.in">اندرویدها</a></li>
	<li class="page_item page-item-169"><a href="http://www.androidha.in/ads/">تبلیغات</a></li>
<li class="page_item page-item-31"><a href="http://www.androidha.in/contactus/">تماس با ما</a></li>
  </ul>

شما کدهای css رو که پارسا داد رو توی استایلت کپی کن و

رو قبل از کدهای مربوط به فراخوانی css منوهات بذار و در جایی که میدونی با

</div>

ببندش.

miladgradient · خرداد 91

<div class="divc transition">
رو قبل از کدهای مربوط به فراخوانی css منوهات بذار و در جایی که میدونی با
</div>
ببندش.

میشه این قسمتش رو یه کوچولو بیشتر توضیح بدین؟

من کدهارو گذاشتم

اگه میشه بگید کجای این کدها

miladgradient · خرداد 91

یک سوال دیگه دوستان

ببخشید که اینجا مطرحش میکنم

آخه جای دیگه مناسب ندیدم

من یک بنر فلش دارم میخوام بذارمش توی سایتم

اما هر کدی که گیر میارم یه مشکلی داره

یه کد گیر آوردم که فقط یک مشکل داره

وقتی با موس میرم روی بنر، شکل موس به شکل دست تغییر پیدا میکنه

اما هرچی کلیک میکنم اون سایتی که بهش دادم باز نمیشه.

میشه شما یک کد سالم به من بدید؟

ممنون میشم.

**Morteza** · خرداد 91

یک سوال دیگه دوستان
ببخشید که اینجا مطرحش میکنم
آخه جای دیگه مناسب ندیدم
من یک بنر فلش دارم میخوام بذارمش توی سایتم
اما هر کدی که گیر میارم یه مشکلی داره
یه کد گیر آوردم که فقط یک مشکل داره
وقتی با موس میرم روی بنر، شکل موس به شکل دست تغییر پیدا میکنه
اما هرچی کلیک میکنم اون سایتی که بهش دادم باز نمیشه.
میشه شما یک کد سالم به من بدید؟
ممنون میشم.

دوست عزیز

سوالتون رو باید در تاپیک جدید و در همین بخش مطرح کنید.

miladgradient · خرداد 91

شما کدهای css رو که پارسا داد رو توی استایلت کپی کن و
<div class="divc transition">
رو قبل از کدهای مربوط به فراخوانی css منوهات بذار و در جایی که میدونی با
</div>
ببندش.

دوستان کسی هست در مورد این کد یه کم توضیح بده؟

من نمیدونم این کد رو دقیقا باید کجا بذارم

و کجا با این ببندمش

</div>

**Morteza** · خرداد 91

شما کل کدهای منوتون رو توی div بالا بزارید و تست کنید که کار میکنه یا خیر.

فراموش نکنید که کدهای پست اول پارسا رو هم به فایل استایلتون اضافه کنید.

miladgradient · خرداد 91

شما کل کدهای منوتون رو توی div بالا بزارید و تست کنید که کار میکنه یا خیر.
فراموش نکنید که کدهای پست اول پارسا رو هم به فایل استایلتون اضافه کنید.

امتحان کردم

جواب نداد

اصلا منومو بهم ریخت

قالب رو زمیمه میکنم

که خودتون امتحان کنید و مطمئن شین


androidha.in/wp-content/themes/Androidha.in.zip

**Morteza** · خرداد 91

نیازی به فایل پوسته نیست.

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

.nav ul li a {
-webkit-transition: all 0.6s ease-out;  /* Saf3.2+, Chrome */
-moz-transition: all 0.6s ease-out;  /* FF4+ */
-ms-transition: all 0.6s ease-out;  /* IE10? */
-o-transition: all 0.6s ease-out;  /* Opera 10.5+ */
transition: all 0.6s ease-out;
}
.nav ul li a:hover{
background:#39C;
}

چیز دیگه ایی نیاز نیست.

افکت به درستی کار میکنه.

miladgradient · خرداد 91

نیازی به فایل پوسته نیست.
این کد رو به ادامه کدهای استایل منوتون اضافه کنید:
.nav ul li a {
-webkit-transition: all 0.6s ease-out;  /* Saf3.2+, Chrome */
-moz-transition: all 0.6s ease-out;  /* FF4+ */
-ms-transition: all 0.6s ease-out;  /* IE10? */
-o-transition: all 0.6s ease-out;  /* Opera 10.5+ */
transition: all 0.6s ease-out;
}
.nav ul li a:hover{
background:#39C;
}
چیز دیگه ایی نیاز نیست.
افکت به درستی کار میکنه.

ممنون ازتون

فقط یه چیزی

این دکمه های دایره ای شکل رو چطوری بردارم؟

ویرایش شده خرداد 91 توسط mx10

**Morteza** · خرداد 91

سوال جدید در تاپیک جدید،

miladgradient · خرداد 91

دوستان چون این سوال مربوط به افکت بود همینجا مطرحش کردم

کسی کد افکت منوی این سایت رو داره؟

http://www.wordpress98.com/

**Morteza** · خرداد 91

کدوم منو، بالایی یا پایینی؟

miladgradient · خرداد 91

هم اون منویی که یک جسم سبز رنگ زیرش جا به جا میشه

و هم اون کدی که با رفتن روی یک گزینه بقیه جاها مات میشن

rezaonline · خرداد 91

کلاً از فلش استفاده نکنید.

فلش در مرورگرهای مختلف با توجه به نوع addon مرورگر ، بطوری دلخواه تفسیر میشن .

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



.nav {
background:url(images/menu_bg.png) no-repeat right;
height:42px;
margin: 10px auto;
width:960px;
transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;  
-moz-transition: all 0.6s ease-out;  
-ms-transition: all 0.6s ease-out;  
-o-transition: all 0.6s ease-out;  
}

miladgradient · خرداد 91

کلاً از فلش استفاده نکنید.
فلش در مرورگرهای مختلف با توجه به نوع addon مرورگر ، بطوری دلخواه تفسیر میشن .
کدت استایلتو به این تغییر بده
.nav {
background:url(images/menu_bg.png) no-repeat right;
height:42px;
margin: 10px auto;
width:960px;
transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;  
-moz-transition: all 0.6s ease-out;  
-ms-transition: all 0.6s ease-out;  
-o-transition: all 0.6s ease-out;  
}

رضا جان میشه بگی این کد مال چیه؟

rezaonline · خرداد 91

مال مشکل اولت

miladgradient · خرداد 91

کدوم منو، بالایی یا پایینی؟

آقا این منوهایی که گفتم رو خبرش ازش گیر نیاوردین؟

ممنون میشم خبر بدین

**Morteza** · خرداد 91

منو بالا:

http://3.7designs.co/web-design3.html

منوی پایین:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

آهسته نشان دادن بکگراند

پست های پیشنهاد شده

Pouya 1102

لینک به ارسال

Parsa 23463

لینک به ارسال

Pouya 1102

لینک به ارسال

Parsa 23463

لینک به ارسال

مرتضی نظری 4182

لینک به ارسال

Pouya 1102

لینک به ارسال

miladgradient 24

لینک به ارسال

Pouya 1102

لینک به ارسال

miladgradient 24

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

miladgradient 24

لینک به ارسال

rezaonline 2655

لینک به ارسال

miladgradient 24

لینک به ارسال

rezaonline 2655

لینک به ارسال

miladgradient 24

لینک به ارسال

Morteza 34190

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید