معروف أن CSS صممت لعمل وخلق ستايل خاص أو تنسيق معين علي مواقع الويب أو تأثيرات خاصه والتي تقوم بعضهابعض المتصفحات الحديثه وإنه لمن الممتع أن تقوم بمعرفة التأثيرات التي تجري علي حدود الصوره
لمشاهدة هذه التأثيرات يرجي الضغط هنـــــــــــا
توصيف النص الأساسي:
قبل أن نبدأ مع هذا البرنامج التعليمي، دعونانقوم بالتعريف بأهم العلامات والملامح الأساسيه.
#round,لعمل أركان أو حدود للصوره علي مقربه.
#indie، لتطبيق زاوية منفردة على مقربة.
#opacity ، لإظهار طرق جديدة لدرجات التعتيم.
#shadow، لتبين لكم كيفية خلق الظلال، من دون فوتوشوب.
#resize ، لتغيير حجم العناصر.
لهذا ، سوف يكون لدينا كود HTML هذا :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="round"> </div>
<div id="indie"> </div>
<div id="opacity"> </div>
<div id="shadow"> </div>
<div id="resize">
<img src="image.jpg" width="200" height="200" alt="resizable image">
</div>
</div>
</body>
</html>
[/html]
والأن لنقم بإنشاء ملف css :
[html] body {background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
الزوايا المستديره:
background-color: #000;
border: 1px solid #000;
}
[/html]
والأن لنعمل علي تدوير الزوايا
[html] #round {background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
[/html]
تغيير التعتيم مع css3 :
background-color: #000;
opacity: 0.3;
}
[/html]
إلقاء الظلال:
[/html]
ولتحديد المستوي الرومادي يتعين عليك تحديد الدرجه المناسبه
[html] #shadow {background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}
[/html]
ولإعاده تحجميها أو لتغيير الحجم :
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
[/html]
