بی شک امروزه دغدغه بسیاری از مدیران سایتها و وبلاگها ، داشتن یک سایت زیبا و مدرن می باشد . برای داشتن چنین سایت هایی نیز استفاده از علم روز برنامه نویسی و طراحی امری ضروری است . در این پست قصد داریم با معرفی دو خواص مفید CSS به شما این امکان را دهیم که به قسمت های مختلف سایت خود زیبایی و جذابیت ببخشید . در این مقاله آموزش چرخاندن اشیاء و میزان شفافیت (opacity) به وسیله CSS، مطابق با جدیدترین استانداردها و همخوان با همه مرورگرها را توضیح خواهیم داد. [...]
۱- یکی از خصوصیت های مهم و زیبا ، چرخاندن اشیاء یا متون است که می تواند نقش مهمی را در طرح وب سایت ایفا کند.برای این کار لازم است که در بخش Style سایت خود (CSS) از چند دستور استفاده کنیم .برای مرورگرهای Firefox و Webkit و Opera (از نسخه ۳٫۵ به بالا) فقط کافیست دستور زیر را در تگ مورد نظر درج کنید :
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(90deg);
در اینجا rotate دستور چرخاندن می باشد که می توانید از دستورهایی دیگری که در زیر به اختصار توضیح دادیم نیز استفاده کنید . deg به منظور میزان در جه ی چرخش آن می باشد که به صورت پیشفرض روی ۹۰ قرار دادیم و منفی بودن آن (-) به منظوز تعیین جهت و سوی چرخش می باشد که اگر بدون علامت – باشد چرخش در راستای ساعتگرد است و اگر منفی باشد مخالف با حرکت عقربه های ساعت می باشد . و برای مرورگر Internet Explorer (نسخه ۵٫۵ به بالاتر) کافیست از کد زیر استفاده کنید .
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
* دستورهای دیگری که می توانید استفاده کنید :
scale : بزرگ یا کوچک کردن تصویر
rotate : چرخاندن تصویر
translate: جابجا کردن تصویر
skew : کج و مورب کردن تصویر
برای اعمال این افکت ها بر روی عکس یا متون سایت خود می توانید کدها را مانند مثال زیر در بخش style قالب خود قرار دهید :
img {
-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg);
}
2- خاصیت مهم و کاربردی دیگری که به شما معرفی می کنیم و اکثر مرورگرها از آن پشتیبانی می کنند ، میزان شفافیت (opacity) می باشد .امروزه اکثر وب سایت ها و وبلاگ ها از این خاصیت بسیار کاربردی و زیبای CSS استفاده می کنند . opacity میزان شفافیت یک عکس ؛ نوشته و … را در سایت شما تعیین می کند . برای اجرای این دستور لازم است که در بخش style قالب خود و در قسمت مورد نظر دستور زیر را وارد کنید :
opacity: 0.8;
۰٫۸ میزان شفافیت اشیاء یا متون می باشد . برای درک بهتر این موضوع به بیان مثالی می پردازیم : فرض کنید می خواهیم تمامی عکس های درون وب سایتمان دارای افکتی باشد که وقتی موس روی آن می رود کمی به سمت راست بچرخد و از شفافیت آن کاسته شود . برای این کار تگ زیر را در style قالب خود قرار می دهیم :
img:hover { border: 1px solid #000000; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); opacity: 0.8; }
* در این کد از دستور border نیز برای زیبا تر شدن افکت استفاده کردیم که کادری به ضخامت ۱ پیکسل و با رنگ ۰۰۰۰۰۰# را هنگامی که موس روی عکسها می رود سراسر عکس نشان می دهد .
این بخش از آموزش هم به پایان رسید ، امیدوارم خوب و مفید باشد .
با تشکر ، کیوان ا K1
دسته بندی : 
نویسنده : کیوان 
سلام اقا کیوان این دستور بزرگ یا کوچک کردن تصویر چطوری بنویسیم
بطوری که موس بروی عکس عکس بیادجلو؟
خیلی ممنون از اموزشهای خوبتون
به جای rotate در هر سه کد بزن scale به همین سادگی
مرسی کیوان جان
خواهش
سلام میشه طریقه قرار دادن این کد رو توئ میهن بلاگ بگید ممنون می شم
دوست عزیز فرقی نداره برای چه سیستمی باشه فقط کافیه دستورهای توضیح داده شده را به استایل قالب خود اضافه کنید .