آموزش ۵ تکنیک کاربردی CSS و jQuery

minaaa · ‏12/11/11

[h=4]آموزش ۵ تکنیک کاربردی CSS و jQuery (قسمت اول)
[/h]
با توجه به طیف گسترده ی قابلیت های CSS3 و jQuery به راحتی و خیلی سریع می توان یک وب سایت زیبا و مناسب ایجاد نمود که بازدیدکنندگان و افراد علاقمند از مشاهده و کار با آن وب سایت لذت ببرند . آموزش ها و مقالات زیادی در این زمینه ها نوشته و منتشر شده است و هرکسی می تواند با آشنایی مختصر به زبان های برنامه نویسی تحت وب از این قابلیت ها استفاده کند !

در این مقاله قصد دارم تا ۵ تکنیک پر کاربرد مربوط به CSS و jQuery را به شما به صورت خلاصه و مفید ، همراه با مثال و فایل های پایانی آموزش دهم که مطمئنا می تواند برای شما مفید و قابل استفاده باشد . این مقاله را در ۵ قسمت ترجمه و در سایت قرار میدهم تا خواندن و انجام دستورات آن راحت تر شود . آموزش هایی که در این مقاله گنجانده شده اند در واقع ترکیبی از کدهای CSS و jQuery هستند که در ادامه عنوان هر یک از آموزش ها آورده شده است …
عنوان آموزش های این مقاله :
۱- افکت متن برجسته
۲- متحرک سازی تصویر پس زمینه
۳- منوی آبشاری یا Drop And Down
4- ساخت یک اسلایدشو
۵- متحرک سازی آیکون در پس زمینه
در این مطلب عنوان اول یعنی برجسته کردن متون آموزش داده می شوند .
یادگیری مفید و کامل این تکنیک ها با خلاقیت و ایده های شما عزیزان بهتر و مفید تر خواهند شد . قطعا این آموزش ها فقط به عنوان ایده و نمونه ارائه شده اند و برای یادگیری به مطالعه بیشتر و تمرین های متعدد نیاز دارید . این تکنیک ها از پایه توضیح داده نشده اند و مقدمات را باید فرا گرفته باشید . برای کامل شدن آموزش ها و مقالات سایت نیز از بخش نظرات پیشنهادات خود را برای ما ارسال کنید .
اکنون آموزش های مورد نظر را به ترتیب آغاز می کنیم .

1- افکت متون برجسته
این حالت از متن بسیار زیبا و جذاب می باشد که با قرار گیری موس روی آن برجسته می شود . در تصویر زیر می توانید نمونه ای از این متون را مشاهده کنید .

ابتدا متن مورد نظر را در بین تگ Span با کلاس extruded ایجاد می کنیم .

<span class="extruded">IranHex</span>
در این مرحله باید کدهای CSS را بنویسیم و آنها را فراخوانی کنیم .
body {
background-color: #444;
text-align: center;
}
.extruded {
color: #888;
font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: #000 3px 3px;
}
در کد بالا از text-shadows به صورت عادی استفاده شده است و در صورتی که سایه ایجاد شده قابل دیدن نیست و یا ضعیف است می توانید به صورت زیر تعداد سایه را افزایش دهید .
text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
کدهای مربوط به بخش Hoverحالا کدهای زیر را برای حالت قرار گرفتن موس روی متن اضافه کنید .
.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
}
اگر می خواهید با افزایش اندازه سایه متن شما نیز حرکت کند و بالا یا هر جهتی که می خواهید حرکت کند کد زیر را در بخش extruded اضافه کنید .
position: relative;
و همینطور کدهای زیر را به بخش extruded:hover اضافه کنید . جهات و مقدار را می توانید به دلخواه تغییر دهید .
left: -6px;
top: -6px;
اضافه کردن Transition
در این مرحله باید Transition را برای کدهای CSS تعریف کنید . کافیست کدهای زیر را به بخش extruded اضافه کنید .
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;

تا به اینجا کدهای CSS ما به صورت زیر شده اند :
<style type="text/css">
body {
background-color: #444;
text-align: center;
}
.extruded {
color: #888;
font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
position: relative;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
left: -6px;
top: -6px;
}
</style>
کار تمام است ! اکنون می توانید متن مورد نظر خود را تست کنید .

minaaa · ‏12/11/11

پاسخ : آموزش ۵ تکنیک کاربردی CSS و jQuery

