مهمان عزیز خوش آمدید. ورود ثبت نام



صفحه‌ها (3):
امتیاز موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش css و کدهای زیبای آن

آموزش css و کدهای زیبای آن
دوستان من css3 کار نکردم زیاد میشه یه سوال بپرسم ؟؟



کد :

کد:
-moz-transition:all 0.6s ease-in;
-webkit-transition:all 0.6s ease-in;
-o-transition:all 0.6s ease-in;
-ms-transition:all 0.6s ease-in;
}

کارش چیه ؟؟  یه کم راجع بهش توضیح بدین اگه ممکنه ، به غیر این متغیر بقیشو بلدم


Designs : Mellat Graph - Mellat Modern - Mellat Pro - Mellat Metro - Mybbiran - Assasins - Mellat Special- Mellat 3d - Mellat Ziba - Shahrsaz -Mellat awesome - Mellat Civil - Mellat Slim - Mellat 2014 - Mellat Fun - Mellat Tech - Mellat World - Mellat Electric - کره تی وی - ایران لیگ - تهران پاتوق -
Translations : Glowing-Drakice-Techorina-Blueshire
---------

http://citygram.ir
See All At : Mellat-design.ir







پاسخ
این کد که شما قرار دادی برای نمایش انیمیشن در وب به کار میره. مثلا همین باکس کناری سایت مای بی بی دات آی آر که نوشته "دریافت" ، اگه روش کلیک کنید یه زمانی طول می کشه تا این باکس باز بشه. با ویژگی
کد:
transition

میشه این مدت زمان رو مشخص کرد.
باکس کنار رو می سازن و تو ویژگی هاش یه قسمت :focus میسازن و میگن 10 cm به سمت راست حرکت کنه. اگه ترنسیشن ندن بهش یهو حرکت می کنه و این زیبا نیست. با ویژگی ترنسیشن مدت زمانی که برای حرکت باکس نیاز هست رو مشخص می کنن البته برای تغییر رنگ متن و بک گراند هم از این ویژگی استفاده میشه
گوگل کنی در رابطه با این ویژگی چیز های خوبی میتونی یاد بگیری.


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

سوالی بود بفرما.
موفق باشی
 
پاسخ
نقل قول:البته برای تغییر رنگ متن و بک گراند هم از این ویژگی استفاده میشه



در جهت تکمیل بیانات دوستمون باید بگم که برای ایجاد تغییر زماندار خیلی چیزها میشه از این مشخصه استفاده کرد: مثلا طول-عرض- رنگ-حرکت-چرخش-تغییر مقیاس-حاشیه و....

 +دوستانی که مشخصه های css رو جهت یادگیری کاربران قرار میدن لطفا اجزاء مقادیر مشخصه ها رو کامل توضیح بدن تا کاربران بدونن کار هر جزء مقدار چیه تا بتونند به دلخواه مقادیر رو تغییر بدن.

برای مثال مشخصه سایه متن:

کد:
text-shadow:2px 4px 6px #fff;

مقدار اول(2px): تغییر مکان سایه در جهت افقی.
مقدار دوم(4px): تغییر مکان سایه در جهت عمودی.
مقدار سوم(6px): تغییر میزان شفافیت ([Blur] سایه).

درضمن از قرار دادن کدهای نامربوط به آموزش مانند font و color و .... جهت راحتی کار تازه کارها، خودداری کنند.
با تشکر.
پاسخ
(۳۱ مرداد ۱۳۹۲، ۰۴:۵۴ ب.ظ)Big Goal نوشته:  درضمن از قرار دادن کدهای نامربوط به آموزش مانند font و color و .... جهت راحتی کار تازه کارها، خودداری کنند.
با تشکر.


دوست عزیز اینجا پشتیبانی هست و باید طوری آموزش قرار بگیره که واس همه قابل فهم باشهAngry

در ضمن گفته شده آموزش css پس font ..... شامل میشه Angry
Angry

 

 


تصویر: https://pardazit.net/images/pardazit.net-468-60.gif
پاسخ
شما متوجه عرض بنده نشدید؛منظور بنده اینه که وقتی مثلا در یک پست در حال آموزش مشخصه border هستیم؛دیگه در اون پست مشخصه های اضافه دیگه (که در پست آموزش داده نمیشن) مثل font , line-height و ... قرار داده نشن تا کاربر تازه کار بتونه مشخصه رو دقیق یاد بگیره و قاطی نکنه.
متوجه شدید؟
پاسخ
واضح بودن منظور خعلییییییی مهمه!!!!!!!!!!!


