تبلیغات ویزه

آخرین ارسال های انجمن

عنوان	پاسخ	بازدید	توسط
برچسب های HTML	1	1039	reza
یک فایل HTML چیست؟	0	598	reza
آموزش برنامه نویسی به زبان HTML	0	555	reza

2D Transfrom یا تبدیل دو بعدی در CSS

          M:A 
            بازدید : 314
          جمعه 25 اسفند 1391
           نظرات (0)
        

2D Transfroms

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

پشتیبانی مرورگر ها
پشتیبانی مرورگر ها
از CSS3 Border

فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .
اینترنت اکسپلورر 9 برای این ویژگی نیاز به پیشوند -ms- دارد .
اوپرا برای این ویژگی نیاز به پیشوند -o- دارد .
تبدیل های دو بعدی در CSS3

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

translate()
rotate()
scale()
skew()
matrix()

شما تبدیل سه بعدی را نیز در درس بعدی یاد میگیرید .

نمونه ( چرخش 30 درجه )

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

متد translate()

با استفاده از متد translate() المنت مورد نظر شما از مکان فعلی خود با استفاده از پارامتر هایی که به آن برای چپ (محور X) و بالا (محور Y) داده میشود حرکت میکند .

نمونه (translate())

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

مقدار translate(50px,100px) المنت را از سمت چپ 50 پیکسل و از سمت بالا 100 پیکسل جابجا می کند. متد rotate()

Rotate

با استفاده از متد rotate() با دادن مقادیر به صورت "درجه" المنت شما میتواند در جهت عقربه های ساعت بچرخد . مقادیر منفی مجاز می باشد و المنت در خلاف عقربه های ساعت می چرخد.

نمونه (rotate())

مقدار rotate(30deg) المنت را 30 درجه در جهت عقربه های ساعت می چرخاند . متد scale()

Scale

با استفاده از scale() میتوانید اندازه یک المنت را زیاد و کم کنید . مقدار آن بستگی به پارامتر هایی دارد که به عنوان عرض ( محور X ) و عرض ( محور Y ) به آن می دهید :

نمونه (rotate())

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

مقدار scale(2,4) یعنی عرض آن دو برابر اندازه اصلی و ارتفاع آن 4 برابر شود . متد skew()

Skew

با متد skew() شما میتوانید المنت را با دادن درجه بچرخانید ، میزان چرخش بستگی به پارامتر های عمودی ( محور X ) و افقی ( محور Y ) دارد .

نمونه (rotate())

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

مقدار skew(30deg,20deg) المنت را 30 درجه حول محور X و 20 درجه حول محور Y می چرخاند . متد matrix()

Rotate

متد matrix() دربردارنده تمامی تبدیل های دو بعدی است .
متد matrix دارای شش پارامتر است ، حاوی توابع ریاضی ، که به شما اجازه میدهد بچرخانید ، بزرگ یا کوچک کنید ، حرکت دهید ، یا آن را کج (خم) کنید . نحوه چرخاندن المنت div با استفاده از متد ماتریکس :

نمونه (چرخاندن المنت div با استفاده از متد ماتریکس)

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */

اضافه کردن فونت در سی اس اس 3

          M:A 
            بازدید : 687
          جمعه 25 اسفند 1391
           نظرات (0)
        

تا قبل از سی اس اس 3 طراحان باید از فونت هایی استفاده میکردند که روی سیستم کاربر نصب شده بود .
با استفاده از سی اس اس شما هر فونتی که دوست داشته باشید را میتوانید ایمپورت کنید و با آن بنویسید .
اگر فونتی دارید یا آن را خریده اید آن را روی سرور میتوانید آپلود کنید و نوشتن خود را با فونت مورد علاقه تان آغاز کنید .
فونت های شما با استفاده از @font-face در سی اس اس 3 شناخته میشوند .

پشتیبانی مرورگر ها
پشتیبانی مرورگر
ها از CSS3 Border

فایرفاکس ، کروم ، سافاری و اپرا از فونت های .ttf و .otf پشتیبانی میکنند .
اینترنت اکسپلورر 9 به بالا از @font-face پیروی میکند ولی فقط از فونت .eot پشتیبانی می کند .
اینترنت اکسپلورر 8 به پایین از @font-face پشتیبانی نمی کند .
استفاده از فونت های مورد علاقه تان

