صورت مسئله همان طور که در تصویر بالا مشاهده می کنید ساخت طرح های راه راه همیشه یکی از درگیری های ذهن بشر در زمینه های مختلف بوده است تا جایی که ذهن این مانکن هم…
پس زمینه های راه راه
گرد کردن گوشه های داخلی
صورت مسئله گاهی نیاز داریم تا نگهدارنده ای مثل شکل زیر داشته باشیم که گوشه هایش از سمت بیرون تیز و از سمت داخل گرد است. یک راه حل نه چندان جالب استفاده از دو عنصر است که می توان گوش های عنصر داخلی را با border-radius گرد کرد و عنصر بیرونی با […]
background-size
از ویژگی background-size برای تعیین اندازه تصویر پس زمینه عنصر استفاده می شود. این ویژگی می تواند یک جفت مقدار درصدی و یا طولی بگیرد. همینطور کلمات کلیدی cover و contain را قبول می کند و در نهایت مقدار auto را هم می توان برای این ویژگی در نظر گرفت. background-size: 300px 200px; /* […]
تعیین مکان پس زمینه با روش های انعطاف پذیر
صورت مسئله گاهی در طراحی نیاز داریم تا تصویر پس زمینه را در گوشه ای متفاوت از گوشه بالا سمت و چپ, مثلا پایین و سمت راست عنصر قرار دهیم. با استفاده از ویژگی background-position می توان چنین کاری را انجام داد اما اگر بخواهیم تا فاصله ای بین تصویر پس زمینه و لبه های […]
calc
از تابع ()calc در سی اس اس برای عملیات ریاضی شامل جمع, تفریق, ضرب و تقسیم بر روی مقادیری از نوع طول, زمان, زاویه, فرکانس و انواع اعداد استفاده می شود. این تابع بخصوص برای انجام عملیات ریاضی بر روی مقادیر نسبی (مثل em, rem, vw, %) بسیار کاربردی و مفید است. در مثال […]
background-origin
ویژگی background-origin تعیین می کند که شروع ترسیم پس زمینه عنصر در کدام ناحیه باشد. مقادیر متفاوت برای این ویژگی زمانی که با ویژگی هایی مثل background-repeat و background-clip ترکیب می شود باعث نتایج متفاوت می شود. اگر ویژگی background-attachment برای یک عنصر مقدار fixed داشته باشد ویژگی background-origin برای آن عنصر نادیده گرفته می […]
background-position
اگر برای یک عنصر پس زمینه ای تعریف شود ویژگی background-position مکان آن پس زمینه را برای آن عنصر (بعد از هرگونه تغییر اندازه پس زمینه) با توجه به ناحیه مشخص شده برای ترسیم پس زمینه تعیین می کند. این ویژگی کلمات کلیدی مثل top, bottom,right,left و center را می پذیرد. همچنین می توان مقدار […]
حاشیه های چندتايي
صورت مسئله هنوز هم گاهی این سوال مطرح می شود که آیا نیاز است که همانطور که می توانیم چند پس زمینه برای یک عنصر تعیین کنیم, بتوانیم چند حاشیه (border) نیز برای یک عنصر خاص تعیین کنیم؟
outline-offset
از ویژگی outline-offset برای تنظیم فاصله outline با مرزهای عنصر استفاده می شود. بصورت پیشفرض outline دور عنصر و بعد از حاشیه آن ترسیم می شود بطوری که فاصله ای بین آنها وجود ندارد اما با استفاده از ویژگی outline-offset می توان بین آنها فاصله بوجود آورد. این فاصله رنگی نخواهد داشت و شیشه ای […]
ساخت حاشیه نیمه شفاف
به احتمال زیاد با ساخت رنگ های نیمه شفاف در CSS بوسیله توابع رنگی ()rgba و ()hsla آشنایی دارید. با وجود اینکه خیلی از افراد با این توابع آشنایی دارند و همینطور جلوه های زیبایی می توان بوسیله آنها بوجود آورد هنوز هم خیلی ها از این توابع استفاده نمی کنند. و اگر هم مورد […]