برش لوزی شکل تصاویر در css

برش تصاویر بصورت لوزی

صورت مسئله برش تصاویر بصورت لوزی شکل در طراحی خیلی رایج است اما هنوز در CSS راه حل خیلی راحتی ندارند. قطعا به وسیله ویرایشگرهای تصاویر انجام این کار بسیار آسان خواهد بود, اما راه حل بهتر این است که در فاز پیاده سازی این کار انجام شود تا خود تصاویر دست نخورده باقی بمانند […]

ساخت متوازی الاضلاع

ساخت متوازی الاضلاع

فرض کنید بخواهیم یک عنصر, مثلا یک دکمه را به شکل متوازی الاضلاع بسازیم راه حل شما چیست؟

خطایابی صفحه آرایی در css

خطایابی صفحه آرایی

در این مطلب قصد معرفی یک ترفند برای خطایابی بهتر مشکلاتی که در حین طراحی در صفحه آرایی بوجود می آیند را داریم. این ترفند توسط addy Osmani تحت عنوان خطایابی صحفه آرایی فقط با 82 بایت کد, معرفی شد. کار این تکه کد جاوااسکریپت این است که برای هر تگ موجود در صفحه یک […]

از طرح تا پیاده سازی

از gif. تا html. (قسمت دوم)

در این مطلب به ادامه معرفی طرح های خلاقانه ای که به مرحله پیاده سازی رسیده اند, می پردازیم. مواردی که قبلا معرفی شده اند را می توانید در این پست مشاهده کنید.   Search   طراح: Oleg Frolov   See the Pen Search by Radimir Bitsov (@_rbit) on CodePen. توسعه دهنده: Radimir Bitsov   […]

از فایل gif تا کد

از 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 برای گرد کردن گوشه بالا و سمت راست یک عنصر استفاده می شود. این ویژگی یک یا دو مقدار می پذیرد که این مقادیر شعاع های یک چهارم شکل بیضویی که نحوه ترسیم لبه بیرونی حاشیه عنصر را تعیین می کند, مشخص می کنند (تصویر زیر بهتر این موضوع را بیان می […]