دوره آموزش Css3
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در دروه ی آموزشی قبلی ما به آموزش زبان css که مکملی برای html و از زبان های پایه ی طراحی وب بود ؛ پرداختیم.
ما آموزش css را در دو بخش جامع و کامل شرح دادیم که شامل مباحثی ائم از :
فونت ها ، تصاویر ، border ها ، استایل متون ، استایل جداول ، بک گراند ها ، position و … بود.
در این بخش ما قصد شروع آموزش Css3 را داریم که نسخه ی جدیدتر css می باشد و امکانات خیلی پیشرفته تر و جامع تری
را برای استایل دهی نسبت به css در اختیار ما می گذارد.
پیش نیاز این مقاله ی آموزشی ، مطالعه و تسلط بر مقاله ی زبان html می باشد.
آشنایی با Css3
CSS3 آخرین استاندارد از نسخه های قبلی css (CSS2) است.
به طور کلی تفاوت اصلی بین css2 و css3 را می توان در موارد زیر دانست :
- Media Queries
- Namespaces
- Selectors Level 3
- Color
CSS3 ترکیبی از قابلیت ها و ویژگی های CSS2 و با ویژگی های جدید خود می باشد.
به عبارتی می توان این ادغام و توسعه را ماژول نامید.
برخی از ماژول ها در زیر نشان داده شده اند :
- Selectors
- Box Model
- Backgrounds
- Image Values and Replaced Content
- Text Effects
- 2D Transformations
- 3D Transformations
- Animations
- Multiple Column Layout
- User Interface
( در ادامه به معرفی و آموزش تمامی بخش هایی که در css نبوده است خواهیم پرداخت.)
Rounded Corners
CSS3 قابلیت اضافه کردن گوشه های گرد مانند را به شما می دهد.
شما با استفاده از پراپرتی border-radius می توانید این ویژگی را در css3 مشخص کنید که مثال آن به شرح زیر می باشد :
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
در جدول زیر مقادیر ممکن برای گوشه های گرد نشان داده شده است.
شماره | مقدار و توضیحات |
1 | border-radius از این المان برای تنظیم ویژگی شعاع چهار گوشه استفاده کنید |
2 | border-top-left-radius از این المان برای تنظیم مرز گوشه بالا سمت چپ استفاده کنید |
3 | border-top-right-radius ” ” ” بالا سمت راست ” “ |
4 | border-bottom-right-radius ” ” ” پایین سمت راست ” “ |
5 | border-bottom-left-radius ” ” ” بالا سمت چپ ” “ |
مثال برای تعیین یکسان مقادیر چهار گوشه :
Rounded corners!
Rounded corners!
Rounded corners!
خروجی :
Rounded corners!
Rounded corners!
Rounded corners!
مثال برای تعیین مقدار هر گوشه به صورت اختصاصی :
خروجی :
Border Image
ویژگی Border image برای افزودن boarder تصویر به برخی از عناصر استفاده میشود.
برای فراخوانی boarder image نیازی به استفاده از کد HTML نیست.
یک نمونه از boarder image به شرح زیر است :
#borderimg {
border: 10px solid transparent;
padding: 15px;
}
مقادیر رایج مورد استفاده برای این المان به شرح زیر می باشد :
شماره | مقادیر و توضیحات |
1 | border-image-source برای تنظیم مسیر تصویر استفاده می شود |
2 | border-image-slice برای برش boarder image استفاده می شود |
3 | border-image-width برای تنظیم عرض boarder image استفاده می شود |
4 | border-image-repeat برای تنظیم میزان تکرار شدن تصویر boarder image در بخش مربوطه استفاده می شود. |
مثال :
This is image boarder example.
This is image boarder example.
This is image boarder example.
خروجی :
This is image boarder example.
This is image boarder example.
This is image boarder example.
Multi Background
ویژگی Multi background (چند بک گراندی) CSS برای افزودن یک یا چند تصویر در یک زمان بدون کد HTML استفاده میشود، میتوانیم براساس نیاز خود تصاویر را اضافه کنیم.
یک نمونه از Multi background به شرح زیر می باشد :
#multibackground {
background-image: url(https://iranianmanataz.com/wp-content/uploads/2022/01/DreamScape-for-3ds-max.jpg), url(https://iranianmanataz.com/wp-content/uploads/2022/01/SnowFlow-Pro-for-3ds-max.jpg);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
مقادیر رایج مورد استفاده برای این المان به شرح زیر می باشد :
شماره | مقادیر و توضیحات |
1 | background برای تنظیم تصویر پس زمینه |
2 | background-clip میتوان مشخص کرد که رنگ زمینه یا تصویر زمینه یک عنصر تا چه حد گسترش یابد، آیا مثلا تمام عنصر را پُر کند یا مثلا فقط به اندازه متن موجود در اون عنصر باشد. |
3 | background-image استفاده از تصویر برای پس زمینه |
4 | background-origin برای تعیین موقعیت تصاویر پس زمینه استفاده می شود |
5 | background-size برای تعیین اندازه تصاویر پس زمینه استفاده می شود |
مثال :
www.iranianmanataz.com
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
خروجی :
www.iranianmanataz.com
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
رنگ ها
CSS3 از ویژگی های اضافه تری برای رنگ ها استفاده می کند که این ویژگی ها عبارتند از:
- رنگ های RGBA
- رنگ های HSL
- رنگ های HSLA
- Opacity
RGBA مخفف Red Green Blue Alpha است.
آلفا Opacity یک رنگ را مشخص می کند و عدد پارامتر عددی بین 0.0 تا 1.0 است.
یک نمونه از RGBA همانطور که در زیر نشان داده شده است ، می باشد :
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL مخفف hue, saturation, lightness است.
در اینجا Huge یک درجه در چرخه رنگ است، saturation (اشباع رنگ) و lightness (روشنایی) مقادیر درصدی بین 0 تا 100٪ هستند.
یک دستور نمونه از HSL همانطور که در زیر نشان داده شده است ، می باشد :
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA مانند HSL با یک مقدار اضافی است که این مقدار Alpha می باشد و همانگونه که RGBA نشان داده شده است Opacity را مشخص می کند.
نمونه ی آن به شرح زیر می باشد :
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
Opacity پارامتری است که میزان شفافیت یک رنگ را مشخص می کند و زمانی که روی مقدار 1 باشد یعنی شفافیت رنگ کامل است و هر چه از این مقدار کمتر باشد شفافیت رنگ کمتر و دچار محو شدگی می شود.
یک نمونه از آن به شرح زیر می باشد :
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
مثال RGB :
RGBA colors:
Red
Green
Blue
خروجی :
RGBA colors:
Red
Green
Blue
مثال HSL :
HSL colors:
Green
Normal Green
Dark Green
خروجی :
HSL colors:
Green
Normal Green
Dark Green
مثال HSLA :
HSLA colors:
Less opacity green
Green
Green
خروجی :
HSLA colors:
Less opacity green
Green
Green
مثال Opacity :
HSLA colors:
Red
Green
Blue
خروجی :
HSLA colors:
Red
Green
Blue
Gradients (گرادیانت ها)
Gradients ترکیب دو یا چند رنگ به شکل های مختلف می باشد که در ادامه بیشتر با آنها آشنا خواهیم شد.
انواع حالت های گرادینت :
- (Linear Gradients (down/up/left/right/diagonally (گرادیان های خطی (پایین/بالا/چپ/راست/مورب)
- Radial Gradients (گرادیان های شعاعی)
Linear gradients :
گرادیان های خطی برای چیدمان دو یا چند رنگ در قالب های خطی مانند بالا به پایین استفاده می شود.
مثال بالا به پایین :
خروجی :
مثال چپ به راست :
خروجی :
مثال مورب (Diagonal) :
خروجی :
مثال چند رنگی (Multi color) :
خروجی :
مثال گرادیان های شعاعی (Radial Gradients) :
خروجی :
سایه ها (Shadows)
CSS3 از افزودن سایه (Shadow) به متن یا المان ها پشتیبانی می کند.
ویژگی Shadow به صورت زیر دسته بندی می شود :
- سایه متن (Text shadow)
- سایه Box (Box Shadow)
مثالی برای افزودن سایه به متن :
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
خروجی :
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
iranianmanataz.com
مثالی برای box shadow :
This is a div element with a box-shadow
خروجی :
Text
CSS3 شامل ویژگی های اضافی زیر برای متون می باشد :
- text-overflow
- word-wrap
- word-break
مقادیر رایج مورد استفاده برای این المان به شرح زیر می باشد :
شماره | مقادیر و توضیحات |
1 | text-align-last برای تراز خط آخر متن استفاده می شود |
2 | text-emphasis برای تاکید و متمایز کردن بخشی از متن نسبت به سایر قسمت های متن |
3 | text-overflow با استفاده از ویژگی text-overflow در CSS میتوان نحوه سَرریز (Overflow) شدن متن را کنترل کرد، مثلا میتونیم مشخص کنیم وقتی متن سرریز شد مثلا یه سه نقطه ( … ) بگذارد یا متن دلخواه دیگری قرار بدهد. |
4 | word-break با استفاده از ویژگی word-break در CSS میتوان نحوه شکسته شدن کلمات ( کلماتی که طولانی و بهم چسبیده هستن ) رو کنترل کرد. |
مثال برای Text-overflow :
Original Text:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Text overflow:clip:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Text overflow:ellipsis
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
خروجی :
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Text overflow:clip:لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Text overflow:ellipsisلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
مثال برای Word Breaking :
line break at hyphens:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
line break at any character
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
خروجی :
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
line break at any characterلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
2d Transforms
2d Transforms برای تغییر ساختار و حالت المان ها به صورت دو بعدی از حالتی به حالت دیگر مورد استفاده قرار می گیرد.
این تغییر حالت ها می تواند در قالب : translate ، rotate ، scale و skew استفاده شوند.
در ادامه با ارائه ی مثال هایی شکل تغییر حالت برای هر کدام از موارد بالا را متوجه خواهید شد.
جدول زیر دارای مقادیری است که در تمامی قالب های گفته شده مورد استفاده قرار می گیرد :
شماره | مقادیر و توضیحات |
1 | matrix(n,n,n,n,n,n) تعریف مقدار با استفاده از ماتریس ها از طریق تعریف 6 مقدار |
2 | translate(x,y) تبدیل حرکتی المان در محور x و y |
3 | translateX(n) تبدیل حرکتی فقط با محور x |
4 | translateY(n) تبدیل حرکتی فقط با محور y |
5 | scale(x,y) مقایس دهی برای بزرگ نمایی یا کوچک نمایی در محور x و y |
6 | scaleX(n) ” ” فقط در محور x |
7 | scaleY(n) ” ” فقط در محور y |
8 | rotate(angle) چرخاندن المان با توجه به زاویه ی تعریف شده. |
9 | skewX(angle) برای ایجاد حالت کشیدگی مورب در راستای محور x |
10 | skewY(angle) برای ایجاد حالت کشیدگی مورب در راستای محور y |
مثال برای المان Rotate در زاویه ی 20 درجه :
iranianmanataz.com
iranianmanataz.com
خروجی :
مثال برای Skew X axis :
iranianmanataz.com
iranianmanataz.com
خروجی :
3D Transforms
با استفاده از transform های سه بعدی، می توانیم المان را در سه محور x، محور y و محور z منتقل کنیم،
مثال زیر به وضوح نحوه چرخش عنصر را مشخص می کند.
متدهای فراخوانی 3D transforms :
شماره | مقادیر و توضیحات |
1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) برای transform عنصر با استفاده از 16 مقدار ماتریس استفاده می شود |
2 | translate3d(x,y,z) تبدیل حرکتی المان در محورهای x و y و z |
3 | translateX(x) تبدیل حرکتی فقط با محور x |
4 | translateY(y) تبدیل حرکتی فقط با محور y |
5 | translateZ(z) تبدیل حرکتی فقط با محور z |
6 | scaleX(x) مقایس دهی برای بزرگ نمایی یا کوچک نمایی در محور x |
7 | scaleY(y) مقایس دهی برای بزرگ نمایی یا کوچک نمایی در محور y |
9 | rotateX(angle) چرخاندن المان با توجه به زاویه ی تعریف شده در محور x. |
10 | rotateY(angle) چرخاندن المان با توجه به زاویه ی تعریف شده در محور y. |
11 | rotateZ(angle) چرخاندن المان با توجه به زاویه ی تعریف شده در محور z. |
مثال برای X-axis 3D transforms :
iranianmanataz.com
Rotate X-axis
iranianmanataz.com
خروجی :
Rotate X-axis
مثال برای Y-axis 3D transforms :
iranianmanataz.com
Rotate Y axis
iranianmanataz.com
خروجی :
Rotate Y axis
مثال برای Z-axis 3D transforms :
iranianmanataz.com
rotate Z axis
iranianmanataz.com
خروجی :
rotate Z axis
انیمیشن ها
در css3 انیمیشن ها بسیار پویا تر و در ابعاد پیچده تری نسبت به css می باشند.
در واقع شما کنترلرهای بیشتری را برای ایجاد انیمیشن های مورد نظر در اختیار دارید.
keyframes@
شروع انیمیشن های مربوط به css3 با استفاده از keyframes@ می باشد.
مثال :
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}
مثال بالا ارتفاع، عرض، رنگ، نام و مدت انیمیشن را با سینتکس keyframes نشان می دهد.
مثالی برای حرکت انیمیشن به چپ :
Iranian manataz
This is an example of animation left with an extra keyframe
to make text changes.
خروجی :
Iranian manataz
This is an example of animation left with an extra keyframe to make text changes.
(لازم به ذکر است ، تعداد انیمیشن هایی که می توان با استفاده از css ایجاد کرد به قدری زیاد است که ما قادر
به نمایش و مثال زدن برای همه ی آنها نیستیم و تنها به اصول کلی نحوه ی ایجاد آنها اشاره خواهیم کرد.
شما با استفاده از همین اصول برای هر المان و تغییر استایلی در css از یک تغییر رنگ ساده تا المان های فیزیکی و حرکتی
می توانید انیمیشن ایجاد کنید.)
Multi Columns (ستون های چندگانه)
CSS3 قابلیت این را دارد که از چند ستون در یک ردیف و در کنار هم برای مرتب کردن استفاده کند.
از متداول ترین ویژگی های مرتب کردن چند ستونی به شرح زیر می باشد :
عدد | مقادیر و توضیحات |
1 | column-count برای شمارش تعداد ستون هایی که آن المان باید تقسیم شود استفاده می شود. |
2 | column-fill برای تعیین نحوه ی پر کردن ستون ها استفاده می شود |
3 | column-gap برای تعیین فاصله بین ستون ها استفاده می شود. |
4 | column-rule ویژگی column-rule در CSS بطور کلی ویژگی ایست که با استفاده از آن میتوان یک خط عمودی در بین ستون هایی از متن ایجاد کرد |
5 | rule-color رنگ خطی که در قسمت قبل توضیح داده شد را می توانید تعیین کنید |
6 | rule-style تعیین استایل و شکل و شمایل تعریف شده در قسمت های قبلی |
7 | rule-width تعیین عرض ” ” “ |
8 | column-span برای تعیین فاصله بین ستون ها استفاده می شود. |
مثال :
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
خروجی :
رابط کاربری
property رابط کاربری (user interface) به شما امکان می دهد هر المان را به یکی از چندین المان رابط کاربری استاندارد تغییر دهید.
از مهم ترین ویژگی های این المان می توان از موارد زیر نام برد :
شماره | مقادیر و توضیحات |
1 | appearance با استفاده از خصوصیت appearance، می توانید نحوه نمایش عنصر را شبیه دیگر عناصر قرار دهید. |
2 | box-sizing با استفاده از ویژگی box-sizing در CSS میتوان مشخص کرد که آیا اندازه ویژگی های Border و Padding بروی اندازه عرض و ارتفاع یک عنصر تاثیر بگذراند یا خیر. |
3 | icon ویژگی استفاده از آیکون |
4 | resize برای تغییر اندازه ی المان ها. |
5 | outline-offset با استفاده از ویژگی outline-offset در CSS میتوان یک فضای خالی را بین خط دور لبه داخلی و لبه بیرونی یک تگ مشخص و یا تعریف کرد. |
6 | nav-down هنگامی که دکمه فلش پایین را در صفحه کلید فشار داده اید برای حرکت به سمت پایین استفاده می شود. |
7 | nav-left هنگامی که دکمه فلش چپ را در صفحه کلید فشار داده اید برای حرکت به سمت چپ استفاده می شود. |
8 | nav-right هنگامی که دکمه فلش راست را در صفحه کلید فشار داده اید برای حرکت به سمت راست استفاده می شود. |
9 | nav-up هنگامی که دکمه فلش بالا را در صفحه کلید فشار داده اید برای حرکت به سمت بالا استفاده می شود. |
مثالی برای resize در سه جهت :
iranianmanataz.com
خروجی :
مثالی برای Outline offset :
Iranian manataz
خروجی :
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد