آشتی با css3 :: مجموعه نکاتی پیرامون قابلیتهای css و css3

[emperor69 13]

[ATTACH=CONFIG]671[/ATTACH]

آشتی با css3 :: مجموعه نکاتی پیرامون قابلیتهای css و css3

** از سراسر وب **

سلام به همه

به ذهنم خورد که تاپیکی با عنوان آشتی با css3 راه بندازیم که شامل مجموعه نکات کاربردی و البته مظلوم css3 و ایضاً css باشه. یکسری نکته هست که همینجا عنوان میکنم:

• این تاپیک قصد آموزش جامع css نداره و صرفا به بیان برخی تکنیکها می پردازه.
  
• فرضمون این هست که دوستان از آشنایی نسبی پیرامون این زبان برخوردار هستند.
  
• خواهش دارم اگر مطلب به دلتان نشست، برای تشکر فقط از دکمه های تشکر پایین هر پست استفاده کنید و پست جدا نزنید
  
• اگر دوستان مطلبی به ذهنشون رسید یا اطلاع بدن تا من اینجا بذارم یا خودشون زحمت بکشن و همینجا قرار بدن.
  
• امیدوارم مفید فایده باشه
  

یاحق

ویرایش شده در بهمن 90 توسط emperor69

[emperor69 13]

اول ما نیاز به یک صفحه اصلی داریم + سه تا دسته برای عقربه ها. این موارد رو مجبوریم با فتوشاپ طراحی کنیم و به صورت عکس در طرحمون پیاده کنیم. در فایل پیوست، این تصاویر موجود هستند. همونطور که میدونید هر طرحی نیاز به html و css و اگر نیاز باشه یک js داره. ما از html شروع میکنیم.

<ul id="clock">
      <li id="sec"></li>
      <li id="hour"></li>
   <li id="min"></li>
</ul>

خوب، ما الان هر چهار المانمون رو فراخوانی کردیم. اما اینکه چیدمانشون چطور باشه، باید بریم سراغ css :

#clock {
   position: relative;
   width: 600px;
   height: 600px;
   margin: 20px auto 0 auto;
   background: url(clockface.jpg);
   list-style: none;
}

#sec, #min, #hour {
   position: absolute;
   width: 30px;
   height: 600px;
   top: 0px;
   left: 285px;
}

#sec {
   background: url(sechand.png);
   z-index: 3;
}

#min {
   background: url(minhand.png);
   z-index: 2;
}

#hour {
   background: url(hourhand.png);
   z-index: 1;
}

از اونجا که بحثمون راجع به css هست مراحل نوشتن کدهای جاوا اسکریپت رو توضیح نمیدیم و در همون فایل پیوست ارائه شده. ضمنا کدهای css رو با کدهای جاوااسکریپت ادغام کردیم و یک فایل js ذخیره کردیم. اما برای اینکه مشخص تر باشه کدهای css3 موجود در این طرح به این صورته:

#sec {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

فقط اینو بگم که نقش css3 در اینجا همون چرخاندن المانهاست.

• منبع
  
• دمو آنلاین (بجز IE)
  

[emperor69 13]

حتما به سایتهایی برخورد کردین که وقتی روی لینکی در اون سایت کلیک میکنید، بجای رفرش شدن کل صفحه، در همون پنجره به صورت زیبایی جابجا میشین. این صفحات به قابلیتی به نام Transition مجهز هستند که تلفیقی است از css3 و jq

• منبع+آموزش
  
• دموی آنلاین
  

یاحق

[emperor69 13]

به کمک css3 میشود متنها را به صورت دایره ای نوشت. اگر لوگویی دارید که دور تا دور آن متنی نوشته شده می توانید با عدم استفاده از تصویر، سرعت لود صفحات خود را افزایش دهید. نوشته های این مدلی را Arc text گویند.

• منبع+توضیحات
  
• دموی آنلاین
  

یاحق

[emperor69 13]

سلام

اکنون خواهید دید که با css3 میتوان از دکمه های متحرک محشری بجای تصاویر ثابت خشک استفاده کرد.

• منبع + توضیحات
  
• دموی آنلاین
  

یاحق

[emperor69 13]

سلام

سایتی دیدم که در نوع خودش جالب بود. میتونید با ورود به این سایت و کمی صبرکردن میزان پشتیبانی مرورگر خودتون رو از css3 به صورت درصدب ببینید.

http://css3test.com

بالای صفحه میزنه. روش به این صورته که یکسری کد css3 به صورت تست در صفحه وجود داره که اگه مرورگرتون تونست نشون بده به درصد پشتیبانی اضافه میشه.

یاحق

[Mahboobe.Maleki 53]

این افکت css3، موجب میشه که وقتی موس رو روی تصویر میبرید تصویر چند درجه بچرخه. حتما فایل نمونه رو ببینید.

و برای راهنمایی کافیه که id تگ img یا body رو مطابق css تنظیم کنید.

#ex4 {
width: 800px;
margin: 0 auto;
}

#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

دانلود فایل نمونه من

لینک منبع

لینک دمو

ویرایش شده در تیر 91 توسط Mahboobe.Maleki
افزودن لینک

[hamidnpc 14]

این سایت درست تست می کنه ؟ برای گوگل کروم میگه 55 % درصد و فایر فاکس 50 % درسته؟

[Mahboobe.Maleki 53]

51 فایرفاکس 13

56 کروم 18

[punisher 10]

این موضوع فوق العاده جالب و هیجان انگیزه :25:

دوستان لطفا ادامه بدید.

[ebrahim_rb 11]

دوست عزیز اکثر مردم از ie اونم ie 8 استفاده میکنند ، راه حلی وجود داره تا css3 روی اون هم اجرا بشه ؟

[Vahid Taheri 74]

دوست عزیز اکثر مردم از ie اونم ie 8 استفاده میکنند ، راه حلی وجود داره تا css3 روی اون هم اجرا بشه ؟

بله. راه حل هایی برای این کار ارائه شده . مثلا برای shadow ها و border-radius فایلی به نام PIE.htc هست که باید در روت سایت گذاشته و از کد زیر در هرجایی که از این کد ها استفاده کردید بگذارید در فایل های css )

behavior:url(PIE.htc) 

یا مثلا برای opacity و گرادینت ها کدهای filter وجود دارند که هر کدوم کدی خاص دارند. البته برای گرادینت هم میتونید از همون روش PIE استفاده کنید.

برای توضیحات بیشتر و در مورد PIE.htc و دریافت فایل ها و کدهاش این سایت رو بهتون پیشنهاد میکنم: CSS3 PIE: CSS3 decorations for IE