خوش آمدید , میهمان گرامی! ورود or ثبت نام

تغییر رنگ قالب



بستن
عیب یابی و تعمیر لوازم خانگی برقی کوچک
nopardaz nopardaz 0 29
الان داری چه آهنگی گوش میدی ؟
moonlover luna 512 104434
حمله ddos سرور مجازی چیست و چگونه می توان با آن مقابله کرد – بخش اول
pouyanweb9 pouyanweb9 0 31
نگاهی به تاریخچه و انواع مختلف ساز آکاردئون
minajafari minajafari 0 33
هزینه کیملیک ترکیه
minajafari minajafari 0 32
هزینه اقامت در ترکیه
minajafari minajafari 0 31
تفاوت Rank Math و Yoast در سئو وردپرس
minajafari minajafari 0 36
طراحی سایت چند منظوره
minajafari minajafari 0 37
طراحی سایت با پایتون
minajafari minajafari 0 47
طراحی سایت املاک حرفه ای
minajafari minajafari 0 44
ورزش های افزایش قد به صورت طبیعی
AminA90 AminA90 0 51
همین الان تو چه فکری هستی؟ (22)
گلایه bad_boy 542 25714
مشاعره با ترانه خوانندگان 5
غزل luna 471 45410
بالاییت از تو چی تره؟ (2)
payam cowboy luna 706 47217
حرف های تکراری ما
moonlover luna 500 72691
طراحی و ساخت اپلیکیشن های تحت وب
minajafari minajafari 0 49
معرفی کالباس بر پارس برش
allscale allscale 0 50
همه چیز درباره عاج لاستیک خودرو
saharim saharim 0 47
ارتودنسی و ورزش
minajafari shanamobl 1 44
طراحی سایت تاکسی اینترنتی
minajafari minajafari 0 38
طراحی سایت کلیکی و کسب درآمد بیشتر
minajafari minajafari 0 40
مشاوره دیجیتال مارکتینگ
asal010 asal010 0 47
طراحی سایت حرفه ای
asal010 asal010 0 39
سئو و بهینه سازی سایت
asal010 asal010 0 36
دریافت 2500 توکن رایگان
mahmoudezoj mahmoudezoj 0 40
طراحی و دکوراسیون ا چوب ترمووود
roysa roysa 0 41
امنیت سرور مجازی ویندوزی و آموزش بالا بردن امنیت آن – بخش دوم
webpouyanii webpouyanii 0 79
نمایندگی تعمیرات یخچال آریستون در تهران
nopardaz nopardaz 0 43
ساخت ایموجی سفارشی در موبایل
Iman91A Iman91A 0 54
چطوری از اینستاگرام در کامپیوتر استفاده کنیم؟
elecomco elecomco 0 48
نمونه کد اندروید چیست ?
elecomco elecomco 0 46
انواع دستگاه تصفیه آب
nopardaz nopardaz 0 51
آشنایی با تعمیر یخچال فریجیدر
nopardaz nopardaz 0 57
۵۰ روش برای تعمیر گوشی اندرویدی توسط خودتان
zhalezibayi Nazanim 1 228
چگونه یک تعمیرکار موبایل حرفه‌ای شویم؟
saragholipoor Nazanim 2 172
چرا انجام مطالعات امکان سنجی اقتصادی مهم است؟
sharmand sharmand 0 58
ترندهای رنگ مو در بهار ۲۰۲۰
Iman91A Iman91A 0 65
امنیت سرور مجازی ویندوز و آموزش بالا بردن امنیت آن – بخش اول
webpouyanii webpouyanii 0 77
درباره تور ترکیبی ترکیه
amin653 amin653 0 74
درباره تور ترکیبی استانبول ازمیر
amin653 amin653 0 64

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینهزمان کنونی: Friday 05 June 2020, 16:54
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: magbot
آخرین ارسال: magbot
پاسخ: 1
بازدید: 288
 
امتیاز دهید:
  • 0 رأی - میانگین امیتازات : 0
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
Tuesday 18 June 2019, 01:21
ارسال: #1
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه
[font=Cormorant Garamond, Arial, serif]
[size=xxx-large]طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه[/size] مشاهده لینک [/font]
مشاهده لینک
اولین روش ایجاد یک اثر قبل و بعد از یک تصویر است. من قصد دارم برای ایجاد روش دوم که محصول را تغییر می دهد "همانطور که ما به پایین حرکت می کنیم. نگاهی سریع به صفحه محصول نسخه ی نمایشی ما برای دریافت ایده درباره اثری که در این آموزش انجام می دهیم.

