اين مثال جالب از چرخوندن المنت ها با سي اس اسه.

چرخش تصوير طراحی وب سایت و متن در سي اس اس

براي افزودن استايل اين css رو بنويسين:

.rotate{

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-o-transform: rotate(90deg);

writing-mode: tb-rl;

}

براي مثال:

body{

direction:rtl;

font:normal 12px tahoma;

}

.rotate{

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-o-transform: rotate(90deg);

writing-mode: tb-rl;

background-color:#bbb;

padding:10px;

width:400px;

}

طيف رنگي بک گراند يا همون gradient

سهشنبه ? شهريور ??90 | نويسنده مسلم هادي | نظرات (2)

منوي اين وبلاگ رو ميبينين؟! با css بهش رنگ دادم. يا حتي طراحی وب سایت پس زمينه وبلاگ که از آبي به سفيد کمرنگ ميشه! اونم gradientه!! عينک

توي اين مقاله css بکگراند gradient رو ياد ميگيريم لبخند

خوب. سي اس اس به اين صورته:

.gradient

{

background-color: #f8aa53;

background-image: -moz-linear-gradient(#f8aa53, #d47100);

background-image: -webkit-gradient(linear, left top, left bottom, from(#f8aa53), to(#d47100));

background-image: -webkit-linear-gradient(#f8aa53, #d47100);

background-image: -o-linear-gradient(#f8aa53, #d47100);

background-image: -ms-linear-gradient(#f8aa53, #d47100);

background-image: linear-gradient(#f8aa53, #d47100);

}

رنگ اول يني f8aa53، رنگ بالاييه و d47100 رنگ پايينيه!

اينم يه مثال:

حالا اگه ميخواين لبه هاشو گرد کنيد بايد از گرد کردن لبه استفاده کنيد:

من يه بردر 2 پيکسلي هم بهش دادمنيشخند

(با عرض شرمندگي به دليل محدوديت اديتور نیلوبلاگ، توي اين مثال فقط تونستم style براي Firefox بدم. يني اين مثالاي من فقط روي firefox کار ميکنه. ولي اگه شما از cssي که گفتم استفاده کنيد براي همه بروزرها جواب ميده.)

کاهش حجم عکس بدون کاهش کيفيت با نرم افزار PngOptimizer

از اونجايي که سرعت لود شدن يه صفحه بسار مهمه، يا نبايد از عکس توي طراحيتون استفاده کنيد يا اينکه عکس هاتون بايد حجم بسيار کمي داشته باشن.

با استفاده از اين نرم افزار ميتونين حجم عکس هاتون رو کاهش بدين. بدون اينکه حتي ذره اي از کيفيتشون کم بشه. من خودم شاهد بود که حجم بعضي از عکس ها رو تا 80 درصد کاهش ميده!!! تعجب

در ضمن. همونطور که از اسمش پيداست مخصوص پسوند PNG است! ولي براي بعضي از پسوندهاي ديگه هم کار ميکنه و اون ها رو به PNG تبديل ميکنه