X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

الوصول الحر بريميوم

وصول إلى مكتبة والمواد برمتها محور بريميوم ، ملفات المشاريع ، وأول 10 ٪ من كل فيديو تعليمي من دروس المكتبة على الانترنت .

إنشاء حسابك المجاني الآن!

زوايا مدورة على خلق كائنات تخطيط في CSS3
  • زوايا مدورة على خلق كائنات تخطيط في CSS3

ترجم من قبل مترجم جوجل

إذا كنت لم تفعل الكثير من القراءة حتى بعد على كل ما هو جديد في CSS3 ، انها رهيبة جدا. هناك كل الاحتمالات التي أدخلت حديثا ، بما في ذلك التدرجات ، أعمدة متعددة ، وصور الحدود ، واحد ونحن سوف نتحدث هنا نظرة على ، طول الحدود. دائرة نصف قطرها الحدود يسمح لنا لتعيين زوايا مدورة على كائنات غير ذلك مستطيلة في تخطيطات موقعنا.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

الخطوة 1 -- تطبيق دائرة نصف قطرها الحدود CSS3

أولا ، دعنا نصف قطرها تطبيق الحدود. في ورقة النمط الخاص بك ، والعثور على القاعدة التي ترغب في تطبيق تأثير الزاوية لتقريب. في كثير من الأحيان ، وسوف يكون هذا الرقم محدد السيطرة على هذا العنصر div. جعل متأكد جدا ان كنت أيضا تطبيق لون الخلفية أو الحدود (أو كليهما) بحيث يمكنك رؤية الزوايا!

المقبل ، إضافة إلى "دائرة نصف قطرها الحدود" الملكية للحكم الخاص ، تليها قيمة. ارتفعت قيمة تستخدمها ، وأكثر تنوعا في الزاوية.

هنا ، أنا تطبيق الحدود لدائرة نصف قطرها هويتي محتوى محدد # ، التي تسيطر على DIV الذي يحتوي على محتوى الصفحة بلدي ، وكما ترون في الشاشة بالرصاص المدرجة. تأكد من حفظ العمل الخاص بك والتحقق من عملك في المتصفح.

إذا كنت لا يزال الحصول على 90 درجة الزوايا ، ثم متصفحك واحد هو أن لا يعتمد هذه الميزة. ولكن لا شيء في حزمة فقط حتى الآن. دعونا تحقق من أن الحيلة بارد ذكرتها سابقا.

الخطوة 2 -- ضمان تأثير ركن الأشغال مدور

كما ذكرنا ، إلا أحدث الإصدارات من متصفحات الدعم الشعبي في دائرة نصف قطرها الممتلكات CSS3 الحدود. فكيف يمكنك التأكد من أن التخطيط الخاص ستعمل للمستخدمين الذين لا يزالون يستخدمون المتصفحات التي هي وراء إصدار أو اثنين؟ يمكنك استخدام بعض رمز إضافية ، على النحو التالي.

أولا ، دعونا نضيف في "- moz - قطرها الحدود :" متبوعة قيمة نصف قطرها. هذه الأهداف ما يشار إليه باسم متصفحات جيكو -- وأبرزها فايرفوكس.

المقبل ، دعونا نضيف في "، بكت ، نصف قطرها الحدود :" متبوعة نفس القيمة التي استخدمناها أعلاه. هذا وسوف تصل جميع المتصفحات المبنية على WebKit ، مثل كروم وسفاري. وأضاف مرة واحدة ، حفظ ما يصل عملكم وتحديث المتصفح.

الخطوة 3 -- استثناء يثبت القاعدة

الآن ماذا عن برنامج Internet Explorer ، كل متصفح شبكة المصمم المفضل (كذا) ، أنت تسأل؟ كذلك ، فإن كل الخيارات المذكورة أعلاه لا تعمل. في الواقع ، سوف ببساطة رمز التي تمكنا من إضافة ما يصل إلى هذه النقطة التي لا يمكن تجاهلها Explorer ، وزوايا سيجعل ببساطة الافتراضية الخاصة بهم في 90 درجة التصميم ، والتي هي خير من وجود كسر ذلك ، أليس كذلك؟ فمن الممكن لسحب قبالة زوايا مدورة في آي إي ، ولكن أعلم أنه قليلا من العمل الإضافي ، وربما هذا شيء نستطيع أن ندخل في طرف المستقبل. في الوقت الحاضر ، على الرغم من تمتع زوايا مدورة الخاص في جميع المتصفحات الأخرى!

CSS رائع. اكتشاف مزيد من المعلومات حول تصميم العائمة تخطيطات المغلق .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link