ايجاد گوشه منحني با کمک تصوير (قسمت دوم)

در شماره گذشتـه تلاش کرديم تا با کمک نرم‌افـزار فتوشاپ چهار گوشـه يـک کادر را گرد کرده، تصاويـر مربـوط به چهـار گوشـه ايـن شکـل را در شاخـه‌اي بـا نـام imgBorderSample و با نام‌هاي زير ذخيره کرديم:

corner-top-left.png

corner-top-right.png

corner-bottom-left.png

corner-bottom-right.png

اکنون مقدمات کار آماده است. قبل از انجام کار، الگوريتم کلي پياده‌سازي اين کادر را مرور مي‌کنيم. کادر مورد نظر ما از چهار کنترل Div تو در تو تشکيل شده است. البته ممکن است شما در هنگامي که قصد داشته باشيد اين مثال را به‌طور عملي پياده‌سازي کنيد، Divهاي ديگري را نيز به اين مجموعه بيفزاييد اما شکل کلي کار تغيير نخواهد کرد. هر يک از اين Divها بايد يک خصوصيت style داشته باشد که در آن خصوصيت background تنظيم شده باشد. داخلي‌ترين Div بايد خصوصياتي براي تنظيم عرض و ارتفاع کنترل، داشته باشد.

با توجه به الگوريتم فوق، در ادامه درباره پياده‌سازي style مربوط به هر يک از Divها صحبت خواهيم کرد. همان‌طور که مي‌دانيد، در صورتي که قصد داشته باشيم تصوير background يک Div را مشخص کنيم، بايد از قالب CSS زير استفاده کنيم:

Background:url(‘address of image’);

که address of image موقعيت مکاني «نسبي» عکس نسبت به مکان فايل CSS است. به عنوان مثال اگر خصوصيت فوق درون يک فايل CSS در شاخه‌اي به نام CSS تعريف شده باشد و تصوير ما در شاخه‌اي با نام img باشد و از طرف ديگر شاخه‌هاي CSS و img برادر يکديگر باشند، نحوه آدرس‌دهي به شکل زير خواهد شد:

Background:url(‘../img/name of image’);

همان‌طور که مشاهده مي‌کنيد براي رسيدن به شاخه img، بايد نخست با کمک علامت دو نقطه، به يک شاخه بالاتر مراجعه کنيم و سپس از آن‌جا آدرس عکس را بدهيم. در شماره آينده ادامه اين مبحث را پي مي‌گيريم.