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

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

دمو

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

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

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

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

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

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

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

موفق باشید.

یا علی

لینک دانلود

Source

attractive beauty code CSS‏ CSS crossword idea inspire