تمرین

با استفاده ای HTML وCSS برنامه مانند تصایر زیر طراحی کنید.

عکسی مانند زیر را در اختیار داریم

در ابتدا قسمتی از عکس مانند تصویر نمایش داده می­شود و هنگامی که ماوس بر روی آن می­رود تصویر کناری نمایش داده می­شود.

حل تمرین:

با استفاده از تکنیک sprite :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

بازنویسی مثال قبل به شیوه ای ساده تر با استفاده از compass :

 

 

 

 

 

 

 

 

 

فایل screen.sass :

 

 

 

 

 

 

تبدیل شده­ی کد بالا به صورت زیر به فایل css :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

کدهای پروژه :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

اسکرول به بالا