معرفی css 3

[pouya saadeghi]

معرفی css 3 + کدهای جدید

​

سلام.
این تاپیک برای معرفی

ویژگی های CSS 3 است.

( این لینک برای اونایی که نمیدونن CSS چیه )

با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن

، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم.

شناسایی Attribute (ویژگی) تگ
در CSS 2 ویژگی معرفی شد که میشد تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:

img[alt=picture]{border:2px solid #FF0000;}

در کد بالا فقط IMG هایی که ویژگی ALT با متن "picture" براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن.


حالا در CSS3 این ویژگی گسترده تر شده:

a[href^="ftp:"]{color:#00FF00;}

در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!

a[href$=".org"]{color:#FF00FF;}

در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن...

img[alt*=pouya]{border:2px solid #FFFF00;}

در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه بوردر زرد میگیرن.





نویسنده : پویا صادقی

برای تشکر از دکمه

استفاده کنید و فقط اگه سوال دارید پست بدین!

 

[pouya saadeghi]

خوب. یکسری کد های CSS3 فعلا فقط در مرورگر های با موتور Gecko و Webkit مثل کروم / سافاری / فایرفاکس کارمیکنن! (اپرای جدید رو نمیدونم...)
به هر حال...

ریشه

:root{background-color:#999999;}

این کد المنت ریشه صفحه رو بهش بکگراند خاکستری میده. (اون المنتی که بقیه المنت ها داخلش قرار میگیرن)
حالا چه div باشه چه html باشه چه تیبل خدابیامرز lol فرق نمیکنه ...


فرزند اول و فرزند آخر!!

p:first-child{background-color:#FF6600;}

کد بالا چیکار میکنه؟
اگه چند تا پاراگراف داشته باشیم، بکگراند اولین پاراگراف رو نارنجی میکنه. ( البته استفادش فقط پاراگراف نیست ها!! )

p:last-child{background-color:#FF6600;}

کد بالا هم از بین پاراگراف ها ، بکگراند اون آخریه (فرزند آخر) رو نارنجی میکنه...



NOT

div:not([class=style1]){background-color:#FF0000;}

خاصیت Not ویژگی مورد نظر رو منفی میکنه. مثلا در کد بالا تمام Divهایی که کلاس style1 ندارن بکگراند قرمز خواهند داشت.



عناصر متوالی

h1 ~ h2{background:#666666;}

کد بالا رنگ بکگراند H2هایی که بعد از H1 بیایند رو خاکستری میکنه.

h1 + h2{background:#666666;}

کد بالا رنگ بکگراند H2هایی که بلافاصله بعد از H1 بیایند رو خاکستری میکنه.

برای تشکر از دکمه

استفاده کنید و فقط اگه سوال دارید پست بدین!

 

[pouya saadeghi]

گوشه های گرد

Border های گرد

border-radius برای گرد کردن گوشه ها (بدون هیچ دنگ و فنگی) معرفی شده.
البته به خاطر این که بعضی مرورگرها (مثل IE ) مثل اینکه زیاد از CSS خوششون نمیاد (!!) و کدهای جدید رو پشتیبانی نمیکنن، Webkit و Gecko کدهای اختصاصی واسه خودشون درست کردن:
برای موزیلا فایرفاکس:

-moz-border-radius: 5px;

برای گوگل کروم و اپل سافاری:

-webkit-border-radius: 5px;

و اینم کدی که قرار بوده همه مرورگرها ازش پشتیبانی کنن:

border-radius: 5px;

(برای احتیاط هر سه کد رو استفاده کنید.)

اگه مثلا میخواین گوشه ی بالا راست گرد بشه:

-moz-border-radius-topright;
-webkit-border-top-right-radius;

*دقت کنید که طرز قرارگیری کلمه Topright برای Webkit و Gecko فرق میکنه.



این هم برای بقیه گوشه ها (+ معادل کد در Webkit)

-moz-border-radius-topleft ; -webkit-border-top-left-radius;
-moz-border-radius-topright ; -webkit-border-top-right-radius;
-moz-border-radius-bottomleft ; -webkit-border-bottom-left-radius;
-moz-border-radius-bottomright ; -webkit-border-bottom-right-radius;

برای تشکر از دکمه

استفاده کنید و فقط اگه سوال دارید پست بدین!

 

[pouya saadeghi]

گرادیان در Border

این خاصیت فقط در موزیلا فایرفاکس پشتیبانی میشه (البته فعلا)
این کد بوردر رو به صورت گرادیان نمایش میده.
کاربران فایرفاکس کد زیر رو اینجوری میبینن:

border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;

البته شما میتونید رنگ های دیگه براش بذارید

-----------


تصویر در Border

همونجوری که در Word کادر های مختلف برای صفحه تون درست میکنید،
از این به بعد میتونید تو صفحات وب هم از این کادر ها استفاده کنید:

این کد در گوگل کروم ، اپل سافاری و موزیلا فایرفاکس کار میکنه (خدا عاقبت کاربران IE رو بخیر کنه )

کد هایی که میتونید استفاده کنید:


عکس های بالا ، راست ، پایین و چپ کادر:

border-top-image:url(border.png) 27 27 27 27 round round;
border-right-image:url(border.png) 27 27 27 27 round round;
border-bottom-image:url(border.png) 27 27 27 27 round round;
border-left-image:url(border.png) 27 27 27 27 round round;

وبکیت

-webkit-border-top-image:url(border.png) 27 27 27 27 round round;
-webkit-border-right-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-image:url(border.png) 27 27 27 27 round round;
-webkit-border-left-image:url(border.png) 27 27 27 27 round round;

موزیلا

-moz-border-top-image:url(border.png) 27 27 27 27 round round;
-moz-border-right-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-image:url(border.png) 27 27 27 27 round round;
-moz-border-left-image:url(border.png) 27 27 27 27 round round;

کد های گوشه های کادر:

border-top-left-image:url(border.png) 27 27 27 27 round round;
border-top-right-image:url(border.png) 27 27 27 27 round round;
border-bottom-left-image:url(border.png) 27 27 27 27 round round;
border-bottom-right-image:url(border.png) 27 27 27 27 round round;

وبکیت

-webkit-border-top-left-image:url(border.png) 27 27 27 27 round round;
-webkit-border-top-right-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-left-image:url(border.png) 27 27 27 27 round round;
-webkit-border-bottom-right-image:url(border.png) 27 27 27 27 round round;

موزیلا

-moz-border-top-left-image:url(border.png) 27 27 27 27 round round;
-moz-border-top-right-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-left-image:url(border.png) 27 27 27 27 round round;
-moz-border-bottom-right-image:url(border.png) 27 27 27 27 round round;

حتی میتونید عکس حاشه رو استرچ کنید:

border-image: url(border.png) 27 27 27 27 stretch stretch;
-webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;
-moz-border-image: url(border.png) 27 27 27 27 stretch stretch;

باکس های سایه دار

(اینم فقط برای کروم / سافاری / فایرفاکس)

با این کد میتونید برای المنت هاتون سایه بذارید وبرای اینکار دیگه نیازی به استفاده از تصاویر نیست

از ویژگی های این کد تنظیم بلور ، رنگ و مکان سایه است:

box-shadow: 10px 10px 5px #888; 
-moz-box-shadow: 10px 10px 5px #888; 
-webkit-box-shadow: 10px 10px 5px #888;

10 پیکسل پایینتر ، 10 پیکسل به راست ، 5 پیکسل بلور ، رنگ خاکستری (888#)

 

[pouya saadeghi]

Web Fonts

اگه بخواین از یه فونت خوشگل تو قالبتون استفاده کنید چیکار میکنید؟ تبدیلش میکنید به عکس؟ از جاوا اسکریپت استفاده میکنید؟ یا کلا بیخیال میشید؟
یکی از ویژگی های CSS3 استفاده ازفونت های خاص بدون نیاز به نصب روی سیستم کاربر است.
البته فقط مرورگر سافاری ازش پشتیبانی میکنه و ما منتظر نسخه های جدید کروم و فایرفاکس هستیم...

CSS:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

HTML:

h3 { font-family: Delicious, sans-serif; }

یه مثال دیگه:

@font-face { 
  font-family: 'Junction'; 
  src: url(Junction02.otf); 
}
@font-face { 
  font-family: 'LeagueGothic'; 
  src: url(LeagueGothic.otf); 
}
@font-face { 
  font-family: 'GG250'; 
  src: url(General250.otf); 
}

header {
  font-family: 'LeagueGothic';
}

*برای اطمینان فقط از فونت های OTF استفاده کنید. از لینک زیر فونت های TTF رو به OTF تبدیل کنید. (البته با IP ایران وارد نشید)


(تبدیل فونت های TTF به OTF )
(کدوم مرورگرها چه نوع فونتهایی رو ساپورت میکنن؟)

 

[pouya saadeghi]

رنگ ها

رنگبندی با مدل رنگ HSL
با این وِیژگی میتونید مثل فتوشاپ از طریق خاصیت های Hue, Saturation, Lightness رنگتونو تغییر بدید:

HSL=Hue, Saturation, Lightness
​

background-color: hsl(0,100%, 50%);

رنگبندی با مدل رنگ HSLA

همون HSL هست که آخرش یه مقدار Alpha channel هم داره:

background-color: hsla(0,100%,50%,0.2);

رنگبندی با مدل رنگ RGBA
رنگبندی RGB روکه میشناسین؟(Red Green Blue)
این هم اخرش مقدار آلفا داره که میشه تنظیمش کرد:

<div style="background: rgba(255, 0, 0, 0.2);"></div> <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div>

یه همچین چیزی میشه:

Opacity

اینم که شفافیت هر المنت رو تنظیم میکنه:

opacity: 0.6;

برای تشکر لطفا از دکمه

استفاده کنید و فقط اگه سوال دارید پست بدین!

 

[pouya saadeghi]

ستون بندی


برای ستون بندی محتوا از جدول استفاده میکنید؟ برای هر ستون یه Div میذارید ؟ اگه محتوا متغییر باشه چی؟

-moz-column-width: 13em; -webkit-column-width: 13em;

کد بالا Div شما رو به ستون هایی با طول 13em تقسیم میکنه.



اینم خرت و پرت هاش:

فاصله بین ستون ها:

-moz-column-gap: 1em; -webkit-column-gap: 1em;

تعداد ستون ها:

-moz-column-count: 3; -webkit-column-count: 3;

ایجاد خط بین ستون ها:

-moz-column-rule: 1px solid black; -webkit-column-rule: 1px solid black;

 

[scup]

ایول بابا ترکوندی که...
فک کنم سه چهار روزی طول میکشه تا یاد بگیرم...دستت درد نکنه

 

[pouya saadeghi]

متن سایه دار
متن سایه دار در بیشتر مرورگرها پشتیبانی میشه حتی Opera Mini !

text-shadow: 2px 1px 3px #000;

در کد بالا 2 پیکسل عمودی ، 1 پیکسل افقی و 3 پیکسل بلور با رنگ مشکی تنظیم شده.

جلوه های ویژه: با این ویژگی حتی میشه چند تا سایه به متن داد! (به کوری چشم فتوشاپ! )

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

که میشه این:

متن شکسته

Word-wrap خاصیتیه که توی نرم افزار های پردازش متن ، درصورتیکه طول متن زیادبشه بقیه متن رو به خط بعدی انتقال میده.

word-wrap:normal;

این در حالت عادی.

word-wrap:  break-word;

این هم برای شکستن متن اضافه به خط بعد.

 

[pouya saadeghi]

چند بکگراند

شما می تونید از چند بکگراند برای یک المنت استفاده کنید! مثلا یکی برای پایین ، یکی برای بالا، یکی چپ و...


مثال:

background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

البته فعلا فقط در موتور های webkit و KHTML پشتیبانی میشه (گوگل کروم ، اپل سافاری ، Konqueror )

 

[pouya saadeghi]

تغییر سایز بکگراند



فرض کنید برای یک المنت بکگراند گذاشتید ولی سایز بکگران مناسب نبود.(یا کوچیک بود یا بزرگ....)

با این ویژگی میتونید سایز عکس بکگراند رو تغییر بدید:

background-size: 200px 50px;-o-background-size: 200px 50px; -webkit-background-size: 200px 50px; -khtml-background-size: 200px 50px;

* کدی که اولش -o- داره مربوط به مرورگر Opera هه و اون که اولش -khtml- داره مربوط به مرورگر Konqueror در لینوکسه.

 

[pouya saadeghi]

Scale & Rotate & Skew

چرخش
با این ویژگی میتونید هر المنتی رو تا 360 درجه بچرخونید!

در مرورگرهای مبتنی بر وبکیت و گکو (گوگل کروم/ فایرفاکس/ سافاری ) پشتیبانی میشه.

-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);

scale
به راحتی اندازه طول و عرض اجزای صفحه رو تغییر بدید:

-webkit-transform: scale(1.25, 0.5);
-moz-transform: scale(1.25, 0.5);
transform: scale(1.25, 0.5);

*از این خاصیت ها میتونید همزمان استفاده کنید.مثل:

-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);

skew
این یکی فقط برای وبکیت (گوگل کروم و اپل سافاری)
برای تغییر زاویه های المنت ها:

-webkit-transform:skew(-300deg);

 

[eAmin]

سلام.

این هم یک انیمیشن که نشون دهنده ی قابلیتهای CSS 3 هست، البته فقط در مرورگرهای Apple Safari و chrome قابل مشاهده خواهد بود!
http://anthonycalzadilla.com/css3-ATAT/index.html

موفق باشید.

 

[pouya saadeghi]

4 تا از نمونه های CSS3 رو براتون میذارم که با همین Scale و Rotate و Skew و text-shadow و... ساخته شده.

ترجیحا با کروم یا سافاری ببینید( اگه ندارید با فایرفاکس.) و اگه Internet explorer دارید که اصلا نبینید!!!!!

افکت سایه برای متن:
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html


افکت سوختن متن با گاز!!
http://www.zachstronaut.com/lab/cooking-with-gas.html


تغییر Skew و Rotate و Scale
http://tekkie.flashbit.net/tmp/css3_transform_sample.html

اینم بعد سوم در وب!!
http://www.zachstronaut.com/lab/isocube.html

 

[pouya saadeghi]

برای اینکه دقیقا بدونید کدوم ویژگی های CSS3 در کدوم مرورگرها قابل اجراست به سایت زیر مراجعه کنید:
http://www.quirksmode.org/css/contents.html

------------------------------

جابجایی عناصر
برای وبکیت:

-webkit-transform: translate(-50px,30px);

hover

همونطور که برای لینک ها به صورت: a:hover خواصی رو( برای وقتی که موس بر روی لینک حرکت می کند) قرار میدهیم ،
در CSS3 از hover برای هر المنتی میشه استفاده کرد و دیگه نیازی به جاوااسکریپت(onmouseover) نیست

#div1:hover{background-color:#0000FF;}

برای ساخت حالت انیمیشن از کد زیر استفاده میشه:

-webkit-transition: all 1s ease-in-out;

مثال:

#div1{
width:200px; height:200px;
background-color:#00FFFF;
-webkit-transition: all 1s ease-in-out;}
#div1:hover{
background-color:#FF6600;
-webkit-transform: rotate(360deg) scale(2);}

در کد بالا div1 که طول و عرض 200 پیکسلی و بکگراند آبی داره، با حرکت موس 360 درجه میچرخه و بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.





حتما کدها رو تست کنید

 

[pouya saadeghi]

outline

پشتیبانی توسط : گوگل کروم / اپل سافاری / موزیلا فایرفاکس / اپرا


outline درواقع یه بوردر خارجی برای عناصر صفحه است.
فرقش با border اینه که بیرون بوردر قرار میگیره و تغییری در مکان و موقعیت عناصر دیگه نداره.



Outline بیست پیکسل قرمز :

outline: 20px solid #FF0000;

بیست پیکسل Outline قرمز + ده پیکسل border زرد :

outline: 20px solid #FF0000; border:#FFFF00 solid 10px;

یه کد دیگه هم داره که بشه فاصله outline رو با آبجکت تعیین کرد:

outline-offset: 12px;

که outline رو بافاصله 12 پیکسل دور آبجکتمون قرار میده...




( نمونه استفاده از Outline )

 

[pouya saadeghi]

سطر های گورخری!!

سطر های گورخری!!

از این خاصیت برای دسترسی به المنت های زوج یا فرد استفاده می کنیم
مثلا ما n تا div داریم که میخوایم سطر های فرد سفید باشه و سطر های زوج بنفش باشه:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.row div:nth-child(even) {
  background: #dde;
}
.row div:nth-child(odd) {
  background: white;
}

</style>
</head>

<body>

<div class="row">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>

</div>

</body>
</html>

 

[pouya saadeghi]

رنگ بندی fill و stroke برای Webkit


در مروگرهای کروم و سافاری میتونید به متن ، رنگ و استروک اضافه کنید:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 3.50px;  
}

 

[pouya saadeghi]

گرادینت

گرادینت برای webkit
با این خاصیت میشه gradient برای المنت ها ایجاد کرد
2 نوع گرادینت داریم: linear و radial
این فرمول کلی کد:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

type نوع گرادینته
point مختصات
radius شعاع گرادینت در نوع radial هستش
stop (اختیاری) رنگ 2 آرگومان میگیره: یه عدد (بین 0 تا 1) و یه رنگ

linear
مثال:

body{background:
-webkit-gradient(linear, left top, left bottom, 
from(orange), to(black));}

کد بالا از رنگ نارنجی تا سیاه رو ایجاد میکنه

میتونیم یه گرادینت دیگه هم اضافه کنیم:
(با اضافه کردن 2 مقدار color-stop به انتهای کد)

body{background:
-webkit-gradient(linear, left top, left bottom, 
from(orange), to(black),
color-stop(0.5, white), color-stop(0.5, green));}

کد بالا 2 گرادینت ایجاد میکنه: یکی از رنگ نارنجی تا سفید و یکی از سبز تا مشکی
مقدار stop : عدد 0.5 اولی سایز طیف نارنجی تا سفیده و عدد 0.5 دومی سایز طیف سبز تا مشکی
با تغییر این اعداد گرادینت های زیادی میشه ساخت

radial

body{background: -webkit-gradient(radial, 430 50, 0, 430 50, 55, from(red), to(black));}

430 فاصله از چپ
50 فاصله از بالا
0 شعاع اول
55 شعاع دوم

* برای تغییر مختصات ، هر دو 50 وهر دو 430 روتغییر بدید ، چون اولی مختصات منبع نور و دومی مختصات تابش نوره
*برای بزرگ کردن دایره گرادینت کافیه شعاع دوم(55) که شعاع تابش نوره رو تغییر بدیم

با تغییر شعاع ها و مختصات، میتونیم گرادینت های زیادی خلق کنیم:

body{background: -webkit-gradient(radial, 430 150, 2, 430 5, 55, from(red), to(#000));}

body{background: -webkit-gradient(radial, 430 15, 0, 5 5, 505, from(white), to(green));}

body{background: -webkit-gradient(radial, 500 150, 50, 650 50, 120, from(orange), to(#000000));}

body{background: -webkit-gradient(radial, 550 150, 50, 550 50, 10, from(#FFFF00), to(#000000));}

اطلاعات بیشتر : سایت Webkit.org


*این کدها فقط برای وبکیت کارمیکنن مرورگرهای گوگل کروم و اپل سافاری

 

[pouya saadeghi]

box-reflect

با گرادینت میتونیم یه افکت reflect ساده با CSS ایجاد کنیم:

کد:

-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));

مثال:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pasargad-graphic.com</title>
<style type="text/css">

body {
background-color: #e6eaed;
}

img{-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
border:1px solid #999999;}


</style>
</head>

<body>

<img src="http://bit.ly/dwDU3S"> <img src="http://bit.ly/bY4gHG">

</body>
</html>