CSS3 جعل صورة الحدود الملكية صور رائع حقا!
إنشاء الحدود ليس بالأمر الجديد HTML و CSS. لقد تمكنا من إضافة حدود منذ البداية. قد تكون معتادًا على الحدود الصلبة والحدود المنقطة والحدود المتقطعة وما إلى ذلك.
ولكن مع خاصية صورة الحدود الجديدة CSS3 ، أصبح إنشاء حدود على عنصر HTML أكثر تقدمًا ؛ حسنًا ، ببساطة ، نحن الآن قادرون على إضافة حد باستخدام صورة كمصدر والذي سيتيح لنا إضافة حدود أكثر جاذبية. حسنًا ، الآن لنرى كيف تعمل هذه الخاصية.
بناء الجملة ودعم المستعرض
يتم تعريف صورة الحدود في CSS3 باستخدام بناء جملة الاختصار التالي:
صورة الحدود: [مصدر الصورة] [شريحة] [العرض] [البداية] [تكرار] ؛
بناء الجملة أعلاه هو الإصدار الرسمي من W3C المدعوم فقط في Chrome ، في حين أن Opera و Firefox و Safari لا تزال تتطلب الإصدار السابق (-س-, -MOZ-, -بكت-) ، ولا يدعم Internet Explorer هذه الخاصية على الإطلاق.
علاوة على ذلك ، فإن [عرض] و ال [البداية] القيمة في هذا الحدود بين صورة الخاصية ليست مدعومة بعد في أي متصفحات ، ومع ذلك ، يمكن استبدال قيمة العرض باستخدام عرض الحدود خاصية.
لذلك ، باختصار ، حتى الآن لا يمكننا تطبيق قيمة [مصدر الصورة], [شريحة] و [كرر] .
صورة الحدود: [مصدر الصورة] [شريحة] [تكرار] ؛
صورة شريحة
قبل أن نبدأ في إظهار هذه الخاصية ، دعنا نتحدث عن “شريحة الصورة” أولا لأنه شيء جديد في الإعلان عن الممتلكات. ستحدد شريحة الصورة هنا مقطع الصورة الذي يأخذ على التوالي نقطة البداية من الحواف العلوية واليمنى والسفلية واليسرى من حواف الصورة التي ستقسم الصورة لاحقًا إلى تسعة أقسام ، كما هو موضح بالصورة التالية.
في الصورة أعلاه ، سترى أن الأقسام 1, 3, 7 و 9 سوف تصبح زوايا الحدود ، والأقسام 2, 4, 6 و 8 ستصبح الحافة أو الخط الحدودي ، مع التأكد من أن القسم الذي ستصبح عليه الحافة قابل للتكرار أو قابل للتمديد.
قيمة الشرائح يمكن الإعلان عنها مع بكسل وحدة أو نسبة مئوية (٪) وحدة لقياس مرونة.
المزيد من المراجع:
- خلفيات CSS والحدود المستوى 3
إنشاء إطار الصورة
الآن ، دعنا نظهر العقار في مثال حقيقي.
هذه المرة ، نحن ننفذ الحدود بين صورة خاصية لإنشاء إطار صورة وسنستخدم الصورة أدناه كمصدر. قمنا بقياس الصورة بعناية بحيث يمكن تقطيعها وتكرارها وتمديدها بشكل صحيح بغض النظر عن عرض المحتوى والارتفاع.
ملحوظة: يمكنك تنزيل الصورة أعلاه من هذا الرابط.
أيضًا ، في هذا العرض التوضيحي ، سوف نستخدم هذه Cinemagraph المذهلة التي كتبها From Me to You كصورة.
(مصدر الصورة: From Me To You)
العلامات
الترميز بسيط مثل هذا:
لا تنسى أن تحل محل images_2 / صنع الملكية CSS3 الحدود صورة، صور، حقا، cool_3.jpg مع صورتك الخاصة.
الأنماط
ثم ، دعونا نعطيه إطار باستخدام الحدود بين صورة.
إذا نظرت إلى الصورة أعلاه ، فإن عرض صورتنا هو 180px في المجموع. يمكن بعد ذلك تقسيم هذه القيمة إلى 6 التي كل قسم يجري 30px. ولذا فإننا سوف شريحة الصورة ل 30px.
إذا كنت تستخدم قيمة الطول للشريحة ، فيجب استبعاد بكسل وحدة ، حيث سيتم ترجمتها تلقائيًا إلى بكسل, ولكن إذا قررت استخدام النسبة المئوية ، فستظل بحاجة إلى إضافة (٪).
بالنسبة لتكرار الصورة ، سوف نستخدم الافتراضي ؛ كرر. بدلا من ذلك ، يمكنك استخدام تمتد ولا تقلق ، فإن الصورة الحدودية ستبقى رشيقة.
img border-image: url ("images / frame.png") 30 تكرار ؛ -o-border-image: url ("images / frame.png") 30 تكرار ؛ -moz-border-image: url ("images / frame.png") 30 تكرار ؛ -webkit-border-image: url ("images / frame.png") 30 تكرار ؛ عرض الحدود: 30 بكسل ؛ بالإضافة إلى ذلك ، نود أيضًا وضع الصورة في وسط نافذة المتصفح بالإضافة إلى إضافة نسيج خلفية إلى المستند لجعله أكثر إقناعًا.
html background: url ('images / lightpaperfibers.png')؛ .wrapper margin: 20px auto؛ الارتفاع: 476 بكسل ؛ العرض: 675 بكسل ؛ محاذاة النص: المركز ؛ حسنًا ، أعتقد أننا انتهينا من هنا ، والآن دعونا نراها في متصفح.
- عرض
- تحميل المصدر
هل تشعر وكأنك تبحث في لوحة سحرية في هوجورتس?
الفكر النهائي
هذه الحدود بين صورة مما لا شك فيه هو إضافة لطيفة في عائلة CSS3 ؛ لم نعد نقتصر على الحدود البسيطة البسيطة.
وفي هذا المنشور ، أظهرنا لك كيف يمكننا إنشاء إطار صورة دون القلق بشأن المحتوى أو في هذه الحالة أبعاد الصورة (العرض والارتفاع). يمكن أن يكون الطول والعرض مرنين ، طالما أن مصدر الحد قابل للتكرار أو قابل للتمديد.
أخيرًا ، إذا كنت لا تزال تشعر بالحيرة قليلاً الحدود بين صورة, هناك أداة يمكنك استخدامها لمساعدتك في إنشاء واحدة بسهولة أكبر: أداة حدود الصورة
