آموزش جامع CSS (سی اس اس)
آموزش Css (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است.
تقریباً همه کسانی که صاحب تجارتخانه های کوچک و بزرگ می باشندبایستی دارای طراحی وب سایت باشند.دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود وب سایت خود را با آخرین تکنولوژیهای طراحی وب سایت بسازید.
Css (سی اس اس) به عبارت ساده برای زیبایی صفحات وب در طراحی سایت می باشد.
آموزش درست سی اس اس و یادگیری حرفه ای آن، می تواند فرق اصلی بین طراح سایت مبتدی و حرفه ای قالب های سایت باشد. مقالات Css ما بصورت کاملا حرفه ای به مقوله پرداخته اند. آموزش سی اس اس بسیار ساده می باشد و دستورات آن محدود می باشند ولی نوع استفاده از آن و هماهنگی آن با اچ تی ام ال و نیز رعایت نکات آن است که Css را پیچیده کرده است.
از مهمترین مزایای Css میتوان به انعطاف پذیری بالای css ، کاهش استفاده از پهنای باند شبکه، کم حجم کردن فایل html ، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف و ... می باشد.
تمرین زیاد و آموزش کامل سی اس اس، شما را می تواند در استفاده از دستورات Css حرفه ای کند. کدهای سی اس اس بصورت متنی می باشند و تنها نرم افزار مورد نیاز برای آن NotePad ویندوز می باشد. css مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.
با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و ... همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیم.
امیدواریم بخش آموزش سی اس اس برای شما مفید باشد.
مقدمات آموزش CSS
CSS چیست ؟
مزایای سی اس اس ( CSS )
طریقه نوشتن CSS - خاصیت Style تگ ها
طریقه نوشتن CSS - تگ Style در Head صفحه
طریقه نوشتن CSS - فایل خارجی در پروژه
اصول نوشتن کدهای CSS
آموزش خواص مقدماتی CSS
تنظیم طول و عرض ( Height , Width ) عناصر در CSS
تنظیم پس زمینه Background در CSS
تنظیم قلم و فونت CSS Styling Font
تنظیم متن و نوشته CSS Styling Text
تنظیم لیست ها CSS Styling List
تنظیم خواص باکس ها Border , Margin , Padding
آموزش خواص پیشرفته CSS
خواص مربوط به سرریزی Overflow عناصر در CSS
محل قرارگیری عناصر - خواص مربوط به Position
محل قرارگیری عناصر - خواص Clear , Float
خواص نمایش عناصر Cursor , Display , Visibility
تنظیم شفافیت عناصر Opacity
آموزش و معرفی انتخابگرها CSS Selectors
مرجع امکانات CSS
مرجع واحدهای شمارش در CSS
مرجع نام و شماره رنگ ها در CSS
مرجع انتخابگرها در CSS - بخش اول
مرجع انتخابگرها در CSS - بخش دوم
مرجع انتخابگرها در CSS - بخش سوم
سلام
من یه وبلاگ دارم بخش تبلیغات داره چه جوری اندازه و عکسشو و متنشو عوض کنم؟
لطفا مکانشو مشخص کنین در زیر
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title><-BlogAndPostTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="designer" content="Theme - Designer">
<meta name="designerUrl" content="http://www.theme-designer.com/">
<meta name="language" content="Farsi">
<meta name="author" content="<-BlogAuthor->">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<link href="http://themeupload.theme-designer.com/64/c.css" type="text/css" rel="stylesheet">
<script src="http://themeupload.theme-designer.com/64/js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://themeupload.theme-designer.com/64/js/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://themeupload.theme-designer.com/64/js/scrolltopcontrol.js"></script>
<script language="javascript" type="text/javascript">
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable({ circular: true }).autoscroll({ interval: 4000 });
});
</script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script language="javascript">
function GetBC(lngPostid)
{
intTimeZone=<-BlogTimeZone->;
strBlogId="<-BlogId->";
intCount=-1;
strResult="";
try {
for (i=0;i<BlogComments.length;i+=2)
{
if (BlogComments[i]==lngPostid)
intCount=BlogComments[i+1] ;
}
} catch( e) {
}
if ( intCount==-1) strResult="نظر دهید";
if ( intCount==0) strResult="نظر بدهید";
if ( intCount==1) strResult="یک نظر";
if ( intCount>1) strResult=intCount + " نظر" ;
strUrl="/comments/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" + strResult + " </a>" ;
document.write ( strResult ) ;
}
function OpenLD()
{
window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
return true;
}
</script>
</head>
<!-- template64-blogfa -->
<!-- Design By : wWw.Theme-Designer.Com -->
<body background="http://themeupload.theme-designer.com/64/image/1.jpg" >
<!---------- he ---------------------------->
<!---------- address-image --------->
<div style="
background-image:url('http://s4.picofile.com/file/8168284850/12.jpgg');
background-repeat:no-repeat; background-position:center top;" dir="rtl">
<!---------- address-image --------->
<div align="center"><div class="theme-designer-com_block-koli"><div align="right">
<div align="center"><div class="theme-designer-com_makan_blogtitle"><div align="right">
<div class="theme-designer-com_blogtitle"><a href="<-BlogUrl->"><-BlogTitle-></a></div>
<div class="theme-designer-com_description"><-BlogDescription-></div>
</div></div></div>
<!---------- he ---------------------------->
<div align="center"><div class="theme-designer-com_menutop-background"><div align="right">
<ul id="alibehnamfar-ir" align="right">
<li><a href="<-BlogUrl->" class="home" title="صفحه ي نخست"><div class="title-menu-top" style="padding:8px 25px 0px 0px;">صفحه ي نخست</div></a></li>
<li><a href="mailto:<-BlogEmail->" class="email" title="پست الکترونیک"><div class="title-menu-top" style="padding:8px 5px 0px 0px;">پست الکترونیک</div></a></li>
<li><a href="<-BlogArchiveLink->" class="archive" title="آرشیو مطالب"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">آرشیو مطالب</div></a></li>
<li><a target="_blank" target="_blank" href="/posts/" class="list-post" title="عناوين مطالب"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">عناوين مطالب</div></a></li>
<li><a href="<-BlogXmlLink->" class="rss" title="لينك rss" target="_blank"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">لينك rss</div></a></li>
<BlogProfileLinkBlock>
<li><a href="<-BlogProfileLink->" class="profile" title="پروفایل مدیر" target="_blank"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">پروفایل مدیر</div></a></li>
</BlogProfileLinkBlock>
</ul>
</div></div></div>
<!-- Date by www.Theme-Designer.com --->
<div class="theme-designer-com_makan_date"><div class="theme-designer-com_date-text"> [ <script type='text/javascript' language='javascript' src='http://www.theme-designer.com/s/history/?type=1'></script> ] </div></div>
<!-- Date by www.Theme-Designer.com --->
<div class="theme-designer-com_badane"><div class="theme-designer-com_badane2">
<div class="theme-designer-com_makan_search">
<div class="search">
<form method="Get" target="_blank" action="http://google.com/search" class=sch><input name="sitesearch" value="<-BlogUrl->" type="hidden">
<div style="height:34px; overflow:hidden; width:289px; overflow:hidden;">
<input type="submit" value="جستجو" class=but><input type="text" name="q" size="5" class=txt value="جستجو مطالب مورد نظر ..." onfocus="if (this.value == 'جستجو مطالب مورد نظر ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'جستجو مطالب مورد نظر ...';}">
</div>
</form>
</div>
</div>
<!---------- slideshow ---------------------------->
<div class="theme-designer-com_makan_slideshow">
<div class="theme-designer-com_slideshow-background">
<div style="margin:0px 11px 0px 0px;">
<div class="scrollable">
<div class="items">
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://s4.picofile.com/6file/8168287750/05555161051359853866.jpg"></a>
</div>
<!---------- /address-image --------->
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://themeupload.theme-designer.com/64/image/slideshow/2.jpg"></a>
</div>
<!---------- /address-image --------->
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://themeupload.theme-designer.com/64/image/slideshow/3.jpg"></a>
</div>
<!---------- /address-image --------->
</div>
</div>
</div>
<div class="theme-designer-com_makan_slideshow-f-right"><a class="next browse right"><img border="0" src="http://themeupload.theme-designer.com/64/image/10.png"></a></div>
<div class="theme-designer-com_makan_slideshow-f-left"><a class="prev browse left"><img border="0" src="http://themeupload.theme-designer.com/64/image/9.png"></a></div>
</div>
</div>
<!---------- slideshow ---------------------------->
<table border="0" width="1003" cellspacing="0" cellpadding="0">
<tr>
<td width="12" valign="top"> </td>
<td width="667" valign="top">
<div align="center">
<div class="theme-designer-com_post-space1"></div>
<BLOGFA>
<div class="theme-designer-com_post-back1" align="right">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="54">
<tr>
<td width="94" valign="top"> </td>
<td width="450" valign="top"><div class="theme-designer-com_post-title"><a href="<-PostLink->"><-PostTitle-></a></div></td>
<td width="106" valign="top"><BlogComment><div class="theme-designer-com-post-comment" align="center"><script type="text/javascript">GetBC(<-PostId->);</script></div></BlogComment></td>
</tr>
</table>
</div>
<div class="theme-designer-com_post-back2" align="right">
<div align="center"><div class="theme-designer-com-post-text-badane"><div align="right">
<div class="theme-designer-com-post-text"><-PostContent-></div>
<BlogPostCategoriesBlock>
<div class="theme-designer-com_width100-darsad">
<div class="post-abi-icon"></div>
<div class="post-abi-icon2">موضوعات مرتبط: <BlogPostCategories separator="، " ><a href="<-CategoryLink->"><-CategoryName-></a></BlogPostCategories></div>
</div>
<div style="theme-designer-com_clear"></div>
</BlogPostCategoriesBlock>
<BlogPostTagsBlock>
<div class="theme-designer-com_width100-darsad" style="margin:4px 0px 0px 0px;">
<div class="post-abi-icon"></div>
<div class="post-abi-icon2">برچسبها: <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags></div>
</div>
<div style="theme-designer-com_clear"></div>
</BlogPostTagsBlock>
</div></div></div>
</div>
<div class="theme-designer-com_post-back3" align="right">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="56">
<tr>
<td width="519" valign="top"><div class="theme-designer-com_post-d-t-a">
<-PostDate->
ساعت : <-PostTime->
|
نویسنده : <-PostAuthor->
</td></div>
<td width="131" valign="top">
<BlogExtendedPost>
<div id="theme-designer-com-post-more"><ul>
<li><a href="<-PostLink->" >ادامه مطلب</a></li>
</ul></div>
</BlogExtendedPost>
</td>
</tr>
</table>
</div>
<div class="theme-designer-com_post-space2"></div>
</BLOGFA>
<BlogNextAndPreviousBlock>
<div class="post-link">
<div style="width:100%">
<BlogPreviousPageBlock>
<div style="width:49%;float:right;text-align:center"><a href="<-BlogPreviousPageLink->">
<b> « مطالب جدیدتر </b></a></div>
</BlogPreviousPageBlock>
<BlogNextPageBlock>
<div style="width:49%;float:left;text-align:center"><a href="<-BlogNextPageLink->">
<b>مطالب قدیمیتر » </b></a></div>
</BlogNextPageBlock>
</div>
<br><br><br>
</div>
</BlogNextAndPreviousBlock>
</div>
</td>
<td width="312" valign="top">
<div class="theme-designer-com_menuleft-space1"></div>
<!-- social -->
<div class="theme-designer-com_menuleft-block-icon-share">
<ul id="alibehnamfar-ir" align="right">
<li><a target="_blank" href="<-BlogXmlLink->" class="rss-icon" title="لينك rss"><div class="hidden">لينك rss</div></a></li>
<li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
<li><a target="_blank" href="http://plus.google.com" class="google-icon" title="google+" rel="nofollow" ><div class="hidden">google+</div></a></li>
<li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
<li><a target="_blank" href="http://twitter.com" class="twitter-icon" title="twitter" rel="nofollow" ><div class="hidden">twitter</div></a></li>
<li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
<li><a target="_blank" href="http://facebook.com" class="facebook-icon" title="facebook" rel="nofollow" ><div class="hidden">facebook</div></a></li>
</ul>
</div>
<!-- / social -->
<BlogPreviousItemsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">آخرین مطالب</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu-l" align="right">
<ul>
<BlogPreviousItems items="15" ><li><a href="<-PostLink->" title="<-PostDate->" ><-PostTitle-></a></li></BlogPreviousItems>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogPreviousItemsBlock>
<BlogProfile>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">درباره ما</div>
</div>
<div align="center"><div class="theme-designer-com_menuleft-block-other"><div align="center">
<BlogPhoto><div align="center" style="padding:5px 0px 5px 0px;"><img src="<-BlogPhotoLink->"></div></BlogPhoto>
<-BlogAbout->
</div></div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogProfile>
<BlogCategoriesBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">موضوعات</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogCategories><li><a href="<-CategoryLink->" ><-CategoryName-></a></li></BlogCategories>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogCategoriesBlock>
<BlogLinksBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">لینک دوستان</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogLinks><li><a target="_blank" href="<-LinkUrl->"><-LinkTitle-></a></li></BlogLinks>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogLinksBlock>
<!-- Archive -->
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">آرشیو مطالب</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogArchive><li><a href="<-ArchiveLink->"><-ArchiveTitle-></a></li></BlogArchive>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
<!-- /Archive -->
<BlogAuthorsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">نویسندگان</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogAuthors><li><a href="<-AuthorLink->"><-AuthorName-></a></li></BlogAuthors>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogAuthorsBlock>
<BlogTagsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">برچسب ها</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogTags><li><a href="<-TagLink->" title="<-TagCount->"><-TagName-> (<-TagCount->)</a></li></BlogTags>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogTagsBlock>
<BlogLinkDumpBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">پیوندهای روزانه</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
<ul>
<BlogLinkDump><li><a target="_blank" title="<-LinkDescription->" href="<-LinkUrl->" ><-LinkTitle-></a></li></BlogLinkDump>
<li><a target="_blank" href="http://chatyha.ir/" rel="nofollow" >چت</a></li>
<li><a href="javascript:void(0)" onclick ="OpenLD();">لیست تمام پیوند ها</a></li>
</ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogLinkDumpBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">دیگر موارد</div>
</div>
<div align="center"><div class="theme-designer-com_menuleft-block-other2"><div align="center">
<-BlogCustomHtml->
</div></div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
<div class="theme-designer-com_menuleft-back-saye"></div>
</td>
<td width="12" valign="top"> </td>
</tr>
</table>
</div></div>
<div class="theme-designer-com-footer-back">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="126">
<tr>
<td width="91" valign="top"><div class="theme-designer-logo"><a target="_blank" title="تم دیزاینر" href="http://www.theme-designer.com" rel="nofollow" ><img border="0" src="http://themeupload.theme-designer.com/64/image/22.png" width="70" height="70"></a></div></td>
<td width="" valign="top">
<div class="theme-designer-com-copyright" align="right">
تمام حقوق اين وب سايت و مطالب آن متعلق به <a href="<-BlogUrl->"> <-BlogTitle-> </a>مي باشد
.<br>
كد نويسي و گرافيك قالب توسط : <a target="_blank" title="قالب وبلاگ" href="http://www.theme-designer.com" rel="nofollow" >تم ديزاينر</a>
</div>
</td>
</tr>
</table>
</div>
<div class="theme-designer-com-footer-space1"></div>
</div></div></div>
</div>
</body>
</html>
حتی اگر هدف شما تبدیل شدن به طراح صفحات وب نیست، یادگیری HTML و CSS میتواند ابزاری شگفتانگیز برای داشتن آن در مجموعه مهارتهایتان هم در محل کار و هم در خانه باشد. اگر این امر برای مدتی در لیست کارهایی که باید انجام دهید بوده است، چرا سی روز را اتخاذ نکرده، به من (Jeffrey Way) محلق نمیشوید؟ روزی 10 دقیقه را به من بدهید، و من مفاهیم اساسی HTML و CSS را خواهم گفت.
و نگران نباشید… ما از آغاز شروع خواهیم کرد!
زبان نشانهگذاری ابرمتنی یا اچتیامال، در کنار سیاساس هستهٔ فناوری ساخت صفحههای وب هستند. اچتیامال زبان توصیف ساختار صفحههای وب است. زبانیاست برای نشانهگذاری ابرمتن که برای تدوین قالب و طراحی صفحههای وب به کار میبرند. سیاساس روشی ساده برای نمایش چیدمان و جلوههای تصویری (مانند نوع قلم، رنگ و اندازهها) بر صفحههای وب است. سیاساس از جنس زبانهای نشانهگذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پیدرپی، برای چگونگی نمایش هر صفحه وب افزوده میشود.
سطح مهارت: مبتدی
زمان آموزش: 5 ساعت
زبان: انگلیسی
مشخصات فایل: MOV | 1280×720
فهرست مطالب:
مقدمه
معرفی دوره
هفته اول
اولین صفحه وب شما
یافتن ویرایشگر کد مناسب
لیستها
روابط والد-فرزندی
تگهای Heading
Blockqoute ها
Anchor ها
هفته دوم
اولین Stylesheet شما
ساختار پروژههای بی عیب و نقص
عکسها
ضرورت Div ها
ID ها و کلاسها
یک تخصیص
راههای تخصیص
Float ها و یک چیدمان ساده
هفته سوم
لیستهای ناوبری
مقدمهای بر فرمها
تعویض عکس
مبانی تیپوگرافی
تفاوت بین موقعیتدهی نسبی و مطلق
بازتولید یک تکه وبسایت
اهمیت اعتبارسنجی
هفته چهارم
کدنویسی Zen
نرمالسازی و ریست
چارچوب CSS
پروژهی نهایی
ایجاد نشانهگزاری
نحوهی برش زدن یک فایل PSD
نحوهی ایجاد Snippet
CSS برای وبسایت ما
تکمیل وبسایت
مطالب پایانی
پایان دوره
همانطور که می دانید از CSS برای فرمت دهی و طرح بندی، تعریف سبک متن (مانند نوع قلم، رنگ و اندازهها)، اندازه جدول و جنبه های دیگری از صفحات وب که قبلا فقط در فایل HTML یک صفحه قابل تعریف بوده است استفاده می شود. CSS دارای خاصیت ها و افکت های مختلفی است که تنها با نوشتن قطعه کدهای ساده می توانند به ظاهر وب سایت شما دید ویژه ای اضافه کنند.
به وسیله خاصیت Transition در CSS، می توانید تغییر اندازه، شکل، رنگ، موقعیت و ... یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری، انیمیشن سازی کنید. به عنوان مثال فرض کنید، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید و هنگامی که کاربر موس خود را از روی آن می برد، به انداز قبلی و کوچک خود بر گردد.
خاصیت Transform در سی اس اس، این امکان را به ما می دهد که یک متن یا یک بخش را به شکل مورد علاقه ی خود بچرخوانیم، به عنوان مثال می توانید یک متن را در سایت خود با چرخش نشان دهید.
این افکت ها از قابلیت های منحصر به فرد در CSS می باشند که تنها با نوشتن یک قطعه کد ساده امکانپذیر خواهند بود.
در دوره آموزشی CSS: Transitions and Transforms شما با قابلیت های اساسی و کلیدی در انتقال و جابه جایی آبجکت ها در صفحات وب و با استفاده از سی اس اس آشنا می شوید.
عناوین آموزشی:
- درک اصول انتقال
- کار با انتقال های دو بعدی و سه بعدی
- متحرک سازی تغییرات رنگ
- محو کردن اشیاء
- تغییر اندازه عناصر صفحه و فونت
- استفاده از چند خاصیت انتقال به صورت همان زمان
- درک مفهوم keyframe ها و انیمیشن ها
- کار کردن در z-index
- اضافه کردن تعاملی جاوا اسکریپت
- ساختن انتقال در Dreamweaver
- و ...
باتشکر از ادمین گرامی وب سایت راسخون