• اطلاعیه ها

    • Saeed Fard

      حمایت وردپرس پارسی از همایش آینده وب و موبایل   19/04/74

        چهارم و پنجم اسفند ماه 1395، همایش آیندهٔ وب و موبایل ایران با حمایت سازمان فناوری اطلاعات در مرکز همایش‌های شهید قندی برگزار خواهد شد. این همایش یک رویداد ۲ روزه است که در آن پیشتازان صنعت وب و موبایل از تکنولوژی‌های روز دنیا در این حوزه‌ها سخن می‌گویند به طوری که این همایش پنجره‌ای به چشم‌انداز آینده‌ٔ وب و موبایل در جهان، و همچنین راهنمایی برای تصمیم‌گیران، تصمیم‌سازان و متخصصان ایرانی است.   فرصت‌هایی که FOWM#  برای شما خلق خواهد کرد: آشنایی با تکنولوژی‌های آینده‌ساز وب و موبایل شرکت در مباحث چالشی درباره وب و موبایل ارتباط و شبکه‌سازی با “قله‌های وب و موبایل” موقعیت‌های کاری، هم‌تیمی‌های جدید دریافت گواهی شرکت در همایش دو روز به‌یادماندنی سرشار از شگفتی   شرکت‌کنندگان در این همایش ضمن آشنایی با فناوری‌های آینده‌ساز وب و موبایل، شرکت در مباحث چالشی و ارتباط با بزرگان وب و موبایل ایران، می‌توانند موقعیت‌های کاری و هم‌تیمی‌های جدید برای کسب‌وکار خود بیابند. این همایش برای طراحان و توسعه‌دهندگان وب‌سایت و موبایل، مدیران ارشد سازمان‌ها، صاحبان کسب‌وکارهای کوچک و متوسط، دانشجویان و علاقه‌مندان دارای نکات آموزشی و جذاب خواهد بود.   مجید علوی‌زاده، دبیر همایش آیندهٔ وب و موبایل که سابقه اجرای چند همایش و سمینار مرتبط را دارد، اعلام کرد: جمعی از بهترین‌ها و پیشروان این دو حوزه در ایران با ارائه‌های تخصصی خود، چشم‌انداز آینده این صنعت‌ها را به شرکت‌کنندگان عرضه خواهند کرد.   در هر یک از روزهای برگزاری همایش، یک پنل تخصصی در مورد یکی از موضوع‌های مهم این حوزه نیز برگزار خواهد شد و دست‌اندرکاران به بحث و تبادل نظر خواهند پرداخت و در پایان، به شرکت‌کنندگان گواهی حضور در همایش اعطا خواهد شد.   ثبت نام در مهمترین رویداد صنعت وب و موبایل ایران تا پایان بهمن ماه ۹۵ امکان پذیر خواهد بود، برای ثبت نام و یا کسب اطلاعات بیشتر در خصوص این رویداد و آشنایی با موضوعات و سخنرانان به آدرس http://conf.wsschool.org/fowm مراجعه نمایید.   کاربران وردپرس پارسی می‌توانند با استفاده از کد wp-parsi از مبلغ ۴۰ هزار تومان تخفیف در ثبت نام برخوردار شوند.
فرهاد

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

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 تغییر می کنه

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

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


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

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

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

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

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


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

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

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


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