عندما تريد وضع تنسيق معين علي الصوره كالخلفيه فإنه من الممكن إضافة أنماط مختلفه علي الصوره مع CSS3،فيمكنك مزج الزوايا واضافة الظل وتاثيراته المختلفه فإليك بعض الحيل للأنماط الكستخدمه في CSS3.

اضغط هنــــــــا لمشاهدة هذه الأنماط

لعمل حدود للصوره:

لاحظ جيدا الصوره تجد أننا نقوم بعمل دائره ونحدد نصف قطرها لعمل الحدود.

ديناميكيه الطريقه:

يمكنك أن تقوم بعمل حدود للصوره والتطبيق بالجي كويري

[html] <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("img").load(function() {
$(this).wrap(function(){
return ‘<span style="position:relative; display:inline-block; background:url(‘ + $(this).attr(‘src’) + ‘) no-repeat center center; width: ‘ + $(this).width() + ‘px; height: ‘ + $(this).height() + ‘px;" />’;
});
$(this).css("opacity","0");
});

});
</script>
[/html]

وهذا الكود سوف يخرج لينا كود html كما بالشكل التالي:

[html] <span style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
<img src="image.jpg" style="opacity: 0;">
</span
[/html]

الصورة الدائريه:

عندما تكون الصوره خلفيه مثلا وتريد تنسيقها وتجميلها بالشكل المناسب وتريد جعل حدودها عباره عن دائره تقوم بتحديد نصف قطرها كما تريد انظر هذه الصوره:

كود الــ CSS :

[html] .circle .image-wrap {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}
[/html]

بطاقه ستايل :

كود الـ CSS :

[html]

.card .image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
[/html]