آموزش css

با سلام به همه دوستان قصد دارم در این جلسه آموزش بیشترین المان های  css  را آموزش بدم

 

 

 برای گرد کردن گوشه ها در Css--

border-radius: x px;

-webkit-border-radius: x px;

 برای سایه دادن--

-webkit-box-shadow: x px y px color ;

box-shadow: x px y px color ;

-webkit-box-shadow:  inset  x px y px color ;

وجود inset باعث میشه که سایه داخل انداخته شود

۳ _ وجود بک گراند

background-color: #FF6600;  

  background:linear-gradient‪(Positions ,color,color,color)‬;‎

در مقدار Positions هم میتوان مقدار top , left,right,bottom   و یا مفدار درجه قرار دادx deg 

 

۴ _ یک خط بیرون یک خط دیگر

اگر یک خط دور یک باکس داشته باشیم و بخواهیم یک خط دیگر دور خط بندازیم از این پارامتر استفاده میکنیم

outline: 3px solid red ;‎

۵ – چرخاندن یک باکس و یا تگ

transform: Positions ‪(xdeg)‬;‎

در مفدار positions  مقادیر translate و rotate و  scale و skew و matrix جای میگرد .

حالت اول که rotate نام دارد عنصر مورد نظر را با توجه به مقداری که به آن داده ایم در جهت عقربه های ساعت میچرخواند. برای مثال ما میخواهیم عنصری در صفحه به مقدار ۵۰ درجه چرخش داشته باشد:

.class {

-webkit-transform: rotate‪(50deg)‬;‎

-moz-transform: rotate‪(50deg)‬;‎

-o-transform: rotate‪(50deg)‬;‎

transform: rotate‪(50deg)‬;‎

}

حالت دوم که skew نام دارد برای کجی و انحراف عناصر به کار می رود. برای مثال:

.class {

-webkit-transform: skew‪(50deg)‬;‎

-moz-transform: skew‪(50deg)‬;‎

-o-transform: skew‪(50deg)‬;‎

 transform: skew‪(50deg)‬;‎

}

 

در حالت سوم که با نام scale شناخته میشود شما میتوانید عنصر خود را بزرگنمایی کنید. برای مثال ما تصویری داریم که میخواهیم طول و عرض آن با ضریب ۱٫۵ برابر نمایش داده شود:

.class {

-webkit-transform: scale(1.‎5)‎;‎

-moz-transform: scale(1.‎5)‎;‎

-o-transform: scale(1.‎5)‎;‎

transform: scale(1.‎5)‎;‎

}

مقدار آخر که نام آن translate است شی مورد نظر را در دو جهت افقی و عمودی جابجا میکند. مقدار دهی به این ویژگی بسیار آسان است. داخب پرانتز دو مقدار میتوانید بدهید، مقدار اول در جهت افقی (محور x) و مقدار دوم در جهت عمودی (محور y) اعمال میشود. بهتر است مقادیر را بر حسب پیکسل (px) بنویسید. برای مثال شی ما ۲۰px در جهت افقی و ۱۰px در جهت عمودی جابجا میشود:

.class {

-webkit-transform: translate‪(20px,10px)‬;‎

-moz-transform: translate‪(20px,10px)‬;‎

-o-transform: translate‪(20px,10px)‬;‎

transform: translate‪(20px,10px)‬;‎

}

 

برای درک بهتر این خاصیت بهتر است مثال ها را انجام دهید. و برای زیبا شدن کار میتوانید این خاصیت را در قسمت hover عنصر خودتون اعمال کنید تا تفاوت را بهتر احساس کنید.

 

سه‌شنبه, ۲۷ اکتبر, ۲۰۱۵ - ۱۲:۵۳
برای ارسال دیدگاه وارد شوید.

باور ها

ما نسبت به خلق هر محصولی مسئولیم و باید در تمام زمانها فارغ از مشکلات و مسائلی که ما را در شرایط سخت و دشوار قرارمی دهد کیفیت بالای کارهایمان را حفظ کنیم.

 

تماس با ما

 

وبلاگ

خبرنامه