[ ط§ط¨ط¯ط§ط¹ط§طھ ط§ظ„ظ€ CsS ] طھط¬ط³ظٹظ… ط§ظ„ظƒظ„ظ…ط©


بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته

الـ css



تقنية جميلة جدا ً لتصميم صفحات الويب
عرفتها منذ مدة ولكن لم اتعلميها الا من قريب
واعتبر نفسي الى الآن مبتدئ بها

من خصائص الـ css
خاصية position
وهذه الخاصية الجملية تمكن المصمم من التحكم بمرونة مع تصميماته

استخدمت هذه الخاصية من اجل تجسيد كلمة
كما نفعل ببرنامج الفوتوشوب وكانت النتيجة مذهلة


شاهد نتيجة العمل

http://www.barqalshamal.com/waleed.html

وشاهد كلمة barqalshamal

هذا هو القصود

والسبب بعمل مثل هذه التجربة هو التقليل من استخدام الصور في التصاميم حتى يكون تصفح الصفحة سريع


طريقة عمل مثل هذا المثال


اولا من اي برنامج تحرير نصوص مثلا ً

[ FrontPage - Dreamweaver - Notepad ]

قم بعمل صفحة html واكتب بها التالي
شاهد






رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1256&quot; /> <title>Untitled Document</title> </head> <body> </body> </html>

ثم نفتح في head وسم الـ css
التالي

رمز Code:
<style type=&quot;text/css&quot;> </style>
ونضع بداخله معلومات الـ css التالية

رمز Code:
#Word { background: #A3A3A3; width: 650px; margin: 0px auto; height: 550px; border-width: 1px 1px; border-style: dotted dotted; border-color: #3A3A3A #3A3A3A; position: relative; } .Word1 { font-size: 80px; color: #0E0E0E; position: absolute; top: 275px; font-weight: bold; left: 5px; } .Word2 { font-size: 80px; font-weight: bold; color: #FEFEFE; position: absolute; top: 275px; }

يصبح كالتالي

رمز Code:
<style type=&quot;text/css&quot;> #Word { background: #A3A3A3; width: 650px; margin: 0px auto; height: 550px; border-width: 1px 1px; border-style: dotted dotted; border-color: #3A3A3A #3A3A3A; position: relative; } .Word1 { font-size: 80px; color: #0E0E0E; position: absolute; top: 275px; font-weight: bold; left: 5px; } .Word2 { font-size: 80px; font-weight: bold; color: #FEFEFE; position: absolute; top: 275px; } </style>

ثم في منطقة الـ body نضع التالي




رمز Code:
<div id=&quot;Word&quot;> <div class=&quot;Word1&quot;>barqalshaml</div> <div class=&quot;Word2&quot;>barqalshaml</div> </div>
لتكون الصفحة بالشكل التالي

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1256&quot; /> <title>ابداعات الـ Css</title> <style type=&quot;text/css&quot;> <!-- #Word { background: #A3A3A3; width: 650px; margin: 0px auto; height: 550px; border-width: 1px 1px; border-style: dotted dotted; border-color: #3A3A3A #3A3A3A; position: relative; } .Word1 { font-size: 80px; color: #0E0E0E; position: absolute; top: 275px; font-weight: bold; left: 5px; } .Word2 { font-size: 80px; font-weight: bold; color: #FEFEFE; position: absolute; top: 275px; } --> </style> </head> <body bgcolor=&quot;#272325&quot;> <div id=&quot;Word&quot;> <div class=&quot;Word1&quot;>barqalshaml</div> <div class=&quot;Word2&quot;>barqalshaml</div> </div> </body> </html>
نحفظ الصفحة لنشاهد عملنا

بإختصار هذه هي الطريقة

اخوكم
برق الشمال
http://www.barqalshamal.com








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©