کدهای جذاب و دیدنی ( CSS crossword ) : ساخت جدول کلمات متقاطع با CSS خالص

زمان مطالعه: 2 دقیقه
۲۹ آبان ۱۳۹۶

در این قسمت میخوام یک کد ( CSS crossword ) جالب رو در اختیارتون بزارم.

توضیحات مربوط به کد CSS crossword

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

بر روی هر قسمت از جدول که هاور کنید، سوال مربوط به اون قسمت نمایش داده میشه.

بعد از جواب دادن به سوالات و پر کردن فضاهای خالی، برای اینکه متوجه بشید جدول رو درست حل کردید یا خیر، میتونین بر روی گزینه Check for Valid squares کلیک کنید و با اینکار اون مربع هایی که حرف صحیح وارد کرده اید به رنگ سبز در خواهند اومد.

زمانی که یک کلمه رو بصورت کامل و صحیح وارد میکنید، اون قسمت به رنگ سبز در میاد:

جالبی این کد این هست که اصلا از Javascript استفاده نشده است و همه این موارد با استفاده از CSS انجام میشن! برای مشاهده کدهای CSS و انتخابگرهایی که مورد استفاده قرار گرفته اند، میتونین وارد View Source بشید و یا فایل فشرده انتهای مطلب رو دانلود کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

رضا

ممنون از شما
یه سوال الان شما در کد ها هم دست بردید یا خیر؟
https://codepen.io/adrianroworth/pen/OpeyZq
در داخل سایت فوق که همین جداول هست کد های sass هست که در سورس کد های شما دیده نمیشود

محمد اسفندیاری

من با استفاده از خود Codepen کدهای Sass رو کامپایل کردم و اونا رو بصورت CSS در آورده و قرار دادم تا مرورگر اونا رو متوجه شده و اعمال کند
موفق باشید

رضا

ممنونیم جناب اسفندیاری
بک سوال از خدمتمبارک داشتیم اینکه شما چطوری به این سورس های جالب دسترسی پیدا میکنید
اینکه چطوری سرچ میزنید؟

محمد اسفندیاری

سلام
من سرچ خاصی رو پیدا کردن این موارد انجام نمیدم و بصورت اتفاقی این موارد رو پیدا کرده و ذخیره میکنم و به تدریج اونا رو در اختیار کاربران قرار میدم….
مثلا امکان داره همین نمونه رو چند ماه پیش پیدا کرده باشم
موفق باشید