• 0

كيف أُدرج إطار لنص باستخدام css؟

لي نص على صفحة Html، ومن بين التأثيرات التي رأيتها وأعجبتني هي اضافية إطار للنص عن طريق css، وهذا مثال:

DeWjI.thumb.jpg.4359eaa89b4e9251ddf3e0ab

كيف ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

سنستعمل العديد من text Shadow:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

لنحصل على :

Dq4z9.thumb.png.40f9a8d96c2680544da8f64f

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

كما يمكن استعمال طريقة الإطار stroke للوصول إلى نفس النتيجة :

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

تنسيق css:

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

0H6zL.thumb.png.308bd025fcb1383d63703ebd

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن