در این جلسه  طراحی سایت شما را با جلوه های ویژه ی 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 و طریقه ساخت یک انیمیشن آشنا خواھیم شد

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

  • بهینه سازی موتور جستجو(SEO)

    بهینه سازی موتور جستجو(SEO) چیست؟ سئو یک رشته بازاریابی است که در آن تمرکز بر روی قابلیت د…
  • تاثیر سئو وبلاگ در طراحی سایت

    امروز می خواهیم در مورد موضوع تاثیر وبلاگ در طراحی سایت باهم صحبت کنیم. در طراحی سایت که ا…
  • الگوریتم Rank Brain گوگل

      مقاله ای که در طراحی سایت اسپیناس می خواهیم در مورد آن صحبت کنیم در مورد الگوریتم R…
  • CRM چیست ؟

    Crm چیست ؟ امروز در طراحی وب سایت اسپیناس به این موضوع میپردازیم یک شرکت برای بیزنس خود عل…
  • کمپین تبلیغاتی Advertising Campaign در طراحی وب سایت

      امروز در طراحی سایت اسپیناس می خواهیم در مورد یک موضوع داغ امروز صحبت کنیم. بیشتر م…
  • شبکه تحویل محتوا یا CDN در طراحی سایت

    امروز می خواهیم در طراحی سایت اسپیناس درباره شبکه تحویل محتوا یا CDN در طراحی سایت را با ه…
بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بررسی کنید

آموزش CSS (فصل نوزدهم) – خاصیت visibility ، opacity و curso

  در این جلسه  طراحی سایت شما را  با خاصیت های visibility ، opacity و curso آشنا می ک…