0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش 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) ;
}

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

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

درگ کنید مشاهده بستن پخش
0%