در این جلسه طراحی سایت شما را با جلوه هاي ویژه ي CSS3 آشنا می کنیم:
شما میتوانید با استفاده از خاصیت transform بر روی عناصر جلوه ھای ویژه ای را اعمال کنید ( در آخر خواھیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدھیم.) این خاصیت سه مقدار دارد، و ھر مقدار برای یکی از جلوه ھا به کار می رود.
قاعده کلی :
Transform: rotate(numberdeg) Transform: skew(numberdeg) Transform: scale(number)
مقدار پیشفرض : none
Rotate : برای چرخش اجزا به کار می رود.
Skew : برای کجی و انحراف عناصر به کار می رود
Scale : برای بزرگنمایی عناصر به کار می رود
در ادامه برای آشنایی با ھر یک از مقادیر یک مثال میزنیم :
مثال :
<img src="images/Espinas. png" width="400" height="153" />
کد css :
img { -webkit-transform: rotate(50deg) ; -moz-transform: rotate(50deg) ; -o-transform: rotate(50deg) ; transform: rotate(50deg) ; }
دقت کنید که حتما از پیشوندھای مرورگرھا استفاده کنید تا در اجرای کد مشکلی پیش نیاید.
این مقدار از اعداد منفی نیز پشتیبانی می کند.
مقدار skew
مثال :
<img src="images/7learn. png" width="400" height="153" />
کد css :
img { -webkit-transform: skew(50deg) ; -moz-transform: skew(50deg) ; -o-transform: skew(50deg) ; transform: skew(50deg) ; }
این مقدار از اعداد منفی نیز پشتیبانی می کند.
مثال :
<img src="images/7learn. png" width="400" height="153" /> کد css : img { -webkit-transform: scale(1. 5) ; -moz-transform: scale(1. 5) ; -o-transform: scale(1. 5) ; transform: scale(1. 5) ; }
عدد 5.1 به این معناس که عنصر عرض و ارتفاع عنصر 5.1 برابر افزایش یابد. (بزرگنمایی) این مقدار از اعداد منفی نیز پشتیبانی می کند. با این تفاوت که عنصر ما 360 درجه نیز تغییر زاویه خواھد داد.
بسیار خب،در جلسه دوم این فصل با خاصیت ھای transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواھیم شد
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند