10 خصوصیت CSS3 که شما باید با آن آشنا باشید - سری CSS3 Mastery
این آموزش ترجمه شده از مطلب Jeffrey Way از برترین آموزش دهنده های برنامه نویسی در tutplus است.
این آموزش از سری CSS Mastery است که تلاش میشود به مرور ترجمه شود.
سعی میکنم در این ترجمه خودمونی تر حرف بزنم که حالت رسمی و خسته کننده نداشته باشه.
10 خاصیته.هر سه خاصیت را هم در یک تاپیک قرار میدم چون هر کدوم واقعتا طولانیه.
در کل سه الی 4 تاپیک پشت سر هم.لطفا بعد از اتمام خواستید نظر بدید که نظمش به هم نخوره.
شروع:
ابتدا باید مشخص کنید که درصورتی که وبسایتتون در مرورگر های مختلف یکمی تفاوت داشته باشه با دیگر مرورگر ها،مشکلی ندارید ؟ .یعنی مثلا اگر بدونید IE 9 بجای نرم کردن گوشه های اشیاء ، اونها را 90 درجه و تیز نشون میده، باز هم مشکلی ندارید ؟
این دیگه بسته به شماست برای استفاده از خواص جدید.
البته این را باید بدونیم که نباید انتظار داشته باشیم وبسایت در تمامی مرورگر ها به یک شکل دیده باشه.
راستی،در قسمت نتیجه گیری،ما یک پروژه جالب را انجام میدیم.
1-border-radius
در واقع محبوبترین خاصیت CSS3 در این گروه خواص است.این خاصیت یک حالت رئیس مانند داره برای بقیه خواص.البته که خیلی از طراحا هنوزم وقعا وحشت دارن از اینکه یک کاری انجام بدند که قالب سایت در مرورگر های مختلف دچار مشکل بشه.
مثل همون قضیه گوشه گرد که اونها را به اشتباه فریب داده.
چیز خنده دار این هست که در مورد جایگزین برای نمایش سایت در پلتفرم های موبایل نظر یکسان و خوبی داریم.اما وقتی سر صحبت درباره desktop باز میشه، انگار همه موافق نیستیم.
کد:
-webkit-border-radius: 4px;-moz-border-radius: 4px;
border-radius: 4px;
دموی نتیجه
البته این را به یاد داشته باشیم که safari 5 و IE 9 از این خاصیت پشتیبانی می کنند.
ساخت دایره
شاید بعضی ها نمی دونستن که میشه با این خاصیت دایره هم ساخت.
کد:
-moz-border-radius: 50px;-webkit-border-radius: 50px;
border-radius: 50px;
حالا اگر بخوایم یک یک کاره جالب انجام بدیم.ما متیونیم ار خواص جعبه Flexible که در شماره 8 هم توضیح میدیم،استفاده کنیم.
می خواهیم بصورت عمودی و افقی متن را در وسط دایره قرار بدیم.
یکم کد زدن می خواهد چون باید مشکل یکسان نبودن مرورگر های مختلف در نمایش اجزاء را ،ما جبران کنیم.
دموی نتیجه
کد:
display: -moz-box;display: -webkit-box;
display: box;
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
2-box-shadow
خوب حالا نوبت به box-shadow میرسه که همه جا حضور داره.با این خاصیت شما میتونید به عنصرتون عمق بدید.
کد:
-webkit-box-shadow: 1px 1px 3px #292929;-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
دموی نتیجه
box-shadow چهار پارامتر داره که باید بهش مقدار بدید.
- x-offset
- y-offset
- blur
- color of shadow
البته خیلی از افراد نمیدونن میشه چند تا box-shadow در یک زمان استفاده کرد.یکی افکت های خیلی جالبی میشه باش ایجاد کرد.
در دموی زیر من از سایه آبی و سبز استفاده کردم تا هر سایه بزگتر جلوه دهد.
کد:
-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;
دموی نتیجه
سایه های هوشمند
در مثال زیر، از شبکه کلاس های ::before و ::after استفاده شده تا یک جلوه خیلی جذابی را دست کنیم.به این شکل:
کد html:
کد:
<div class="box">
<img src="tuts.jpg" alt="Tuts" />
</div>
کد CSS:
کد:
.box:after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
/* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% (see width above) */
height: 100px;
bottom: 0;
}
دموی نتیجه
بزودی پستی در مورد افکت های بیشتر text-shadow هم قرار داده میشود.
3-text-shadow:
یک دیگر از خواص CSS3 که میتوان پیشوند های مرورگر های مختلف را ننوشت،همین text-shadow هست.در این مورد کاملا به box-shadow شباهت دارد.
البته روی متن اعمال میشود و مثل قبلی همان 4 پارامتر را میپذیرد.
x-offset
y-offset
blur
color of shadow
کد:
h1 { text-shadow: 0 1px 0 white;
color: #292929;
}
دموی نتیجه
Test-Outline
مثل برادرش یعنی box-shadow ، شما میتونید چند خاصیت همزمان test-shadow را استفاده کرد.فقط با جدا کردن به کاما.
برای مثال ما میخوایم یک افکت ضمینه برای متن ایجاد کنیم.
کد:
body { background: white; }
h1 {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: white;
}
دموی نتیجه
قسمت اول
- - - Updated - - -
4-Test-Stroke
درا ستفاده از این متد دقت کنید.زیرا فقط -webkit پشتیبانی میشود.یعنی safari , chrome , iphone فعلا پشتیبانی میشود.
ممکنه من در مورد اینکه این خاصیت الان اشتباه کرده باشم.شاید هنوز جزء خواص اصلی CSS3 حساب نشه.مثلا اگر روی یک متن سفید درفایر فاکس این کار را انجام بدید،یک صفحه سفید مشاهده میکنید.
کد:
h1 { -webkit-text-stroke: 3px black;
color: white;
}
دموی نتیجه
5-استفاده از چند پس زمینه همزمان
خاصیت background پیاده سازی شده تا بتوان چند پس زمینه در css3 استفاده کرد.در ایمن مثال شما به سادگی با این مفهوم چند زمینه ای آشنا میشوید.
در این مثال از دو عکس آموزشی استفاده شده.البته که شما در پروژه واقعی از texture یا pattern یا چیزهای اینطوری استفاده می کنید.
کد:
.box {background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
دموی نتیجه
در مثال بالا با استفاده از کاما دستورات از هم جدا شده.
در مثال اول اگر دقت کنید خاصیت postion (0,0) بالا چپ شده و بعدی بالا راست (100%,0) شده.
6-background-size
تا حالا،ما از تکنیک های آب زیر کاهی برای تغییر اندازه عکس پس ضمینه استفاده میکردیم.
کد بالا عکس پس زمینه را به اندازه تمامی فضای خالی کش میدهد.
حالا مثلا ما می خوایم کاری بکنیم که عکس پس ضمین به اندازه عنصر body تغییر اندازه دهد.
کد:
body, html { height: 100%; }
body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}
تمام کار همین بوداین خاصیت دو پارامتر x , y عریض بودن را میگیرد.
آخرین ورژن chrome و safari این خاصیت را پشتیبانی می کنند.اما برای ورژن های قدیمی ما باید هنوز از پیشوند های مرورگر های مختلف استفاده کنیم.
کد:
body { background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
دموی نتیجه
7-خاصیت text-overflow
که توسط مرورگر internet explorer توسعه داده شده.این خاصیت دو پارامتر میگیرد.
این خاصیت متنی که از حد تعریف شده جعبه یا container تجاوز کند را قطع می کند.البته که به کاربر نشانه ای از وجود بقیه متن میدهد.یک حالت تو انداخته.
کد:
.box {
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
دموی نتیجه
