فرهاد-سئو 905 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 سلامدر بعضی سایتها از تکنولوژی CSS3 برای نمایش اطلاعات یک پست یا عنصری با افکت زیبایی که قبلا فقط با جی کوتری ممکن بودمن تونستم کدهارو به جایی برسونماما مشکلی که دارم اینه که حتما باید در مون نقطه خاص موس رو ببری تا اطلاعات با افکت نمایش داده بشهاین در حالیه که در سایتهای زیر در هر کجای پست قرار بگیری اطلاعات در اندازه کوچیک با افکت نمایش داده میشهمثلا در سایت نفوذ طراح طوری طراحی کرده که اطلاعات در انتهای یک کادر مربع قرار دارهاما من وقتی میزارمش در انتهای کادر حتما باید موس رو به همون نقطه ببری تا اطلاعات رو نشون بدهاما در سایت نفوذ شما در هر جای عکس موس رو برین اطلاعات رو نشون میدهاز طرفی هم اگه بهش طول و عرض بدم چون لایه اولیه میشه, عکس رو پنهان میکنهhttp://3rial.tv/category/view-download/nofooz-view-download-season-2/http://www.lenzor.com/pars-pakhsh.ir#option .mywork a .info {opacity:0;-moz-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;position: relative;top:101%;background:rgba(172, 38, 13, 1);font-family:BHoma;font-size:15px;color:#ffffff;padding:2%;text-align:center;overflow:hidden;}#option .mywork a .info:hover {background:rgba(172, 38, 13, 1);font-family:BHoma;font-size:15px;color:#ffffff;padding:2%;text-align:center;-moz-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;opacity:1;position: relative;top:90%;} نقل قول لینک به ارسال
فرهاد-سئو 905 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 خب من تا حدودی تونستم بهش دست پیدا کنماما فکر نمیکنم اصولی شده باشهدقت کنین کمی کلک هستش#option .mywork a .info {opacity: 0;-moz-transition: all 0.7s ease-in;-webkit-transition: all 0.7s ease-in;-o-transition: all 0.7s ease-in;-ms-transition: all 0.7s ease-in;height: 24px;padding-top: 85%;overflow:hidden;}#option .mywork a .info:hover {-moz-transition: all 0.7s ease-out;-webkit-transition: all 0.7s ease-out;-o-transition: all 0.7s ease-out;-ms-transition: all 0.7s ease-out;opacity: 1;padding-top: 75%;}#option .mywork a .info p {background:rgba(172, 38, 13, 1);font-family:BHoma;font-size:15px;color:#ffffff;padding:3%;text-align:center;}در این کدها من اول یه لایه بزرگ قرار دادم و زیر لایه , لایه اصلی قرار دادم تا تصویر زمینه که همون تصویر شاخص یا هر چیزی میتونه باشه نشون داده بشهبعد یک زیر لایه برای متن قرار میدم و پنهان ( hidden) میکنمشبعد برای اینکه انتهای کادر قرار بگیره بهش فاصله از بالای سر دادم (padding-top) و در حاور (hover) مقدارشو کم کردمالان تقریبا میشه گفت مثل سایت نفوذ شدهاما نه تنها غیر اصولی هست بلکه یکم هم متفاوتهممنون میشم راهنماییم کنید که بگین سایت نفوذ یا بقیه از چه ترفندی استفاده کردن؟ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 http://codepen.io/anon/pen/vueCi 3 نقل قول لینک به ارسال
فرهاد-سئو 905 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 کدها الان به درستی کار کردناما اینجا من هنوز از ترفند چیزی دستگیرم نشده که این کدها چطوری با هم در ارتباط هستنفقط فهمیدم با پوزیشن, موقعیت گرفتن و زیر هم دیگه با overflow مخفی شدناما چرا برای همه عناصر پوزیشن استفاده شدهممنون میشم یه وضیح مختصر بدین نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 عنصر اول با کلاس innerImage کار قاب را می کنه با طول و عرضی برابر تصویر با پوزیشن relative داخل عنصر اول تصویر قرار داره و یک div با کلاس info این div قراره کار کشو را انجام بده و توضیحات ما را در حالت hover نمایش بده پوزیشنش absolute است که روی تصویر قرار بگیره و با توجه به پوزیشن مادر نقاط چپ راست بالا و پائینش بر اساس موقعیت innerImage دایو آخر با کلاس text فقط محل قرار گیری مطلب را یرای ما مشخص می کنه و در واقع باعث می شه مطالب از گوشه ها فاصله صحیح را داشته باشند می شه بجای این دایو از خاصیت padding برای کلاس info استفاده کرد ولی حالت نمایش در مرورگرهای مختلف تغییر خواهد کرد خاصیت اصلی با دادن hover به لایه innerImage تغییر می کنه دیگه فکر نکنم توضیحی مونده باشه که مورد نیاز باشه 4 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .