mobile-call
منـو

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم:

خاصیت transform

شما میتوانید با استفاده از خاصیت transform بر روی عناصر جلوه ھای ویژه ای را اعمال کنید ( در آخر خواھیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدھیم.) این خاصیت سه مقدار دارد، و ھر مقدار برای یکی از جلوه ھا به کار می رود.
قاعده کلی :

 Transform: rotate(numberdeg)
 Transform: skew(numberdeg)
 Transform: scale(number)

مقدار پیشفرض : none
Rotate : برای چرخش اجزا به کار می رود.
Skew : برای کجی و انحراف عناصر به کار می رود
Scale : برای بزرگنمایی عناصر به کار می رود
در ادامه برای آشنایی با ھر یک از مقادیر یک مثال میزنیم :

مقدار rotate

مثال :

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

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار scale

مثال :

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

عدد ۵٫۱ به این معناس که عنصر عرض و ارتفاع عنصر ۵٫۱ برابر افزایش یابد. (بزرگنمایی) این مقدار از اعداد منفی نیز پشتیبانی می کند. با این تفاوت که عنصر ما ۳۶۰ درجه نیز تغییر زاویه خواھد داد.
بسیار خب،در جلسه دوم این فصل با خاصیت ھای transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواھیم شد

  آموزش CSS (جلسه نهم) - فضاهای اطراف عنصر

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

دیدگاه بگذارید

Be the First to Comment!

avatar
  Subscribe  
Notify of