کار با گوشه و حاشیه در طراحی سایت (قسمت دوم)

کار با گوشه و حاشیه در طراحی سایت (قسمت دوم)

shorthandborder می توان کنترل کرد.منظور از پهنا و رنگ حاشیه به خوبی مشخص است.خاصیت border-width پهنای حاشیه را طبق اندازه گیری CSS و یا لغات کلیدی (باریک،متوسط و ضخیم) معین می کند.border-color نیز یک عدد مبنا 16 را در خود جای می دهد.

خاصیت سبک حاشیه جایی است که سازندگان CSS نهایت خلاقیت خود را به کار برده اند.در این گزینه هشت سبک بصری برای انتخاب وجود دارد:خط چین،نقطه چین،دوتایی،شیار دار،برآمده، یکپارچه،درونی نما و برونی نما.

خاصیت سبک حاشیه (border-style) باید به یکی ار دو حالت هیچکدام یا مخفی تنظیم شود.هر چند که گزینه سبک حاشیه یکی از قسمت های مورد علاقه من در CSS است،بسیار بهتر بود اگر سازندگان آن جزییات این مقادیر را بصورت دقیق تر در اختیار سازندگان مرورگرها قرار می دادند.

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

4-حاشیه های سایه برجسته CSS

به کار گیری خاصیت های متفاوت حاشیه های CSS در مورد یک تصویر الزاما وحشتناک نخواهد بود. قدرت حیرت انگیز حاشیه ها در این است که به آن اندازه ای که می توان عالی عمل کرد به همان انداره نیز می توان افتضاح باشد.از آرایه های حاشیه ای که طراحان به استفاده از آن علاقه مند می باشدآرایه سایه برجسته است.

همچنین برای بوجود آوردن آرایه های سایه برجسته نیز همین فراوانی منابع نیز وجود دارد.یکی از راههای بسیار ساده برای ساختن سایه برجسته قرار دادن یک حاشیه یکپارچه تک نقطه ای در سمت راست پایین عنصر مورد نظر است.

5-آرایه های تصویر چندگانه

هرگاه که حاشیه ای برای یک تصویر یا یک بلاگ متن طراحی می کنید خواهان این هستید که بتوانید آرایه ها را در مورد موضوعاتی با اندازه متغیر نیز بکار ببرید.هر چند که حاشیه های CSS  در مورد تصاویر با اندازه متغیر کارایی دارند،حاشیه هایی که بر اساس تصاویر مجزا طراحی شده اند این توانایی را ندارند و می توان در این مورد برای ایجاد تطابق آرایه های از تصاویر چند گانه استفاده کرد.

با احاطه کردن لینک تصویر به وسیله تگ <div> امکان ایجاد تصویر زمینه هم برای لینک و هم برای div بوجود آمد.زمینه لینک با لبه div بالایی در یک خط قرار دارند.

پس زمینه div شامل دو گوشه بالای عکس است که از طریق لایه گذاری در عنصر لینک قابل مشاهده است.پس زمینه عنصر لینک یک تصویر مشابه که حاوی عکس گوشه پایین است.این تصویر بصورت خطی پایین عنصر لینک قرار گرفته و به خاطر لایه گذاری در این عنصر قابل مشاهده شده است.لایه گذاری این کمک را می کند تا قسمت قابل کلیک کردن لینک را بزرگ تر کرده و کلیک روی لینک را تا حد امکان ساده نماییم.HTML برای این آرایه بسیار ساده می باشد:

<div class=”photobox”>

<a href=”bigdog.jpg” title=”Big Dog”><imagsrc=”dog.jpg” alt=”Dog”/></a> </div>

و CSS این آرایه نیز بسیار ساده می باشد:

.photoobx {

Background-image:url(‘photobg-top.gif’);

Background-position:top;

Background-repeat:no-repeat;

}

.photobox a {

Display:block;

Text-align:center;

Text-decoration:none;

Padding;16px 0 10px 0;

Background-image:url(‘photobg-bot.gif’);

Background-position;bottom;

Background-repeat:no-repeat;

}

.photobox a img {

Border:none;

}

ممکن است که آرایه سایه برجسته ظریفی که در حاشیه های تصویر بکار می برید توجه کرده باشید.در قسمتی سایه برجسته از تصویر زمینه برچسب <div> است.

در روش های CSS مشابه نیز سایه های برجسته با شدت متغیر وجود دارد و ساختن آنها تنها به داشتن ایده و اندکی ابتکار نیازمند است.

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

 

الهام گرفتن

یکی از هیجان انگیز ترین مسائل برای یک طراح در این مرحله از تکامل وب سایت ها حس جمعی و تعامل موجود بین حرفه ای ها است.همیشه روی هر سایت خبری،وبلاگ یا فرم مرتبط با طراحی افرادی هستند که تمایل به تعادل ایده ها و روش های خود دارند.هرچند که جامعه طراحان یک منبع غیر قابل ارزش گذاری است ولی گاهی کمک گرفتن از آن غیر ضروری به نظر می رسد.همیشه تعداد بسیاری از طراحان توانا می باشند که بصورت آنلاین ایده ها و نمونه مار خود را ارائه می دهندفایده گرفتن از طریق همکاران طراح کاری بسیار ساده است.ایم امر کار بدی نیست ولی اگر قرار بود همه طراحان وب ایده های خود را از سایران طراحان بگیرند در نهایت همه به ایده های یکسان می رسند.

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

1396-05-19 14:25 مقالات آموزشی

مشاوره رایگان جهت طراحی سایت؟