رفتن به مطلب

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


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

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

لینک به ارسال

خاصیت 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>

لینک به ارسال

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

لینک به ارسال

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

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

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

لینک به ارسال

سلام

ببخشید

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

کد 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>

ویرایش شده توسط Morteza
کدها در تگ CODE
لینک به ارسال

سلام

ببخشید

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

کد 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 رو که پارسا داد رو توی استایلت کپی کن و

<div class="divc transition">

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

</div>

ببندش.

لینک به ارسال

<div class="divc transition">

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

</div>

ببندش.

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

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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

ممنون میشم.

لینک به ارسال

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

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

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

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

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

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

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

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

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

ممنون میشم.

دوست عزیز

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

لینک به ارسال

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

<div class="divc transition">

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

</div>

ببندش.

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

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

<div class="divc transition">

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

</div>

لینک به ارسال

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

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

لینک به ارسال

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

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

امتحان کردم

جواب نداد

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

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

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


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

لینک به ارسال

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

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

.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;
}

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

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

لینک به ارسال

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

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

.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;
}

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

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

ممنون ازتون

فقط یه چیزی

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

ویرایش شده توسط mx10
لینک به ارسال

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

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

http://www.wordpress98.com/

لینک به ارسال

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

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

لینک به ارسال

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

فلش در مرورگرهای مختلف با توجه به نوع 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;
}

لینک به ارسال

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

فلش در مرورگرهای مختلف با توجه به نوع 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;
}

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

لینک به ارسال

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

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

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

لینک به ارسال

منو بالا:

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

منوی پایین:

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...