تصویر: https://pardazit.net/images/pardazit.net-468-60.gif
پاسخ
نقل قول:...
دوستانی که مشخصه های css رو جهت یادگیری کاربران قرار میدن لطفا اجزاء مقادیر مشخصه ها رو کامل توضیح بدن تا کاربران بدونن کار هر جزء مقدار چیه تا بتونند به دلخواه مقادیر رو تغییر بدن.

برای مثال مشخصه سایه متن:
درضمن از قرار دادن کدهای نامربوط به آموزش مانند font و color و .... جهت راحتی کار تازه کارها، خودداری کنند.
...

خیلی ممنون از گوشزد کردن این نکات. بنده زمان ارسال این پاسخ کمی عجله داشتم و نرسیدم نکات ریز رو بگم که شما تکمیل کردید. فقط دو نکته :
اول ، بنده گفتم که این ویژگی برای انیمیشن استفاده میشه. فکر نمی کنم نیازی باشه که ریز بشیم روی این قضیه. مثلا میشه با رفتن موس روی یک عکس شادو یا همون سایه دور و برش پخش تر بشه. یا دو گوشه سمت بالا چپ و پایین راست رو با border-radius خم بکنیم و تعریف کنیم که ، وقتی موس روی باکسمون رفت قسمت های "بالا راست و پایین چپ" خم بشه و "بالا چپ و پایین راست" تیز بشن. ( چی گفتم Big Grin)
دوم ، بنده که ویژگی فونت و کالر رو قرار ندادم ؟ ( حتما منظورتون با کاربرای دیگه بود ) در هر صورت فکر نمی کنم مشکلی در این رابطه باشه ... هر چی بیشتر توضیح بدیم تازه کارها راحت تر یاد میگیرن و علاقه مند تر میشن البته زیاده روی هم در هر کاری بده ... .Blush

این هم یه توضیح مختصر در مورد انیمیشن با Css :

خب اگه بخوایم حرفه ای وارد این مبحث بشیم حوصله نمی کنید! پس بهتره خلاصه بگم. اولا که انیمیشن در وب در واقع حرکت یا تغییر آنی در یکی از شی های صفحه محسوب میشه. مثلا باکس کناری این وبسایت برای دریافت mybb (ای بابا چرا به این گیر دادم) یا قسمت جستجو همین وبسایت. عموما اگه از این انیمشین ها در وب استفاده نشه سایت حالت خشک میگیره. یه سر به سایت پی اچ پی بزنید! ادم حوصلش سر میره اما سایت های پویا و زیبا که توشون انیمیشن استفاده شده قابل قبول تر و زیبا تر هستن. البته سایت های مینیمالیت هم هستن که اگه بخوایم وارد این بحث بشیم شاید اعتبار منفی هم ( به دلیل طولانی کردن بحث ) بگیرم Big Grin
عرضم به حضورتون که انیمیشن تو وبسایت ها به راحتی با css قابل پیاده سازیه! اما بعضی ها برای حرفه ای تر کار می کنن از جی کوئری هم استفاده می کنن که با تابع ها و رویداد های مختلف قابل ساختن هست. البته ساخت انیمیشن با Css آسون تره. تو css با استفاده از ویژگی transition و اضافه کردن شبه کلاس ( Pseudo-Class ) میشه انیمیشن ساخت. شبه کلاس ها در واقع این جوری هستن :[dir=ltr] 
کد:
:visited :link :hover :active :focus
 
که به سلکتور های html ما در فایل css ( که شاید توهمون پیج اصلی هم باشه ) می چسبن! توضیح این شبه کلاس ها اینجوریه :
 
کد:
حالت عادی آبجکت:link وقتی موس روی آبجکت ما میره:hover وقتی روس آبجکت کلیک می کنیم:active برای جاهایی استفاده میشه که با صفحه کلید انتخاب شده اما هنوز فعال نشده:focus راستش توضیحش یه کم سخته! اگه دوستان ساده بتونن توشح بدن ممنون میشم.:visited

این از شبه کلاس ها! حالا ویژگی ترنسیشن رو توضیح میدم ، بعدش هم یک مثال میزنم.
این یک مثال در مورد transition هست :
کد:
transition: all 0.7s ease 0s


خب حالا اینا چی هستن ؟ دونه دونه توضح میدم :
all:مربوط به ویژگی میشه که ما به انیمیشن دادیم. در واقع میگیم که تمام خصوصیات به صورت انیمیشن در بیاد. اگه میزاشتیم color فقط رنگ به صورت انیمیشن عوض میشد اگر میزاشتیم opacity فقط شفافیت انیمیشن می شد.
0.7s:مدت زمان اجرای انیمیشن که تو این مثال 3 میلی ثانیه طول می کشه.
ease:تابع و نوع انیمیشن! چیزه دیگه ای نمیتونم بگم :دی
0s:در واقع زمان تاخیر برای اجرای انیمیشن رو نشون میده من الان 0 قرار دادم یعنی بلافاصله انیمیشن اجرا بشه. اگه 10 میزاشتم با وقفه10 ثانیه ای انیمیشن اجرا میشد.

خب این هم یه مثال :
فایل html :
کد پی‌اچ‌پی:
            <div class="icons">
                <
img src="files/ertebat.png"></img>
                <
a href="#"><img src="files/yahoo.png"></img></a>
                <
a href="#"><img src="files/twitter_bird.png"></img></a>
                <
a href="#"><img src="files/facebook.png"></img></a>
                <
a href="#"><img src="files/google_plus.png"></img></a>
            </
div


فایل css:
کد:
.icons{
height: auto;
position: fixed;
float: right;
width: 1460px;
}
.icons a{
opacity:0.5;
}
.icons a:link{
opacity:0.5; transition:all 0.5s ease-in-out 0s;
-webkit-transition:all 1s ease-in-out 0s;
-o-transition:all 0.5s ease-in-out 0s;
}
.icons a:hover{
opacity:1;
transition:all 0.5s ease-in-out 0s;
-webkit-transition:all 1s ease-in-out 0s;
-o-transition:all 0.5s ease-in-out 0s;
}


الان تو کد های بالا اولا تو فایل html یه 5 تا عکس آوردیم که که 4 تاش لینک داشت. همشون هم توی یک div با کلاس icons هستن.
حالا میرسیم به قسمت جالب و مهیج یعنی فایل css خودمون. اولا که توی .icons  ویژگی هایی رو برای عکس هامون مشخص کردیم. توی قسمت .icons a شفافیت تمام عکس هایی که لینک خوده بودن رو نصف کردیم و پایین آوردیم. بعدش توی .icons a:link زمان برگشت انیمیشن رو مشخص کردیم چون هر رفتی یه برگشتی هم داره. بعد از اون هم تو .icons a:hover گفتیم که هر وقت موس روی یکی از عکس ها رفت شفافیتش 1 یا همون کامل بشه.
نکته : ترنیشین رو با پسوند های -o- و -webkit- به کار بردم چون هنوز به طور کامل تو مرورگر های کروم و اپرا + سافاری شناخته شده نیستن.



تشکر لازم نیست! سوال بکنید حداقل بفهمم 4 نفر این متن رو خوندن Wink
در ظمنِ 1 : کاملا اختصاصی بود. همین الان نوشتم!Angel
در ظمنِ 2 : متن بی مشکل نیست. هر جایی مشکل دیدید مرحمت کنید ف مدیر ها ویرایش کنن. کاربرای دیگه هم گوشزد ...
موفق باشید/

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


www.ATAMALEK.ir
 
پاسخ
صفحه‌ها (3):


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  مناسبت آموزش ایجاد بنر گوشه به مناسبت رحلت حضرت محمد (ص) Develepor 0 28 ۰۸ آذر ۱۳۹۵، ۰۵:۱۵ ب.ظ
آخرین ارسال: Develepor
Thumbs Up آموزش کار با تجهیزات شبکه میکروتیک و MikroTik RouterOS IrIsT 0 64 ۱۱ آبان ۱۳۹۵، ۰۷:۲۵ ب.ظ
آخرین ارسال: IrIsT
  آموزش افزودن انیمیشن typed به متون انجمن systemengineer 0 151 ۲۷ خرداد ۱۳۹۵، ۱۲:۲۵ ب.ظ
آخرین ارسال: systemengineer
  آموزش سئو پیشرفته(قسمت اول) mhdbadboy 0 1,348 ۰۷ اردیبهشت ۱۳۹۳، ۰۶:۲۹ ب.ظ
آخرین ارسال: mhdbadboy
  آموزش ساخت سایت برای انجمن Drow-Ranger 12 3,598 ۱۸ فروردین ۱۳۹۳، ۰۵:۱۳ ب.ظ
آخرین ارسال: mellat
  سری آموزش های ویدیویی Html _Arman 0 2,149 ۲۵ اسفند ۱۳۹۱، ۰۲:۰۱ ق.ظ
آخرین ارسال: _Arman
  آموزش Html - 1 آشنایی با html _Arman 0 2,465 ۰۷ اسفند ۱۳۹۱، ۱۱:۲۷ ق.ظ
آخرین ارسال: _Arman

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir