بسیار خوب، شاید RAZR بهترین تلفن تاشو تا کنون نباشد، اما نمادین بود – و من این را می گویم نه تنها به این دلیل که من یک گوشی داشتم. این یکی از محبوب ترین تلفن های همراه در اواسط دهه 2000 بود.
روز دیگر، بچه ها زود به خواب رفتند، و من تصمیم گرفتم کمی هنر CSS انجام دهم. من RAZR را برداشتم زیرا کشیدن آن نسبتاً آسان است و به هر حال فکر نمی‌کردم زمان زیادی داشته باشم. بنابراین من از این عکس از CNET به عنوان پایه برای ردیابی استفاده کردم.
می توانید نتیجه را در این دمو در CodePen مشاهده کنید:
برخی جزئیات در مورد این نقاشی:
- پاسخگو است: نسخه نمایشی را در CodePen باز کنید، اندازه پنجره را تغییر دهید و ببینید اندازه گوشی چگونه تغییر می کند. تلفن همراه آنقدر نمادین بود که می‌توانید آن را به یک نماد CSS نیز تبدیل کنید. (توجه: این توصیه یا تشویق نمی شود، این نقاشی واقعا کارآمد نیست.)
- این (کمی) تعاملی است: صفحه گوشی بعد از 10 ثانیه به حالت خواب می رود و پس از فشار دادن هر یک از دکمه ها (که تا حدی متحرک نیز هستند) بیدار می شود.
- باز نمیشه (و من آن را باز نمی کنم): مسطح است و ناجور به نظر می رسد … به علاوه زمان می برد.
-
در برخی از مرورگرها اشکال دارد: طرح کلی باتری/میله ها با انجام می شود
drop-shadow، بنابراین در سافاری عالی به نظر نمی رسد. و بیدار شدن تلفن با استفاده از کنترل می شود:has()، که در فایرفاکس پشتیبانی نمی شود. تلفن در آن مرورگر (RIP RAZR) بیدار نمی شود. و هر دوی آنها با بریدگی آبی زیر صفحه مشکل دارند 😓 - گوشی کمی بافت دارد: کامل نیست (و یکی از دلایل ناکارآمدی آن است)، اما اگر دقت کنید، ممکن است متوجه خطوط افقی شبیه سازی بافت فلزی شوید. من یک افکت مشابه را روی این طراحی دکمه حجم انجام دادم (اما اینجا ظریف تر است.)
-
تصویر روی صفحه نیز 100% CSS است! این یک طراحی CSS متفاوت است که من چند سال پیش انجام دادم (بر اساس این تصویر در Unsplash) فقط با استفاده از
clip-path:
