آموزش: تبدیل تمام عکس ها به دو گوشه نرم و دو گوشه تیز css [بایگانی]

abolix

سه شنبه 07 مرداد 1393, 21:49 عصر

سلام دیدم یه اموزش بلدم گفتم بگم

121710

این با فوتوشاپ نیست

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

img { border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
}

اگه هم نمی خواید یه class تعریف کنید

omidparkour

سه شنبه 07 مرداد 1393, 21:55 عصر

سلام
با دستور خلاصه شده زیر هم میشه که بهینه تر هست:چشمک:

border-radius: 0px 20px 0px 20px;

ab.ali

سه شنبه 07 مرداد 1393, 21:56 عصر

این حرفی که شما گفتی اشتباه، شاید همه عکس ها از تگ img برای نمایش استفاده نکنن.

abolix

سه شنبه 07 مرداد 1393, 21:58 عصر

همونطور که گفتم

در صورتی که نبود از class ها استفاده کنید

abolix

سه شنبه 07 مرداد 1393, 22:00 عصر

یه سوال برام پیش اومد اگه بخوام روی hover این کارو انجام بدم به صورتی که اروم اروم تغییر کنه چیکار کنم

omidparkour

سه شنبه 07 مرداد 1393, 22:04 عصر

باید در حالت عادی border-radus رو صفر بدید و در hover بیاین border-radius رو مقداردهی کنید
همچنین باید از کد زیر هم برای اینکه آروم آروم تغییر کنه استفاده کنید:
کد زیر رو برای حالت عادی بزارید :
transition-duration: 0.2s, 0.2s; transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;

کد زیر رو هم برای hover :
-moz-transition-duration: 0.2s, 0.2s; -o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;

abolix

سه شنبه 07 مرداد 1393, 22:10 عصر

چطوری لطفا کمی توضیح بدید

abolix

سه شنبه 07 مرداد 1393, 22:11 عصر

ببخشید فهمیدم

ab.ali

سه شنبه 07 مرداد 1393, 22:17 عصر

باید در حالت عادی border-radus رو صفر بدید و در hover بیاین border-radius رو مقداردهی کنید
همچنین باید از کد زیر هم برای اینکه آروم آروم تغییر کنه استفاده کنید:
کد زیر رو برای حالت عادی بزارید :
transition-duration: 0.2s, 0.2s; transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;

کد زیر رو هم برای hover :
-moz-transition-duration: 0.2s, 0.2s; -o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;

چه کاریه؟ وقتی که شما در حالت عدی می گین دو دهم ثانیه طول بکشه، دیگه نیازی نیست توی hover اینو بنویسین!

ab.ali

سه شنبه 07 مرداد 1393, 22:19 عصر

همونطور که گفتم

در صورتی که نبود از class ها استفاده کنید

من نبودی نمی بینم فقط نوشتین اگر نمی خواین.

omidparkour

سه شنبه 07 مرداد 1393, 22:28 عصر

خوب اونجوری وقتی ماوس رو از روی عنصر بر میداری آروم آروم تغییر نمیکنه
یهو تغییر میکنه (چقدر اکشن شد (یاد فیلم های اکشن افتادم:لبخند:):قهقهه:)

ab.ali

سه شنبه 07 مرداد 1393, 22:36 عصر

آها ببخشید حواسم نبود به بازگشتش!

omidparkour

سه شنبه 07 مرداد 1393, 22:44 عصر

ایندفعه رو بخشیدم :قلب: