campaign-edianeh-98

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



visibility  
mode_comment   ۳۱

خاصیت transform  

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

قاعده کلی :

مقدار پیشفرض : none

Rotate  : برای چرخش اجزا به کار می رود.

Skew : برای کجی و انحراف عناصر به کار می رود

Scale : برای بزرگنمایی عناصر به کار می رود

در ادامه برای آشنایی با هر یک از مقادیر یک مثال میزنیم :

مقدار rotate

مثال :

کد css  :

نتیجه در مرورگر :

دقت کنید که حتما از پیشوندهای مرورگرها استفاده کنید تا در اجرای کد مشکلی پیش نیاید.

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

مقدار skew  

مثال :

کد css  :

نتیجه در مرورگر :

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

مقدار  scale

مثال :

کد css  :

عدد 1.5  به این معناس که عنصر عرض و ارتفاع عنصر 1.5   برابر افزایش یابد. (بزرگنمایی)

این مقدار از اعداد منفی نیز پشتیبانی می کند.  با این تفاوت که عنصر ما 360 درجه نیز تغییر زاویه خواهد داد.

بسیار خب،در جلسه دوم این فصل با خاصیت های transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواهیم شد.

comment دیدگاه کاربران
javad75

دمت گرم خیلی عالی بود 😳

فقط سعی کن از این به بعد آموزش ها را زود تر بزاری چون خیلی وقت بود آپدیت نکرده بودی باید جبران کنی 🙂 منتظر بعدیش هستم

سجاد دریس

سلام جواد جان.
ممنون لطف داری
چشم سعی میکنم تاخیری بوجود نیاد

امیر

سلام سجاد جان آیا در css3 میشه این اعمال رو با کمی delay انجام داد یا نه ؟!
از آموزش خوبت هم ممنون .

لقمان آوند

این ویژگی رو ببینید …
احتمالا در جلسه آینده سجاد توضیح میده .

هادی

سلام
من میخوام از این قالب استفاده کنم:
http://m-qaleb.com/Templates/free/M-QaLeB/blogfa/simple/religion/008162740/008162740.html

ولی از اینکه عکسای مطالبش وقتی ماوس میره روش زوم میشه و همینطور کج خوشم نمیاد چکار کنم این خاصیت رو حذف کنم و از این قالب استفاده کنم

لقمان آوند

توی فایل css و یا استایل های css اون خصوصیات transition-scale و transition-rotate اگه دیدی حذف کن .

reza

اگه امکانش باشه pdf همه ی فصل ها رو یکجا واسه دانلود بذارین
ممنون

سجاد دریس

سلام.
پس از پایان کامل سری این کار انجام میشه،
فعلا میتونید از امکان پرینت pdf مقاله که در انتهای هر پست وجود داره استفاده کنید.

javad75

پس ادامه آموزش چی شد؟! 😥

سجاد دریس

لطفا کمی صبر.، باور کنید خیلی سرم شلوغه

mohammadali

با سلام و عرض خسته نباشید
دست شما درد نکنه
امیدوارم موفق باشید

mohammadali

با سلام ممکنه بفرمایید مطالبی را میفرمایید از کدوم سایته آیا؟ 🙂
http://www.w3schools.com/html/default.asp آیا؟
با تشکر

سجاد دریس

سلام.
من مطالبی که منتشر میکنم بیشتر از دانش خودم و کتاب CSS3 Cheat Sheet هست. و کمتر سراغ مرجع ها میرم.، اما موضوع و ترتیب مطالب بر اساس وبسایت w3schools هست.

khazra

سپاس ، خیلی خوب بود

ariaieboy

پس چی شد اموزش دوست عزیز اگر نمی تونید اماده کنید در عرض یک هفته نگید در عرض یک هفته اماده می شه 😆

سجاد دریس

سلام.
شرمنده، یه چندتا مشکل واسم پیش اومده که باعث این بدقولیا شده، سعی میکنم در اولین فرصت مطالب بعدی رو بذارم.

یاس

سجاد جان
سایتت خیلی عالی بود خیلی کمکم کرد
اگه سوالی داشتم میتونم تواین سایت از شما بپرسم ؟ 😛 🙂 😀

ariaieboy

خیلی ممنون از اقا سجاد گل همچنان منتظر هستیم که کار این سی اس اس رو به پایان برسونی راستی یک قابلیتی هست تو سی اس اس که به جای 10 تا عکس یا هر چند تا عکس یک عکس ایجاد می کنی بعد از طریق کد سی اس اس به صورت جدا نشون می دی اون اسمش چی هست و ایا در این اموزش ها اومده اسمش رو یادم رفته

سجاد دریس

سلام.
ممنون و عذرخواهی مجدد از شما که منو شرمنده می کنید.،.
این قابلیت اسمش css sprint هست که کل تصاویری که در قالبمون استفاده میکنیم رو با هم در یک فایل ادغام میکنیم، سپس با استفاده از خاصیت background-position از تصاویر استفاده میکنیم..
اموزش این قابلیت در سری نیست، اما حتما آمورششو رو براتون میزارم.

Sahar66

سلام وقتتون بخیر..
وقتیکه از مقدار های rotate and scale استفاده میکنم و توی مرورگر اجراشون میکنم، تصویری که برام میاد دقیقا برعکس تصویری هست که شما اجراشون کردین..
مشکل چیه؟

کیوان علی محمدی

شما درجه ها رو دقیقا مثل همین وارد کردین؟ اگه مکان داره کدی رو که نوشتین و هم چنین یه تصویر از نتیجه کار قرار بدید تا بررسی بشه.

Sahar66

Sorry 😳
توی کد نویسیش اشتباه کردم..

programer2020

با سلام
این کد هایی که اول با – شروع میشه چیه؟
من حذفشون می کنم بازم کار می کنه پس چه کاربردی داره؟

کیوان علی محمدی

بله اکثرا توی نسخه های جدید مرورگر ها کار میکنن،اما بعضی از این ها لازمه حتما این پیشوند ها رو براش استفاده کنید تا توی اون مرورگر کار کنه.

Abbas412

سجاد جان ممنون از آموزش های خوبت
آقا من امتحان کردم، خاصیت scale مقادیر کمتر از 1، مثلا 0.5 هم میگیره و تصاویر رو کوچیک میکنه!

hamed_z2001

-webkit-transform: scale(1.5);
3
-moz-transform: scale(1.5);
4
-o-transform: scale(1.5);
الان این webkit و moz و o قبل از transform چی چیه؟؟ یکم گنگ بود.اگه میشه یکم توضیح بده دوست من … با تشکر

hamed_z2001

moz , o که فهمیدم پیشوند موزیلا و اپراست و اونیم که عادی نوشته شده حتما مال ie . وب کیت
مال چیه؟؟؟

لقمان آوند

وب کیت انجین پردازشی مرورگرهایی مثل کروم و سافاری هست .

سجاد دریس

چونکه هنوز مرورگرها از css3 به طور کامل پشتیبانی نمی کنند، برای کار کردن هر کدوم از خصوصیت های css3 در هر مرورگر ابتدا باید پیشوند هر مرورگر رو قبل از خصوصیت قرار بدین.
-webkit- برای مرورگر کروم و سافاری
-moz- برای مرورگر موزیلا فایرفاکس
-o- برای مرورگر اوپرا
-ie- برای مرورگر اینترنت اکسپلورر

hamed_z2001

ممنون از دوستان بابت جوابشون

artaj

سلام سجاد جان واقعا بهتون تبریک میگم با این سن کمتون شروع به یادگیری کد ویسی کردین و بقول معروف حرفه ای هستید بهتون تبریک میگم

سجاد جان من آیدی یاهوی شمارو اد کردم خوشحال میشم قبول کن
اینم اید من alonetaha69@yahoo.com
یک سوالی داشتم اینجا نمیشه پرسید
اگه میشه یا شمارتونو بدین یا تو یاهو باهم صحبت کنیم
منتظرم ➡

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.