خانه \\ Responsive Web Design \\ بخش نهم – طراحی وب واکنش گرا ، CSS3

  • بخش نهم – طراحی وب واکنش گرا ، CSS3
بخش نهم – طراحی وب واکنش گرا ، CSS3
1395/02/02 - 19:47:34 // Responsive Web Design // 0 نظر // 2680 بازدید

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

بخش نهم – طراحی وب واکنش گرا ، CSS3

چند ستونی

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

 
 
 
 
در این لیست مورد نظر شما تعداد ستون ها را به 2 تنظیم می کنید بنابراین محتوی بصورت دو ستون در خواهد آمد . و در ادامه شما فاصله ی بین دو ستون یا همان column-gap را به میزان 10 پیکسل تعیین می کنید. در ضمن توجه کنید که برای مرورگرهای خاصی که نیاز به کدی مجزا دارند شما پیشوند مربوط به آن مرورگر را می نویسید . نتیجه ی کد بالا و نمایش پاراگراف مورد نظر را در تصویر زیر می بینید :

 
 
 
 
پنل های گرادیانت دار ( کم شدن تدریجی شفافیت )

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

 
 
 
 
 
شما می توانید نتیجه ی این گرادیانت را در تصویر زیر ملاحظه نمایید

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

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

شاد و سلامت باشید

محمد جعفری فوتمی

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

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

امتیاز به مطلب
           
مطالب مرتبط
نظرات کاربران
ارسال نظر