صورت مسئله برش تصاویر بصورت لوزی شکل در طراحی خیلی رایج است اما هنوز در CSS راه حل خیلی راحتی ندارند. قطعا به وسیله ویرایشگرهای تصاویر انجام این کار بسیار آسان خواهد بود, اما راه حل بهتر این است که در فاز پیاده سازی این کار انجام شود تا خود تصاویر دست نخورده باقی بمانند […]
برش تصاویر بصورت لوزی
ساخت متوازی الاضلاع
فرض کنید بخواهیم یک عنصر, مثلا یک دکمه را به شکل متوازی الاضلاع بسازیم راه حل شما چیست؟
خطایابی صفحه آرایی
در این مطلب قصد معرفی یک ترفند برای خطایابی بهتر مشکلاتی که در حین طراحی در صفحه آرایی بوجود می آیند را داریم. این ترفند توسط addy Osmani تحت عنوان خطایابی صحفه آرایی فقط با 82 بایت کد, معرفی شد. کار این تکه کد جاوااسکریپت این است که برای هر تگ موجود در صفحه یک […]
از gif. تا html. (قسمت دوم)
در این مطلب به ادامه معرفی طرح های خلاقانه ای که به مرحله پیاده سازی رسیده اند, می پردازیم. مواردی که قبلا معرفی شده اند را می توانید در این پست مشاهده کنید. Search طراح: Oleg Frolov See the Pen Search by Radimir Bitsov (@_rbit) on CodePen. توسعه دهنده: Radimir Bitsov […]
از gif. تا html. (قسمت اول)
طراحان به واسطه ذهن خلاقی که دارند مفاهیمی را بوجود می آورند که بسیار جذاب هستند, اما بهترین خروجی که می توانند داشته باشند تا طرحشان را معرفی کنند, معمولا یک فایل Gif ساده است. قطعا حتی خود طراحان هم می خواهند تا بتواند با طرح و مفهومی که بوجود آورده اند تعامل داشته باشند. […]
اشکال بیضی شکل انعطاف پذیر
در این مطلب با نحوه ساخت اشکال بیضی شکل آشنا می شویم
border-radius
از این ویژگی border-radius برای گرد کردن گوشه های یک عنصر استفاده می شود. این ویژگی از نوع ویژگی های مختصر نویسی برای ویژگی های زیر می باشد که هر کدام از آنها مخصوص یک گوشه عنصر هستند: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-radius می تواند یک تا چهار مقدار داشته باشد و اگر مقادیر را […]
border-bottom-right-radius
از ویژگی border-bottom-right-radius برای گرد کردن گوشه پایین و سمت راست یک عنصر استفاده می شود. این ویژگی یک یا دو مقدار می پذیرد که این مقادیر شعاع های یک چهارم شکل بیضویی که نحوه ترسیم لبه بیرونی حاشیه عنصر را تعیین می کند, مشخص می کنند (تصویر زیر بهتر این موضوع را بیان می […]
border-bottom-left-radius
از ویژگی border-bottom-left-radius برای گرد کردن گوشه پایین و سمت چپ یک عنصر استفاده می شود. این ویژگی یک یا دو مقدار می پذیرد که این مقادیر شعاع های یک چهارم شکل بیضویی که نحوه ترسیم لبه بیرونی حاشیه عنصر را تعیین می کند, مشخص می کنند (تصویر زیر بهتر این موضوع را بیان می […]
border-top-right-radius
از ویژگی border-top-right-radius برای گرد کردن گوشه بالا و سمت راست یک عنصر استفاده می شود. این ویژگی یک یا دو مقدار می پذیرد که این مقادیر شعاع های یک چهارم شکل بیضویی که نحوه ترسیم لبه بیرونی حاشیه عنصر را تعیین می کند, مشخص می کنند (تصویر زیر بهتر این موضوع را بیان می […]