معرفی css 3

وضعیت
موضوع بسته شده است.

pouya saadeghi

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

css-icon.png

سلام.
این تاپیک برای معرفی
interview.gif
ویژگی های CSS 3 است.

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

با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن
146fs495919.gif
، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم.
2.gif



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

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

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


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

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

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

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

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


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

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





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

برای تشکر از دکمه
post_thanks.gif
استفاده کنید و فقط اگه سوال دارید پست بدین!
 
آخرین ویرایش:

pouya saadeghi

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

ریشه

HTML:
:root{background-color:#999999;}
این کد المنت ریشه صفحه رو بهش بکگراند خاکستری میده. (اون المنتی که بقیه المنت ها داخلش قرار میگیرن)
حالا چه div باشه چه html باشه چه تیبل خدابیامرز :)lol:) فرق نمیکنه ...


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

HTML:
p:first-child{background-color:#FF6600;}
کد بالا چیکار میکنه؟
اگه چند تا پاراگراف داشته باشیم، بکگراند اولین پاراگراف رو نارنجی میکنه. ( البته استفادش فقط پاراگراف نیست ها!! )

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

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



NOT

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

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



عناصر متوالی

HTML:
h1 ~ h2{background:#666666;}

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


HTML:
h1 + h2{background:#666666;}

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




برای تشکر از دکمه
post_thanks.gif
استفاده کنید و فقط اگه سوال دارید پست بدین!
 
آخرین ویرایش:

pouya saadeghi

Active Member
گوشه های گرد

Border های گرد

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

اگه مثلا میخواین گوشه ی بالا راست گرد بشه:
HTML:
-moz-border-radius-topright;
-webkit-border-top-right-radius;

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



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

HTML:
-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;




برای تشکر از دکمه
post_thanks.gif
استفاده کنید و فقط اگه سوال دارید پست بدین!
 
آخرین ویرایش:

pouya saadeghi

Active Member
گرادیان در Border

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


HTML:
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;
البته شما میتونید رنگ های دیگه براش بذارید
128fs318181.gif



-----------


تصویر در Border

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



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

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


عکس های بالا ، راست ، پایین و چپ کادر:
HTML:
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;
وبکیت
HTML:
-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;
موزیلا
HTML:
-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;


کد های گوشه های کادر:
HTML:
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;
وبکیت
HTML:
-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;
موزیلا
HTML:
-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;

حتی میتونید عکس حاشه رو استرچ کنید:
borderimgbycss3-2.PNG

HTML:
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;


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

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

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

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

HTML:
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

Active Member
Web Fonts

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

CSS:
HTML:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
HTML:
HTML:
h3 { font-family: Delicious, sans-serif; }


یه مثال دیگه:

HTML:
@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 ایران وارد نشید:sad:)


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

pouya saadeghi

Active Member
رنگ ها

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

HSL=Hue, Saturation, Lightness
HTML:
background-color: hsl(0,100%, 50%);

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

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

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

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

HTML:
<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>
یه همچین چیزی میشه:
524.jpg



Opacity

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

HTML:
opacity: 0.6;




برای تشکر لطفا از دکمه
post_thanks.gif
استفاده کنید و فقط اگه سوال دارید پست بدین!
 
آخرین ویرایش:

pouya saadeghi

Active Member
ستون بندی


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


HTML:
-moz-column-width: 13em; -webkit-column-width: 13em;
کد بالا Div شما رو به ستون هایی با طول 13em تقسیم میکنه.



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

فاصله بین ستون ها:
HTML:
-moz-column-gap: 1em; -webkit-column-gap: 1em;
تعداد ستون ها:
HTML:
-moz-column-count: 3; -webkit-column-count: 3;
ایجاد خط بین ستون ها:
HTML:
-moz-column-rule: 1px solid black; -webkit-column-rule: 1px solid black;
:cool:
 

pouya saadeghi

Active Member
:wink: متن سایه دار
متن سایه دار در بیشتر مرورگرها پشتیبانی میشه حتی Opera Mini ! :shock:

HTML:
text-shadow: 2px 1px 3px #000;
در کد بالا 2 پیکسل عمودی ، 1 پیکسل افقی و 3 پیکسل بلور با رنگ مشکی تنظیم شده.:cool:

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

HTML:
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
که میشه این:
firebycss3.PNG







متن شکسته

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

HTML:
word-wrap:normal;
این در حالت عادی.


HTML:
word-wrap:  break-word;
این هم برای شکستن متن اضافه به خط بعد.
 
آخرین ویرایش:

pouya saadeghi

Active Member
چند بکگراند

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


مثال:
HTML:
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

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



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

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

HTML:
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

Active Member
Scale & Rotate & Skew

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

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

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



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

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


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

HTML:
-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
این یکی فقط برای وبکیت (گوگل کروم و اپل سافاری)
برای تغییر زاویه های المنت ها:

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



:wink:
 
آخرین ویرایش:

pouya saadeghi

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

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

افکت سایه برای متن:
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

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

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

جابجایی عناصر
برای وبکیت:
HTML:
-webkit-transform: translate(-50px,30px);




hover

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

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


برای ساخت حالت انیمیشن از کد زیر استفاده میشه:
HTML:
-webkit-transition: all 1s ease-in-out;

مثال:

HTML:
#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 درجه میچرخه و بکگراندش نارنجی میشه و سایزش هم دوبرابر میشه.:neutral:





حتما کدها رو تست کنید:wink:
 
آخرین ویرایش:

pouya saadeghi

Active Member
outline

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


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



Outline بیست پیکسل قرمز :
HTML:
outline: 20px solid #FF0000;



بیست پیکسل Outline قرمز + ده پیکسل border زرد :
HTML:
outline: 20px solid #FF0000; border:#FFFF00 solid 10px;



یه کد دیگه هم داره که بشه فاصله outline رو با آبجکت تعیین کرد:
HTML:
outline-offset: 12px;
که outline رو بافاصله 12 پیکسل دور آبجکتمون قرار میده... :cool:




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

pouya saadeghi

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

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

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

HTML:
<!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

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


در مروگرهای کروم و سافاری میتونید به متن ، رنگ و استروک اضافه کنید:
HTML:
div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 3.50px;  
}
 
آخرین ویرایش:

pouya saadeghi

Active Member
گرادینت

گرادینت برای webkit
با این خاصیت میشه gradient برای المنت ها ایجاد کرد
2 نوع گرادینت داریم: linear و radial
این فرمول کلی کد:
HTML:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

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

linear
مثال:
HTML:
body{background:
-webkit-gradient(linear, left top, left bottom, 
from(orange), to(black));}
کد بالا از رنگ نارنجی تا سیاه رو ایجاد میکنه
1gradcss3.jpg



میتونیم یه گرادینت دیگه هم اضافه کنیم:
(با اضافه کردن 2 مقدار color-stop به انتهای کد)
HTML:
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 دومی سایز طیف سبز تا مشکی
با تغییر این اعداد گرادینت های زیادی میشه ساخت
2gradcss3.jpg





radial

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

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

1.jpg


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

2.jpg


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

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

3.jpg




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

4.jpg




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

5.jpg




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

6.jpg





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


*این کدها فقط برای وبکیت کارمیکنن :cool: مرورگرهای گوگل کروم و اپل سافاری
 
آخرین ویرایش:

pouya saadeghi

Active Member
box-reflect

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

reflect.jpg


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

مثال:
HTML:
<!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>
 
وضعیت
موضوع بسته شده است.

جدیدترین ارسال ها

بالا