با استفاده از قانون @font-face ابتدا باید یک نام برای فونت خود استفاده کنید (مثلاً vbiran) و بعد آن را به فونت که قبلاً آپلود کرده اید هدایت کنید .
برای نسبت دادن یک فونت به یک المنت باید از font-family استفاده کنید :

نمونه ( ایمپورت فونت BYekan با نام vbiran )

استفاده از فونت درشت

برای درشت کردن ورژن درشت فونت خود را همراه با font-weight:bold; به بخش های قبلی اضافه میکنیم :

نمونه (Bold font)

@font-face
{
font-family: vbiranbold;
src: url('BYekan_Bold.ttf'),
url('BYekan_Bold.eot'); /* IE9+ */
font-weight:bold;
}

معرفی کردن متغیر های فونت

Text Effect یا افکت نوشته در CSS

          M:A 
            بازدید : 212
          جمعه 25 اسفند 1391
           نظرات (0)
        

CSS3 Text Effect

CSS3 جتد ویژگی جدید برای نوشته های زیبای شما دارد !

در این درس شما با ویژگی های زیر آشنا می شوید :

text-shadow
word-wrap

پشتیبانی مرورگر ها
پشتیبانی مرورگر
ها از CSS3 Border

اینترنت اکسپلورر هنوز از text-shadow پشتیبانی نکرده است .
فایرفاکس ، کروم ، سافاری و اپرا از این ویژگی پشتیبانی میکنند .
تمامی مرورگر های شناخته شده از word-wrap پشتیبانی می کنند .
ویژگی text-shadow در CSS3

با استفاده از text-shadow میتوانید به نوشته های خود افکت دهید .
شما میتوانید سایه عمودی ، سایه افقی ، میزان محو بودن و رنگ سایه را تعیین کنید :

نمونه (افزودن سایه به نوشته)

h1 {
text-shadow: 5px 5px 5px #FF0000;
}

ویژگی word-wrapping در CSS3

وقتی یک نوشته از میزان تعیین شده عرض آن بیشتر باشد از آن بیرون می زند :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

با استفاده از سی اس اس 3 و ویژگی word-wrapping میتوانید لغت بسیار بلند را مجبور کنید که کوتاه شود و به خط بعدی برود :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

سی اس اسی که استفاده شد به صورت زیر است :

نمونه (word-wrap)

p {word-wrap:break-word;}

Background یا پیش زمینه در CSS

          M:A 
            بازدید : 289
          جمعه 25 اسفند 1391
           نظرات (0)
        

CSS3 Background

CSS3 جتد ویژگی جدید برای پیش زمینه ها دارد ، که به شما کنترل بیشتری را اهدا میکند .

در این درس شما با ویژگی های زیر آشنا می شوید :

background-size
background-origin

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

پشتیبانی مرورگر ها
پشتیبانی
مرورگر ها از CSS3 Border

فایرفاکس 3.6 و قدیمی تر برای این ویژگی نیاز به پیشوند -moz دارد .
سافاری 4 برای این ویژگی نیاز به پیشوند -webkit دارد .
اینترنت اکسپلورر 9 ، فایرفاکس 4 ، کروم و سافاری 5 و اپرا از ویژگی های جدید بکگراند پشتیبانی می کنند.
ویژگی background-size در CSS3

با استفاده از background-size میتوانید سایز تصویر پیش زمینه را تعیین کنید .
تا پیش از CSS3 ما باید بکگراند ها را ابتدا کوچک میکردیم و سپس آن را استفاده میکردیم . ولی حالا میتوانیم از یک بکگراند در چند سایز مختلف استفاده کنیم .
شما میتوانید از پیکسل (px) یا درصد استفاده کنید .

نمونه (با پیکسل)

div {
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

نمونه (با درصد)

div {
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

ویژگی background-origin در CSS3

در CSS3 از ویژگی background-origin برای مشخص کردن مکان پیش زمینه یا همان بک گراند استفاده میشود .
تصویر پیش زمینه میتواند در قسمت محتوا یا در مکان حاشیه یا مکان padding (فاصله از داخل) قرار بگیرد.

نمونه (background-origin)

div {
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

پیش زمینه های چندگانه با CSS3

با استفاده از CSS3 میتوانید از چندین بکگرند یکجا استفاده کنید

نمونه (استفاده از چند بکگراند)

body {
background-image:url(img_flwr.gif),url(img_tree.gif);
}

تبلیغات

1 2 صفحه بعد

تعداد صفحات : 2