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










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

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

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

اولا نفتح اي ملف محرر للصفحات - FrontPage - Dreamweaver - Notepad
قم بعمل صفحة html واكتب بها التالي











الكود


كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<--xx-- http-equiv="Content-Type" content="text/html; --xx--set=windows-1256" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>





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








الكود

كود:
<style type="text/css">

</style>





ونضع بداخله معلومات الـ css التالية







الكود


كود HTML:
[LEFT] #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;
]
[/LEFT]
[CENTER][/CENTER]




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






الكود


كود PHP:
[LEFT]<div id="Word">
<div class="Word1">flykit</div>
<div class="Word2">flykit</div>
</div> [/LEFT]
[CENTER][/CENTER] 



ثم نقوم بحفظ الصفحة

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