ابتدا باید یک تصویر پسزمینه را به یک ظرف HTML اضافه کنید. سپس ویژگی پسوند دلخواه تعریف می کند که آیا تصویر را با محتوا پیمایش کنید یا آن را ثابت نگه دارید. شما می توانید ثابت یا پیمایش را به عنوان مقدار پس زمینه دلبستگی استفاده کنید.

بگذارید بگوییم شما دارای 4 ظروف با ضمیمه های پس زمینه ثابت در همان موقعیت است. در چنین مواردی تصاویر در بالای صفحه بعدی قرار می گیرند و محتوا به صورت عمودی مانند آنچه که معمولا انجام می شود، تراز می شود. بیایید سعی کنیم این مفهوم را با استفاده از نمای گرافیکی درک کنیم.

در کد بالا 4 عنصر با ضمیمههای پس زمینه ثابت وجود دارد. بنابراین 4 تصویر در بالای صفحه دیگری مانند صفحه نمایش زیر نشان داده خواهد شد. من بعضی از حاشیه ها را نگه داشته ام تا به شما نشان دهم چگونه تصاویر در حال انباشته شدن هستند. در واقع شما قادر به دیدن تصویر بالا هستید.

[تصویر: fixed-scroll-01-480x267src%20=]

اکنون اجازه می دهد نگاهی به نحوه قرار دادن ظروف در مثال بالا بگذارید.

[تصویر: 5.jpg]

همانطور که می بینید تصاویر در همان موقعیت ثابت می شوند و ظروف آنها به صورت عمودی انباشته می شوند. از آنجا که ظروف خالی هستند، فقط تصویر بالا را مشاهده خواهید کرد. این است که ما در نسخه ی نمایشی اثر خنک ایجاد می کنیم.

اگر ظروف را با برخی از متن ها پر کنید، خواهید دید که چطور قرار داده شده است و ارزش این اثر از بین می رود. ما نظریه را در این اثر آموخته ایم. بخش بعدی به شما نحوه طراحی صفحه محصولات را نشان می دهد.
صفحه محصولات طراحی
صفحه محصول شامل محصولات در مرکز صفحه به عنوان تصاویر است. سپس ما دو بخش ناوبری برای پائین و نوار کناری را توسعه خواهیم داد. بخش محصولات شامل اثر اصلی این آموزش است. بنابراین شروع کنیم به طراحی تصاویر محصول.
ما 4 تصویری که در قسمت قبلی استفاده کردیم. در اینجا، ارتفاع کانتینگیها را به اندازه 700px تنظیم کردم. در نسخه ی نمایشی این ارتفاع با استفاده از ارتفاع پنجره مرورگر محاسبه می شود از آنجایی که برای کنترل ناوبری مورد نیاز است و اثر را درست نشان می دهد.

حالا شما می توانید صفحه پایین را پیمایش کنید و شما می توانید اثر پیمایش را همانطور که در زیر نشان داده شده مشاهده کنید.
[تصویر: div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]مقالات مرتبط مشاهده لینک مشاهده لینک مشاهده لینک
نقل قول


موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
Cool دکتر جفری تامپسون از بزرگترین اساتید در زمینه استفاده از ترکیب ام omid 1 1,260 Thursday 09 April 2020 12:06
آخرین ارسال: notrik
  دانلود پس زمینه دسکتاپ omid 0 334 Thursday 24 June 2010 19:56
آخرین ارسال: omid
Cool چرخاندن صفحه نمایش در مواقع ضروری با iRotate omid 0 464 Monday 11 January 2010 11:10
آخرین ارسال: omid
  نخستين تصاوير واقعي از رايانه فاقد صفحه كليد منتشر شد aria 0 475 Wednesday 19 August 2009 10:14
آخرین ارسال: aria
  مخفی کردن یک فولدر یا فایل به شکلی جدید و حیرت انگیز nakhoda_abbas 0 457 Sunday 07 October 2007 21:46
آخرین ارسال: nakhoda_abbas

پرش به انجمن:



زمان کنونی: Friday 05 June 2020, 16:54