فواصل » مختلفه http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 أنماط الصور المختلفه بـCSS3 http://portal.fwasl.com/%d8%a3%d9%86%d9%85%d8%a7%d8%b7-%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%ae%d8%aa%d9%84%d9%81%d9%87-%d8%a8%d9%80css3/ http://portal.fwasl.com/%d8%a3%d9%86%d9%85%d8%a7%d8%b7-%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%ae%d8%aa%d9%84%d9%81%d9%87-%d8%a8%d9%80css3/#comments Sat, 07 Jan 2012 21:03:11 +0000 http://www.portal.fwasl.com/?p=7281 عندما تريد وضع تنسيق معين علي الصوره كالخلفيه فإنه من الممكن إضافة أنماط مختلفه علي الصوره مع 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] ]]> http://portal.fwasl.com/%d8%a3%d9%86%d9%85%d8%a7%d8%b7-%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%ae%d8%aa%d9%84%d9%81%d9%87-%d8%a8%d9%80css3/feed/ 0