[h=4]آموزش ۵ تکنیک کاربردی CSS و jQuery (قسمت دوم)[/h]
. در این قسمت ، یعنی قسمت دوم ، نحوه ساختن یک پس زمینه متحرک را به شما آموزش خواهم داد .

در این آموزش با استفاده از کدهای CSS3 یک پس زمینه متغییر با حالت محو شدگی ایجاد می کنیم که از این افکت می توان در کارها و مدل های مختلف نیز استفاده کرد…
همانطور که تصویر زیر مشاهده می کنید یک تصویر با پس زمینه Transparent دارید و می خواهیم بعد از قرار گرفتم موس روی آن پس زمینه تغییر رنگ دهد .

در ابتدا کدهای HTML مربوطه را می نویسم .

<div>
<h2>
This is the title you hover over
<img src="ih-image.png" alt="" />
</h2>
<p>Some more text here.</p>
</div>
با استفاده از کد بالا یک تصویر و یک پاراگراف متن ایجاد کردیم . حالا در ادامه کدهای CSS را برای استایل دادن به اشیاء ایجاد شده می نویسم .
.post-wrapper {
position: relative;
padding-left: 240px;
}
.post-image {
position: absolute;
top: 0;
left: 0;
background-color: #bbb;
}
.post-title {
color: #037072;
}
در کد بالا ، تصویر را به سمت چپ پست جا به جا کردیم و رنگ پس زمینه آن را یک رنگ تیره در نظر گرفتیم . اکنون کدهای مربوط به بخش قرار گیری موس و یا Hover را اضافه می کنیم .
.post-title:hover {
color: #d63c25;
}
.post-title:hover .post-image {
background-color: #f04e36;
}
حالا اگر موس را روی تصویر و یا عنوان پست ببریم مشاهده می کنیم که رنگ آنها به یک رنگ روشن تغییر پیدا می کند . در این بخش می خواهیم این تغییر رنگ را جذاب تر و زیباتر کنیم ! می خوهیم افکت محو شدگی یا Fade را به این قسمت بدهیم تا وقتی موس رو تصویر قرار میگیرد ، تغییر رنگ به آرامی انجام شود . برای این کار کدهای زیر را نیز به کدهای CSS اضافه می کنیم .
.post-image {
-webkit-transition: background-color 400ms ease-in;
-moz-transition: background-color 400ms ease-in;
transition: background-color 400ms ease-in;
}
.post-title {
-webkit-transition: color 400ms ease-in;
-moz-transition: color 400ms ease-in;
transition: color 400ms ease-in;
}
در کد بالا از خاصیت CSS3 transition استفاده کردیم . این خاصیت CSS3 در مرورگر IE 9 قابل پشتیبانی نیست و برای اینکه این حالت در تمامی مرورگرها اجرا شود باید از جی کوئری برای ایجاد این افکت استفاده کنید .تمامی کدهای CSS که نوشتیم در زیر قرار داده ام :
.post-wrapper {
position: relative;
padding-left: 240px;
}
.post-image {
position: absolute;
top: 0;
left: 0;
background-color: #bbb;
-webkit-transition: background-color 400ms ease-in;
-moz-transition: background-color 400ms ease-in;
transition: background-color 400ms ease-in;
}
.post-title {
color: #037072;
-webkit-transition: color 400ms ease-in;
-moz-transition: color 400ms ease-in;
transition: color 400ms ease-in;
}
/* add the hover states */
.post-title:hover {
color: #d63c25;
}
.post-title:hover .post-image {
background-color: #f04e36;
}
کار تمام شد . فایل پایانی آموزش را می توانید از بخش زیر دانلود کنید . آموزشی که در بالا داده شد در واقع یک الگو و نحوه کار کلی را توضیح داده است و برای خلق کارهای جدید و زیباتر باید از خلاقیت خود استفاده کنید . از این روش می توان در بسیار از کارها استفاده کرد . با تشکر . موفق باشید .

minaaa · ‏12/11/11

پاسخ : آموزش ۵ تکنیک کاربردی CSS و jQuery

[h=4]آموزش ۵ تکنیک کاربردی CSS و jQuery (قسمت سوم)[/h]
در این قسمت از مجموعه ۵ تکنیک کاربردی CSS و jQuery، که قسمت سوم آن می باشد قصد دارم تا نحوه کدنویسی یک منوی آبشاری را به شما آموزش دهم.

منوهای آبشاری یا Drop & Down، منوهایی هستند که با قرار گرفتن ماوس روی آنها به صورت کشویی باز می شوند و لینک‌های زیرمجموعه از این طریق قابل دیدن خواهند بود. منویی که در این مقاله قصد آموزش آن را دارم یک منو با زیرمجموعه چند ستونه می باشد که امکان قرار دادن زیرمجموعه‌های گروهی در آن امکان پذیر است…مراحل زیر را با دقت انجام دهید. توجه کنید که مسائل ابتدایی توضیح داده نشده اند.

1- ساخت تب‌ها
برای ساختن تب‌ها یا لینک‌های اصلی منو کد‌های زیر را می نویسیم.

<ul id="main-nav">
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 1</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 2</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 3</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 4</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 5</a>
</li>
</ul>
در کد بالا تعداد ۵ تب تعریف شده است که در حال حاضر زیر مجموعه ندارند. در ادامه نحوه افزودن زیر مجموعه به آنها را توضیح خواهم داد.مرورگر IE6 از این منو پشتیبانی نمیکند . بنابراین اگر می خواهید که در این مرورگر هم قابل پشتیبانی باشد، باید از راه‌های دیگر استفاده کنید .
حالا کدهای CSS مربوط به تب‌های اصلی را در فایل CSS خود بنویسید.
#main-nav {
width: 800px;
height: 50px;
position: relative;
list-style: none;
padding: 0;
}
#main-nav .main-nav-item {
display: inline;
}
#main-nav .main-nav-tab {
float: left;
width: 140px;
height: 30px;
padding: 10px;
line-height: 30px;
text-align: center;
color: #FFF;
text-decoration: none;
font-size: 18px;
}
در کدهای بالا ابتدا طول و عرض منو تعریف شده اند و سپس برای اینکه قابلیت آبشاری داشته باشد کد position: relative; را به آن اضافه کرده ایم. از list-style: none استفاده کرده ایم تا لیست دارای بالت نباشد و همینطور از display: inline استفاده کرده ایم تا لیست ساخته شده به صورت خطی قرار بگیرد.
در آخر تمامی تب ها را Float:left کرده ایم. 2- ساخت Drop & Down
در این قسمت بخش بازشو و یا Drop & Down را برای یکی از تب‌ها می سازیم.
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 1</a>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
</li>
کدهای بالا بعد از کد
<a href="#">Tab 1</a>
قرار میگیرند که در واقع تعیین کننده تعداد ستون زیر مجموعه‌ها می باشند.

