آرشيو مطالب "سی اس اس - CSS"

رونمایی از لوگوی جدید CSS3‌ و HTML5

3
همانطور که می‌دانید مدتی‌است طراحی در اینترنت درگیر تغییر و تحولات بسیار زیادی شده است که بیشتر این تغییرات را مدیون پیشرفت CSS و HTML است به طوری که با امکانات جدید این دو زبان، طراحی وب بسیار شیرین‌تر و لذت‌بخش‌تر از قبل شده است. امکاناتی که نسخه‌های جدید (یعنی CSS3 و HTML5) در اختیار طراح قرار می‌دهد، باعث می‌شوند خیلی از کارهایی را که قبلا قادر به انجام آنها نبودیم و یا باید مشقت‌های زیادی  برای پیاده‌سازی آنها انجام می‌دادیم را به راحتی انجام دهیم . اما در این میان جای یک لوگو برای CSS3 و HTML5 خالی بود که سازمان استاندارد وب W3C برای هر دوی اینها لوگویی طراحی کرد که در اینجا می‌بینیم:

html5 logo

شخصی سازی انحنای عناصر در CSS۳ به وسیله قابلیت جدید آن

9
قبلا در اینجا توضیح دادیم که چگونه میتوان گوشه های عناصر را انحنا داد. اما اخیرا قابلیت جدیدی به CSS۳ اضافه شده است که با استفاده از آن میتوانید انحنای هر گوشه را به طور جداگانه و با امکاناتی جدید تعیین کنید.
از امکانات جدید میتوان به انحنای افقی و عمودی اشاره کرد که با استفاده از آن میتوانید یک بیضی را با استفاده از CSS۳ طراحی کنید. کاری که قبل از این امکان پذیر نبود.borders-redius.jpg

Anigma‌ یک بازی آنلاین فقط با استفاده از CSS۳ و HTML۵

12
درباره CSS۳ و قابلیت‌های آن بارها نوشته‌ام اما امروز قصد دارم یک بازی آنلاین را که فقط و فقط با استفاده از قابلیت‌های CSS۳ و HTML۵ ساخته شده است را به شما معرفی کنم. این بازی که Anigma نام دارد یک بازی پازل است و شما باید با قراردادن رنگ‌ها در کنار یکدیگر، آنها را حذف کنید. این بازی در مراحل مختلف از ساده تا خیلی سخت ساخته شده است.نمایی از بازی اینترنتی Anigma

موقعیت دهی یک عنصر دقیقا در وسط صفحه‌ی مرورگر با استفاده از CSS

5
در این مقاله قصد آموزش یک ترفند CSS را دارم که فکر میکنم خیلی از طراحان وب هنوز با آن مشکل دارند. هنوز هیچ دستور مشخصی برای قرار دادن یک عنصر div دقیقا در وسط صفحه‌ی مرورگر وجود ندارد. بسیاری از وبسایتها و صفحات را دیده‌ام که برای این کار از درصدهای نه چندان دقیق استفاده میکنند. برای مثال div خود را به فاصله‌ی ۴۰٪ از بالا و سمت راست یا چپ قرار میدهند که اگر ما اندازه‌ی صفحه نمایش را تغییر دهیم با تغییراتی در محل قرار گیری عنصر مواجه می‌شویم. اما با استفاده از ترفند امروز دیگر این مشکل به وجود نخواهد آمد.عنصر در وسط صفحه

ساخت یک گالری عکس کاملا داینامیک و افکت دهی به آن فقط با CSS۳

4
تا سال گذشته که هنوز تب CSS۳ به جان طراحان نیفتاده بود برای ایجاد یک گالری تصاویر زیبا مجبور بودید دست به دامان جاوا، جی‌کوئری، فلش و ... باشید ولی از وقتی نسخه سوم CSS پا به عرصه گذاشته دیگر نیازی به هیچکدام از مواردی که اشاره شد ندارید. در این پست قصد دارم یک گالری عکس زیبا فقط با استفاده از CSS۳ ایجاد کنم پس با من همراه باشید.