طريقة وضع خلفية كأنها مخيطة/مطرزة فقط بأكواد css3 رائعة

السلام عليكم ورحمه الله وبركاته 

مرحبا بكم زوار مدونه حسين وافى العجرمى ,وفى درس جديد من دروس اضافات بلوجر

اليوم اتيت لكم با اضافاه فى قمه الروعه 

وهي طريقه وضع خلفيه كأنها مخيطه او مطرزه يمكنك تغيير فى اي شي تريد

الكود جميل جدا وذو خصائص رائعة ويمكنك تطبيقه على أي نص تريد

نتيجة الكود :

الان طريقه التركيب

هناك طرقتين للتركيب وهناك الكود الاصلى وهناك كود عدلت عليه انا 

طريقه تركيب الكود الاصلي الغير معدل

الذهاب الى تحرير قالب html

ووضع هذه الاكواد

يمكنك وضعها فوق عباره جميع الحقوق محفوظه التى توجد فى اخر القالب

او اى مكان انت تريده

مثال مصور

الكود 

<p style="text-shadow: #aa3030 -1px -1px; color: #ffffff; font-size: 21px; line-height: 1.3em; -webkit-box-shadow: #ff0030 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; box-shadow: #ff0030 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #ff0030; border-image: initial; text-align: center; background-position: initial initial; background-repeat: initial initial; border-width: 2px; border-color: #ffffff; border-style: dashed; margin: 10px;"> حسين وافى العجرمى</p>

يمكنك تغيير عباره ( حسين وافى العجرمى ) بما تريد

ويمكنك تغيير لون الخلفيه الاحمر بما تريد ستجده مكرر 3 مرات

كود اللون الاحمر #FF0030

الطريقه الثانيه التى عدلت عليها انا 

نفس الخوات السابقه لكن الكود يتغير وشكل الكود الذى عدلت عليه

مثال مصور

الكود المعدل 

<p style='text-shadow: #aa3030 -1px -1px; color: #FF0000; font-size: 22px; line-height: 1.3em; -webkit-box-shadow: #1B8AC9 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; box-shadow: #1B8AC9 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #1B8AC9; border-image: initial; text-align: center; background-position: initial initial; background-repeat: initial initial; border-width: 2px; border-color: #000000; border-style: dashed; margin: 10px;'> جميع الحقوق محفوظه لمدونه © <a href='http://hessinalagrmy.blogspot.com/'> حسين وافى العجرمى </a> 2013/2014 <br/> تابعنا على مواقع التواصل الاجتماعى<br /> <br /> <br/> <a href='https://www.facebook.com/el3grmy'><img src='http://www.traidnt.net/vb/images/imgcache/2013/11/852.png'/></a><br /> <a href='https://twitter.com/el3grmy'><img src='http://www.traidnt.net/vb/images/imgcache/2013/11/853.png'/></a><br /> <a href='https://www.youtube.com/user/el3grmy'><img src='http://www.traidnt.net/vb/images/imgcache/2013/11/851.png'/></a><br /> </p>

مع تغيير لون الخلفيه اذا اردت 

#1B8AC9

ستجده مكرر غير الكل الى اللون المطابق مع مدونتك 

وتغيير النصوص وتغيير 

http://hessinalagrmy.blogspot.com برابط مدونتك

و

https://www.facebook.com/el3grmy بصفحتك على الفيس بوك

و

https://twitter.com/el3grmy بحسابك على تويتر

و

https://www.youtube.com/user/el3grmy بقناتك على اليوتيوب

هذا كل شئ واتمنى ان يفيدكم وان يعجبكم شرحى واذا اعجبكم الموضوع يمكنكم الانضام الينا واذا واجهتكم اى مشكله اترك لنا تعليق وسنجيبك بااذن الله والسلام عليكم ورحمه الله وبركاته

• Facebook
• Twitter
• Google Plus

آخر المشاركات

تعليقات: 0

إرسال تعليق