تجسيم الكلمات ب css - درس بسيط
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
تقنية جميلة جدا ً لتصميم صفحات الويب
عرفتها منذ مدة ولكن لم اتعلميها الا من قريب
واعتبر نفسي الى الآن مبتدئ بها
من خصائص الـ css
خاصية position
وهذه الخاصية الجملية تمكن المصمم من التحكم بمرونة مع تصميماته
استخدمت هذه الخاصية من اجل تجسيد كلمة
كما نفعل ببرنامج الفوتوشوب وكانت النتيجة مذهلة
الكود
كود:
<!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>
كود:
<style type="text/css">
</style>
كود 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]
كود PHP:
[LEFT]<div id="Word">
<div class="Word1">flykit</div>
<div class="Word2">flykit</div>
</div> [/LEFT]
[CENTER][/CENTER]
ثم نقوم بحفظ الصفحة
يمكنك مشاهدة النتيجة من هنا
