آخرین مطالب
امکانات وب
همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی های با قابلیت انیمیشنی شدن و ویژگی table-layout توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه میخوایم در مورد ویژگی Shape-outside توضیحات و مثالهایی رو قرار بدیم.
همونطور که میدونین CSS از Box Model پیروی میکنه و به همین دلیل هست که همه المنتها بصورت مستطیلی نمایش داده میشن. حتی اگر از ویژگی های CSS مخصوص تغییر شکل مثل border-radius نیز استفاده کنیم، باز هم المنتها بصورت مستطیلی باقی میمونن. مثلا کدهای HTML زیر رو در نظر بگیرید:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
همونطور که میبینید یک تصویر قرار دادیم و بعد از اون 3 پاراگراف متنی رو قرار دادیم. در حالت پیش فرض خروجی بصورت زیر خواهد بود:
همونطور که میبینید چون پاراگرافها المنتهای بلاک هستن، به خط بعدی منتقل میشن و در کنار تصویر قرار نمیگیرن. اگر بخواین کاری کنید که متن در کنار تصویر قرار بگیره، میتونین برای تصویر مورد نظر ویژگی رو قرار بدین. با اینکار تصویر به سمت چپ شناور میشه و متن در کنار اون قرار میگیره. بصورت زیر:
میبینید که تا اینجای کار همه المنتها و ظاهر اونا بصورت مستطیلی شکل هستند. شما میتونین با استفاده از ظاهر تصویر مورد نظر رو بصورت دایره ای در بیارید.
.my-circle { border-radius: 50%; width: 200px; height: 200px; float: left; padding: 0 10px 5px 0; } |
خروجی بصورت زیر خواهد شد:
میبینید که در این حالت تصویر دایره ای شده ای ولی هنوز هم چارچوب اون مستطیلی شکل هست و متن در کنار اون بصورت صاف قرار گرفته و بصورت دایره ای دور تا دور تصویر را پوشش نداده است.
استفاده از ویژگی shape-outside
اینجا هست که ویژگی Shape-outside خودش رو نشون میده. با استفاده از این ویژگی میتونین نحوه قرار گیری متن خارج از المنت فعلی رو مشخص کنید و مرزی که متن باید در کنار اون قرار بگیره رو مشخص کنید. برای این ویژگی میتونین یکی از توابع circle یا ellipse یا polygon رو مورد استفاده قرار بدین و شکل مورد نظرتون رو مشخص کنید. در این جلسه برای مثال از circle استفاده میکنیم تا با قابلیت این ویژگی آشنا بشید. مثلا اگر بخوایم در مثال قبل کاری کنیم که متن بصورت دایره ای و زیبا در کنار عکس قرار بگیره، میتونین بصورت زیر عمل کنید:
.my-circle { border-radius: 50%; shape-outside: circle(); width: 200px; height: 200px; float: left; padding: 0 10px 5px 0; } |
خروجی بصورت زیر خواهد شد:
میبینید که چقد زیبا متن در کنار تصویر قرار گرفته است. در جلسه بعد مثالهای پیشرفته تری رو در اختیارتون قرار میدیم.
میزان پشتیبانی مرورگرها
پشتیبانی مرورگرها از ویژگی Shape-outside متوسط به بالا هست و میتونین از اون در سایتتون استفاده کنید. هر جا که از این ویژگی پشتیبانی نشه، متن بصورت پیش فرض و مستطیلی قرار میگیره و خیلی ضرر خاصی به ظاهر سایت نمیزنه.
مواردی که بنفش هستند از این ویژگی پشتیبانی نمیکنن. برای مرورگرهایی که از این ویژگی پشتیبانی نمیکنن، میتونین از css-shapes-polyfill استفاده کنید و برای مرورگرهای قدیمی Fallback یا پشتیبان قرار بدین.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
Source
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 313
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403