و حالا استایل مربوط به بخش بازشو را به فایل CSS اضافه می کنیم.
#main-nav .main-nav-dd {
position: absolute;
top: 50px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFF;
border-bottom: 4px solid #f60;
}
#main-nav .main-nav-dd-column {
width: 130px;
padding: 15px 20px 8px;
display: table-cell;
border-left: 1px solid #ddd;
*float: left;
*border-left: 0;
}
#main-nav .main-nav-dd-column:first-child {
border-left: 0;
}
در کدهای بالا ما برای تب اول ۳ ستون تعیین کرده‌ایم که در این ستون ها لینک‌های دلخواه را قرار میدهیم.در کدهای CSS، قبل از بعضی سکتورها از کارکتر * استفاده کرده‌ایم که جزء هک‌های مرورگرهای IE6 و IE7 می باشد.به همین صورت می توانید در میان هر یک از ستون ها لینکهای دلخواه خود را اضافه کنید.
3- مرتبط کردن CSS و jQuery
برای اینکه منوی ما حالت بازشو پیدا کند از ترکیب کدهای CSS و jQuery استفاده می کنیم.
$(function() {
var $mainNav = $('#main-nav');
$mainNav.children('.main-nav-item').hover(function(ev) {
// show the dropdown
$(this).addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});
همانطور که میبینید کدهای سی‌اس‌اس را با کدهای جی‌کوئری بالا مرتبط کرده ایم.حالا می توانیم کدهای مربوط به نمایش داده شدن و نشدن بخش بازشو را بنویسیم.
#main-nav .main-nav-dd {
display: none;
}
#main-nav .main-nav-item-active .main-nav-dd {
display: block;
}
و همینطور کدهای مربوط به حالت Active تب‌ها…
#main-nav .main-nav-item-active .main-nav-tab {
background-color: #FFF;
color: #f60;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
4- تعیین موقعیت بخش بازشو
این بخش موقعیت زیرمجموعه ها را در حالت قرار گیری ماوس روی آنها تعیین می کنیم تا درست در زیر تب‌ها قرار بگیرند.
$(function() {
var $mainNav = $('#main-nav');
$mainNav.children('.main-nav-item').hover(function(ev) {
var $this = $(this),
$dd = $this.find('.main-nav-dd');
// get the left position of this tab
var leftPos = $this.find('.main-nav-tab').position().left;
// position the dropdown
$dd.css('left', leftPos);
// show the dropdown
$this.addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});
با استفاده از این کدها بخش بازشوی منو درست در زیر تب‌ها قرار میگیرند.با برخی از کدهای جاوا اسکریپت دیگر موقعیت قرارگیری را بهتر میکنیم. کد زیر کاملتر می باشد؛ پس از آن استفاده می کنیم.
$(function() {
var $mainNav = $('#main-nav'),
navWidth = $mainNav.width();
$mainNav.children('.main-nav-item').hover(function(ev) {
var $this = $(this),
$dd = $this.find('.main-nav-dd');
// get the left position of this tab
var leftPos = $this.find('.main-nav-tab').position().left;
// get the width of the dropdown
var ddWidth = $dd.width(),
leftMax = navWidth - ddWidth;
// position the dropdown
$dd.css('left', Math.min(leftPos, leftMax) );
// show the dropdown
$this.addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});
این بخش باید به دقت تنظیم شود تا محل قرارگیری زبانه‌ها به صورت درست قرار بگیرد. امیدوارم این قسمت نیز مورد استفاده شما عزیزان قرار بگیرد. فایل پایانی آموزش را می توانید از بخش زیر دریافت کنید. نظرات و پیشنهادات خود را برای ما ارسال کنید. با تشکر… موفق باشید.

minaaa · ‏12/11/11

پاسخ : آموزش ۵ تکنیک کاربردی CSS و jQuery

[h=4]آموزش ۵ تکنیک کاربردی CSS و jQuery (قسمت چهارم)[/h]
در این قسمت از مجموعه پست های ۵ تکنیک کاربردی CSS و jQuery قصد آموزش نحوه نوشتن یک اسلایدشوی بسیار زیبا و کاربردی را دارم. همانطور که می دانید اسلایدشوها در انواع مختلفی وجود دارند و کاربرد آنها نیز می تواند متفاوت باشد. اسلایدشوهای متنی یا تصویری ، اسلایدشوهایی که دارای توضیحات هستند و یا بدون توضیحات و…

اسلایدشویی که در این آموزش نحوه نوشتن آن را یاد میگیرید یک اسلایدشوی تصویری بسیار زیبا می باشد که قابلیت اضافه کردن توضیحات به تصاویر را نیز دارد و همینطور درای قسمت ناوبری یا Navigation می باشد…
بدنه اسلایدشو
در ابتدا با استفاده از کدهای ساده HTML بدنه ی اصلی اسلایدشو را به صورت زیر می نویسم :

<div id="slideshow">
<div id="slideshow-reel">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div class="slide">
<h1>Slide 5</h1>
</div>
<div class="slide">
<h1>Slide 6</h1>
</div>
</div>
</div>
در اینجا ما از شش تصویر اسلاید استفاده کرده ایم که بر اساس نیاز شما می تواند متغیر باشد.در این قسمت کدهای CSS مربوطه را می نویسم :
#slideshow {
width: 900px;
height: 500px;
overflow: hidden;
position: relative;
}
#slideshow-reel {
width: 5400px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#slideshow-reel .slide {
width: 900px;
height: 450px;
float: left;
background-color: gray;
}
در این بخش ما سایز تصاویر اسلایدر را مشخص کرده ایم و آنها را در حالت شناور تعریف کرده ایم و… .همانطور که مشاهده می کنید عرض تصاویر ۹۰۰ پیکسل است و تعداد تصاویر ۶ عدد میباشد. بنابراین باید برای ۶ عدد تصویر، عدد ۹۰۰ را در ۶ ضرب کنیم تا سایز کلی بدست بیاید که ۵۴۰۰ پیکسل است. پس اگر تعداد تصاویر شما بیشتر یا کمتر از ۶ هست باید مقدار ۵۴۰۰ را تغییر دهید. متحرک سازی اسلایدشوکدهای جی کوئری زیر را برای متحرک سازی اسلایدشو اضافه می کنیم :
$(function() {
function changeSlide( newSlide ) {
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1;
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});
دکمه های راست و چپ اسلایدشوبرای اضافه کردن دکمه های راست و چپ در اسلایدشو از کدهای زیر می توانیم استفاده کنیم :
<a href="#" id="slideshow-prev"></a>
<a href="#" id="slideshow-next"></a>
حالا کدهای CSS مربوط به فلش ها را می نویسیم :
#slideshow-prev, #slideshow-next {
display: block;
position: absolute;
top: 190px;
width: 0;
height: 0;
border-style: solid;
border-width: 28px 21px;
border-color: transparent;
outline: none;
}
#slideshow-prev:hover, #slideshow-next:hover {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#slideshow-prev {
left: 0;
border-right-color: #fff;
}
#slideshow-next {
right: 0;
border-left-color: #fff;
}
کدهای جی کوئری را نیز برای فعال شدن فلش ها اضافه می کنیم :
$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slidePrevNav.hide();
else $slidePrevNav.show();
if ( currSlide == maxSlide ) $slideNextNav.hide();
else $slideNexNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slidePrevNav = $slideshow.find('#slideshow-prev'),
$slideNextNav = $slideshow.find('#slideshow-next');
// set navigation click events
// left arrow
$slidePrevNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideNextNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});
به خاطر مفصل بودن توضیحات در مورد کدهای جی کوئری بالا، در مورد آنها توضیح نمیدهم. اضافه کردن بخش Navigationامکان مدیریت تصاویر اسلایدشو با استفاده از فلش های چپ و راست امکان پذیر است اما با اضافه کردن بخش ناوبری مدیریت آن راحت تر می شود. برای این کار کدهای جی کوئری زیر را نیز اضافه می کنیم :
$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slidePrevNav.hide();
else $slidePrevNav.show();
if ( currSlide == maxSlide ) $slideNextNav.hide();
else $slideNextNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slidePrevNav = $slideshow.find('#slideshow-prev'),
$slideNextNav = $slideshow.find('#slideshow-next'),
$activeNavItem = $slideshow.find('#active-nav-item');
// set navigation click events
// left arrow
$slidePrevNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideNextNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// main navigation
$slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( $(this).index() );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});

minaaa · ‏12/11/11

پاسخ : آموزش ۵ تکنیک کاربردی CSS و jQuery

[h=4]آموزش ۵ تکنیک کاربردی CSS و jQuery (قسمت پنجم)[/h]
سایت CSS-Tricks در فوتر خود از یک افکت جالب برای آیکون های موجود در آن استفاده کرده که با قرار گرفتن موس روی آنها به شکل زیبایی رنگ و طرحشان عوض میشود! در این مطلب قصد دارم تا نوع ساده ای از این افکت را به شما آموزش دهم که با استفاده از CSS3 میتوان آن را ایجاد کرد.

از این افکت می توانید در زیباتر کردن آیکون های سایت، تصاویر و… استفاده کنید. امیدوارم قسمت پنجم این مجموعه مقالات نیز برای شما مفید باشد. برای خواندن آموزش به ادامه مطلب مراجعه کنید.ابتدا لینک و متن های مورد نظر را به صورت زیر ایجاد میکنیم :

<a href="#">
<h3>Panel Title</h3>
<p>Additional information about the panel goes in a paragraph here</p>
</a>
در مرحله بعد به دکمه یا همان لینک ایجاد شده استایل میدهیم. به صورت زیر :
.hover-panel {
background-color: #E6E2DF;
color: #B2AAA4;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}
کدهای بالا استایل حالت اولیه دکمه است. در ادامه استایل حالت دوم یا Hover را اضافه میکنیم :
.hover-panel:hover {
background-color: #237ABE;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}
حالا پس زمینه دکمه را با استفاده از کدهای زیر ایجاد میکنیم :
.hover-panel {
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
}
.hover-panel:hover {
background-position: 180px 10px;
}
در مراحل بالا استایل اصلی دکمه را ایجاد کردیم . حالا باید حالت Transition را به آن اضافه کنیم.با اضافه کردن کدهای زیر، حالت Transition ایجاد میشود.
.hover-panel {
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}
کد CSS پایانی به صورت زیر میشود :
.hover-panel {
background-color: #E6E2DF;
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
color: #B2AAA4;
display: block;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}
.hover-panel:hover {
background-color: #237ABE;
background-position: 180px 10px;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}

ورود یا ثبت نام

آموزش ۵ تکنیک کاربردی CSS و jQuery

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

ورود یا ثبت نام

آموزش ۵ تکنیک کاربردی CSS و jQuery

minaaa کاربر پیشرفته

minaaa کاربر پیشرفته

minaaa کاربر پیشرفته

minaaa کاربر پیشرفته

minaaa کاربر پیشرفته

جستجوهای مفید

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته

minaaa
کاربر پیشرفته