Pouya

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

31 پست در این موضوع قرار دارد

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

0

به اشتراک گذاری این پست


لینک به پست

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

7

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

0.6s

0.6 ثانیه

2

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام

ببخشید

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

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

به اشتراک گذاری این پست


لینک به پست

سلام

ببخشید

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

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

ببندش.

3

به اشتراک گذاری این پست


لینک به پست

<div class="divc transition">

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

</div>

ببندش.

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

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

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

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

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

ممنون میشم.

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

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

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

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

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

ممنون میشم.

دوست عزیز

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

1

به اشتراک گذاری این پست


لینک به پست

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

<div class="divc transition">

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

</div>

ببندش.

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

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

<div class="divc transition">

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

</div>

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

امتحان کردم

جواب نداد

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

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

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


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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

.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
0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

http://www.wordpress98.com/

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

مال مشکل اولت :D

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

منو بالا:

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

منوی پایین:

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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری