• اطلاعیه ها

    • Saeed Fard

      سیاره وردپرس ایران   15/10/95

      سایت‌های زیادی در ایران و سرتاسر وب در زمینه گسترش وردپرس تلاش دارند و نوشته‌های آموزشی منتشر می‌کنند. اما ضرورت یک منبع خوب و ارزشمند برای جمع‌آوری بهترین‌های وب ایران و دنیا باعث ایجاد سیاره وردپرس شد تا دنبال کنندگان این موضوع به صورت یکجا و آسان بتوانند به این نوشته‌ها دسترسی داشته باشند.     در سیاره وردپرس این بستر فراهم شده است که آدرس وب‌سایت‌های مربوطه ثبت و برای این سرویس ارسال شود، آخرین نوشته‌های مفید وب‌سایت‌ها در سیاره وردپرس و نیز در بخش اخبار وردپرس پیشخوان سایت‌های وردپرسی از طریق افزونه‌ی Parsi Date نمایش داده می‌شود. همینطور کاربران از طریق عضویت در خبرنامه ایمیلی سیاره وردپرس می‌توانند به صورت دوره‌ای بهترین و جدیدترین نوشته‌های وردپرسی را که توسط اعضای تحریریه و همکاران سیاره وردپرس بررسی و تایید می‌شود را در ایمیل خود دریافت کنند.   امکانات سیاره وردپرس امکان ثبت آدرس سایت‌هایی که نوشته‌های مفید در زمینه وردپرس دارند. نمایش نوشته‌های وردپرس سایت‌ها در سیاره وردپرس نمایش نوشته‌های وردپرس در پیشخوان سایت‌های وردپرس فارسی توسط ویجت اخبار پلاگین Parsi Date و ... امکان ثبت ایمیل کاربران علاقه‌مند جهت دریافت مطالب محبوب و ویژه در خبرنامه دوره‌ای سیاره توسط اعضای تحریریه و ... جهت ثبت سایت وردپرسی یا ایمیل خود به سایت سیاره وردپرس مراجعه کنید   تاپیک پیشنهادات و همکاری در سیاره وردپرس : http://wpu.ir/qlhy5  
فرهاد

درخواست کد سی اس اس نمایش اطلاعات عنصر

5 پست در این موضوع قرار دارد

سلام

در بعضی سایتها از تکنولوژی 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%;
}

به اشتراک گذاری این پست


لینک به پست

خب من تا حدودی تونستم بهش دست پیدا کنم

اما فکر نمیکنم اصولی شده باشه

دقت کنین کمی کلک هستش


#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) مقدارشو کم کردم

الان تقریبا میشه گفت مثل سایت نفوذ شده

اما نه تنها غیر اصولی هست بلکه یکم هم متفاوته

ممنون میشم راهنماییم کنید که بگین سایت نفوذ یا بقیه از چه ترفندی استفاده کردن؟

به اشتراک گذاری این پست


لینک به پست

کدها الان به درستی کار کردن

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

فقط فهمیدم با پوزیشن, موقعیت گرفتن و زیر هم دیگه با overflow مخفی شدن

اما چرا برای همه عناصر پوزیشن استفاده شده

ممنون میشم یه وضیح مختصر بدین

به اشتراک گذاری این پست


لینک به پست

عنصر اول با کلاس innerImage کار قاب را می کنه با طول و عرضی برابر تصویر با پوزیشن relative

داخل عنصر اول تصویر قرار داره و یک div با کلاس info این div قراره کار کشو را انجام بده و توضیحات ما را در حالت hover نمایش بده پوزیشنش absolute است که روی تصویر قرار بگیره و با توجه به پوزیشن مادر نقاط چپ راست بالا و پائینش بر اساس موقعیت innerImage دایو آخر با کلاس text فقط محل قرار گیری مطلب را یرای ما مشخص می کنه و در واقع باعث می شه مطالب از گوشه ها فاصله صحیح را داشته باشند می شه بجای این دایو از خاصیت padding برای کلاس info استفاده کرد ولی حالت نمایش در مرورگرهای مختلف تغییر خواهد کرد

خاصیت اصلی با دادن hover به لایه innerImage تغییر می کنه

دیگه فکر نکنم توضیحی مونده باشه که مورد نیاز باشه

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری