|
نادانسته های Css3 تعداد بازدیدvisits : 632
|
|||||||||
ctrain
|
نادانسته های Css3 سلام! تو این تاپیک از خاصیت های جدیدی که css3 ارائه داده ولی تقریباً از اون بی خبریم آموزش هایی با مثال میذارم. این خاصیت ها بسیار کاربردین و شاید شمام مثل من بدونید همچین خاصیت هایی وجود داره ولی دنبالش نمیرین. خواهشاً و موکداً نه اسپم بدید نه چیز دیگه! اینجا آموزشها رو بصورت تاپیک پشت سر هم هر چند روز یبار لیست میکنم شما ببینید یاد بگیرید بدردتون خورد یه تشکر بزنید فوقش! خب آخه شلوغ میشه توهم توهم میشه یه وضعی میشه! تشکر |
||||||||
| پنجشنبه 27 شهریور 1393 - 12:21 |
|
||||||||
حمایت شدهThanks :
|
سپاس هاThanks (4) : erfanebrahimi - mahan12 - sharifpour - farnam - |
ctrain
|
پاسخAnswer 1 : نادانسته های Css3 خاصیت border-image ؛ قرار دادن عکس به عنوان border نرم افزار کدنویسی خودتونو باز کنید (مثلاً nodpad). یه عکس کوچیک (اگه فرمتش png باشه و پس زمینه دار نباشه خیلی خوبه!) رو روی دسکتاپ کپی کنید و اسمش رو border بذارید. حالا کدهای زیر رو تو نرم افزارتون تایپ کنید ، با پسوند html ذخیره کنید ، نتیجه رو ببینید و کد رو مطالعه اش کنید: کد: <style>p{border-image:url(ax.png) 2 3 repeat;}</style><p>Sample text<br><br>Moisrex</p>(اگه احیاناً خاصیت کار نکرد بخاطر نداشتن پسونده. این کد بالا واسه آخرین ورژن های مرورگراست و اگه کار نداد به خاصیت ، پسوند مرورگر خودتون رو اضافه کنید. (مثلاً مال کروم -webkit- ، فایرفاکس -moz- ، اپرا -o-)) خب دیدید که یه کاربردی عین background-image داره و شاید بگین این همونه اصلا! ولی خب یه خاصیت جدیده و اگه کدنویسی زیاد انجام میدی 100% یه جایی بدردتون خواهد خورد پس همینجوری از این کد رد نشین. همونطور که در استایل داده شده مشاهده میکنین بعد از border-image یه مقدار url وجود داره که مشخصه که واسه قرار دادن عکسیه که به عنوان border استفاده میشه. بعد از این مقدار عدد 2 رو میبینید که عرض خطوط رو مشخص میکنه. مثلاً همین الان دوباره برین سراغ کدتون و بجای 2 عدد 30 رو قرار بدید ببینید چه بلایی سرش میاد. مقدار بعدی عدد 3 هست که مربوط میشه به فاصله ی محتوایات تگ با خطوط حاشیه! یعنی مشخص میکنه که مثلاً اون sample text و اون moisrex که داخل تگ p هست چه مقدار با border فاصله داشته باشه. و سر انجام در پایان کد مقدار repeat مشاهده میشه و سه مقدار داره: Repeat: این مقدار که در کد بالا هم مشاهدش میکنید میگه عکس مورد نظر در صورت کم آوردن از نظر طول و عرض به دفعات لازم تکرار بشه. stretch: این مقدار کارش اینه که عکس مورد نظرو با مقدار فضای تگ کشیده میکنه یا کوچیک میکنه. round: این مقدار که زیاد با repeat فرق نمیکنه در صورت نیاز عکس رو به دفعات تکرار میکنه تا فضای خالی باقی نمونه. ________________________________________________________________________________________ این خاصیت در این تاپیک بصورت خلاصه نویسی شده آموزش داده شد و خاصیت های کامل اون به ترتیب ذکر شده به این صورته: کد: border-image-sourceکد: border-image-widthکد: border-image-outsetکد: border-image-repeatو خلاصه ی این کد برای به خاطر سپردن: کد: border-image : source width outset repeat ; ____________________________________________ عددها رو کوچیک بزرگ کنید ، عکس رو تغییر بدید و با کد ور برید تا خوب حفظ شید. |
||||||||
| پنجشنبه 27 شهریور 1393 - 13:26 |
|
|
حمایت شده:
|
سپاس هاThanks (4) : erfanebrahimi - pv30-navid - mahan12 - farnam - |
amirmohsen
  
|
پاسخAnswer 8 : نادانسته های Css3 کاربر fakher به دلیل ارسال اسپم متعدد و پشت سر هم اخراج شد.... موفق باشید...
:)
|
||||||||
| پنجشنبه 27 شهریور 1393 - 14:30 |
|
ctrain
|
پاسخAnswer 9 : نادانسته های Css3
خاصیت های Background-clip و Background-origin ؛ تمرکز بیشتر روی پس زمینه برنامه ی ویرایشگر خود را بازکنید و کد زیر رو بنویسید: کد: <div style="background: #999; background-clip: border-box; padding: 10px; border: 7px dashed نتیجه رو ببینید. حالا مقدار border-box رو در خاصیت background-clip پیدا کنید و بجاش مقدار padding-box رو بنویسید و تغییرات رو مشاهده کنید. چی شد؟ مقدار border-box: این مقدار که مقدار پیشفرض مرورگرها هم هست میگه که پس زمینه تمام محیط عنصر رو پوشش بده. مقدار padding-box: این مقدار باعث میشه که پس زمینه تمام فضای عنصر رو پوشش بده و فقط یکم در حاشیه جای خالی باقی بمونه. مقدار content-box: این مقدار کاری میکنه که پس زمینه فقط پشت محتوایات عنصرو پوشش بده. _______________________________________________________________________________ یدونه عکس کوچولو تقریباً 40 در 40 رو در محلی که فایل html که توش کدا رو مینویسید وارد کنید و اسمش رو pic بذارید (فرمتش رو مواظب باشید! png باشه بهتره که با کدهامون تداخل نداشته باشه). و کد زیر رو در ویرایشگرتون بنویسید و نتیجه رو ببینید: کد: <div style="background: url(pic.png) no-repeat #fff; background-origin: border-box; میبینید که خاصیت background-origin جایگزین bg-clip شده. حالا اون سه مقدار که اون بالا واسه bg-clip دادمو واسه این خاصیت استفاده کنید و ببینید چه تغییراتی میکنند. مقدار border-box: این مقدار باعث میشه که عکس پس زمینه درست از گوشه ی بالا سمت چپ شروع بشه. مقدار padding-box: این مقدار دقیقاً عمل خاصیت بالا رو انجام میده ولی با یکم فاصله. مقدار content-box: این مقدار عکسو از جایی شروع میکنه که محتوایات عنصر اونجان. ادامه ی این بحث در تاپیک بعدی ... |
||||||||
| جمعه 28 شهریور 1393 - 19:03 |
|
|
حمایت شده:
|
سپاس هاThanks (3) : pv30-navid - mahan12 - farnam - |
ctrain
|
پاسخAnswer 10 : نادانسته های Css3 متد translate در خاصیت transform این متد نیز از متدهای آموزش نداده شده ی css3 است که میتواند عناصر را در صفحه به وسیله ی واحدهایی همچون px جابجا کند. مثال: کد: <div style="transform: translate(80px, 90px);background: #000; padding: 40px; width: 100px"></div>اگر مثال بالا در مرورگر شما اجرا نشد به ابتدای خاصیت transform پیشوند مرورگر خود را وارد کنید. (کروم: -webkit- ، فایرفاکس: -moz- ، اپرا: -o- ، اکسپلورر: -ms-) |
||||||||
| دوشنبه 31 شهریور 1393 - 09:35 |
|