ستون های چندگانه در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

css3-techniques-27

با استفاده از Css3 می توانیم چند ستون برای یک متن کلی همانند روزنامه ایجاد کنید . به صفحات روزنامه دقت کرده اید ؟ ادامه متن در یک ستون دیگر قرار می گیرد .
در ادامه روش انجام اینکار در Css آموزش داده می شود . 
اینترنت اکسپلورر 100 ، فایرفاکس ، کروم ، سافاری و اوپرا از این ویژگی پشتیبانی می کند . 
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.

ایجاد ستون های چندگانه با CSS3
متغیر column-count تعیین میکند که نوشته باید به چند قسمت تقسیم شود .

 

div
{
         -moz-column-count:3; /* Firefox */
         -webkit-column-count:3; /* Safari and Chrome */
         column-count:3;
}

 

 کد اصلی قسمت بالا . (برای مشاهده دمو کد بالا را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید و تغییرات را در مرورگر مشاهده کنید )


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
.newspaper
{
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
       column-count:3;
}
</style>
</head>
<body>
<p><b>نکته:</b> این ویژگی در اینترنت اکسپلورر نسخه 9 پشتیبانی نمی شود.</p>
<div class='newspaper'>
یکی از ویژگیهای جدید Css3  بوردر (Border) می باشد . در نسخه قبلی Css3  اگر میخواستیم یک کادر با لبه های گرد در قالب وب سایت ایجاد کنیم باید از تصاویری که در پوسته قالب در نرم افزار فتوشاپ طراحی شده بود استفاده می کردیم که بسیار کار زمان بر و خسته کننده ای بود اما در Css3 این ویژگی اضافه شده و طراحان براحتی می توانند یک کادر با لبه های گرد ایجاد کنند .
3 ویژگی در Css3  برای Border اضافه شده است . اول لبه های گرد ، دوم سایه دار کردن کادر و در پایان استفاده از تصاویر به عنوان لبه های کادر کشیده شده که هر کدام را در ادامه با مثال آموزش میدهم .
قبل از استفاده از ویژگیهای جدید طراحان باید بدانند که آیا تمام مرورگرها از این خاصیت های جدید پشتیبانی می کنند یا خیر ؟
اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border- radius پشتیبانی می کنند .
اینترنت اکسپلورر  ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی box-shadow پشتیبانی می کنند .
 فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border-image پشتیبانی می کنند .(اینترنت اکسپلورر از این خاصیت پشتیبانی نمی کند)
نکته مهم :
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.        
</div>
</body>
</html>

 



column-1

تعیین فاصله بین ستون ها با column-gap
با استفاده از column-gap میتوانید بین ستون ها فاصله ایجاد کنید :


div
{
        -moz-column-gap:40px; /* Firefox */
        -webkit-column-gap:40px; /* Safari and Chrome */
        column-gap:40px;
}

 



کد اصلی قسمت بالا . (برای مشاهده دمو کد بالا را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید و تغییرات را در مرورگر مشاهده کنید )


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>نکته:</b> این ویژگی در اینترنت اکسپلورر نسخه 9 پشتیبانی نمی شود.</p>
<div class='newspaper'>
یکی از ویژگیهای جدید Css3  بوردر (Border) می باشد . در نسخه قبلی Css3  اگر میخواستیم یک کادر با لبه های گرد در قالب وب سایت ایجاد کنیم باید از تصاویری که در پوسته قالب در نرم افزار فتوشاپ طراحی شده بود استفاده می کردیم که بسیار کار زمان بر و خسته کننده ای بود اما در Css3 این ویژگی اضافه شده و طراحان براحتی می توانند یک کادر با لبه های گرد ایجاد کنند .
3 ویژگی در Css3  برای Border اضافه شده است . اول لبه های گرد ، دوم سایه دار کردن کادر و در پایان استفاده از تصاویر به عنوان لبه های کادر کشیده شده که هر کدام را در ادامه با مثال آموزش میدهم .
قبل از استفاده از ویژگیهای جدید طراحان باید بدانند که آیا تمام مرورگرها از این خاصیت های جدید پشتیبانی می کنند یا خیر ؟
اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border- radius پشتیبانی می کنند .
اینترنت اکسپلورر  ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی box-shadow پشتیبانی می کنند .
 فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border-image پشتیبانی می کنند .(اینترنت اکسپلورر از این خاصیت پشتیبانی نمی کند)
نکته مهم :
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.        
</div>
</body>
</html>

 



column-2

قوانین ستون های CSS
مقدار column-rule عرض ، حالت و رنگ بین ستون ها را معین می کند .


div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

 

کد اصلی قسمت بالا . (برای مشاهده دمو کد بالا را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید و تغییرات را در مرورگر مشاهده کنید )

 



<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>نکته:</b> این ویژگی در اینترنت اکسپلورر نسخه 9 پشتیبانی نمی شود.</p>
<div class='newspaper'>
یکی از ویژگیهای جدید Css3  بوردر (Border) می باشد . در نسخه قبلی Css3  اگر میخواستیم یک کادر با لبه های گرد در قالب وب سایت ایجاد کنیم باید از تصاویری که در پوسته قالب در نرم افزار فتوشاپ طراحی شده بود استفاده می کردیم که بسیار کار زمان بر و خسته کننده ای بود اما در Css3 این ویژگی اضافه شده و طراحان براحتی می توانند یک کادر با لبه های گرد ایجاد کنند .
3 ویژگی در Css3  برای Border اضافه شده است . اول لبه های گرد ، دوم سایه دار کردن کادر و در پایان استفاده از تصاویر به عنوان لبه های کادر کشیده شده که هر کدام را در ادامه با مثال آموزش میدهم .
قبل از استفاده از ویژگیهای جدید طراحان باید بدانند که آیا تمام مرورگرها از این خاصیت های جدید پشتیبانی می کنند یا خیر ؟
اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border- radius پشتیبانی می کنند .
اینترنت اکسپلورر  ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی box-shadow پشتیبانی می کنند .
 فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border-image پشتیبانی می کنند .(اینترنت اکسپلورر از این خاصیت پشتیبانی نمی کند)
نکته مهم :
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.        
</div>
</body>
</html>


column-3

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:40

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا