قالب PageLines سيساعدك فى خلق أشياء رائعة ومتميزة أسهل وأسرع بكثير من ذى قبل.

وهذه صورة للقالب …

يمكنكم تحميله من هنـــا

شرح اختيار خط معين في سي اس اس ثري css3

خاصية font-face

خاصية font-face مخصصة لوضع تفاصيل الخط الذي تريد إضافته إلى تنسيق الصفحة، مثل نوع خط وعنوان الخط. وتكتب قبل تنسيق الفقرة أو العنوان أو النص الذي تريد تنسيقه بشكل عام. تكتب هذه الخاصية كما توضح شفرة CSS التالية:

@font-face {

–

}

لو إفترضنا أننا نريد إستخدام خط Delicious في عنوان للفقرة، نحدد الخط وعنوانه الخارجي في خاصية font-face بهذه الطريقة:

  font-family: Delicious;

 src: url(Delicious-Bold.otf);

}

كما أنه يفضل أن يكون عنوان الخارجي للخط مرافق لملف CSS أو يمكنك كتابة عنوانه المحدد، في المثال السابق ستجد أن عنوان الخط يشير إلى Delicious-Bold.otf وهو موجود بجانب ملف CSS.

مثال عملي: إختيار خط لعنوان فقرة

المثال الذي سأطرحه بسيط جداً عبارة عن عنوان وفقرة، بحيث يتم تنسيق العنوان بأحد الخطوط الذي أستخدمها في تصاميمي وهو خط Hacen Typographer Bold، قبل عرض المثال أبدأ في المثال نقوم بعرض شفرة HTML الخاصة بالدرس:

<h2>تطبيقات على CSS3</h2>

<p>نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.</p>

<p>عند الإنتهاء  من جميع دروس هذه السلسلة سأضع قائمة الدروس من خلال هذه   التدوينة، لتكون مرجع لها بشكل دائم وهو سبب كتابتي لهذا الموضوع. لن أضع   أي عنوان حالياً ولكن سأبدأ بكتابة دروس CSS3 خلال هذه الأيام وتحديث هذه   التدوينة مع كل درس جديد.</p>

بعد ذلك نستخدام خاصية font-face في تحديد خط Hacen Typographer Bold بإسمه وعنوانه:

@font-face {

font-family: Hacen Typographer Bold;

src: url(Hacen Typographer Bold.ttf);

 font-weight: bold;

}

يجب يكون خط Hacen Typographer Bold موجود بجانب ملف CSS حسب ما يشير عنوان الخط في الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على CSS3) من خلال شفرة CSS التالية:

h2 {

 font-family: Hacen Typographer Bold;

}

هذه الصورة تمثل النتيجة كاملة عبر متصفح Safari:

طريقة إختيار الخط لإستخدامه في التصميم

عند إختيارك للخطوط المناسبة لك فإن نتيجة ظهور هذه الخطوط ستكون في كاملة في متصفح Safari، الإصدارات الأخيرة من متصفح Firefox و Opera لا يدعمان إختيار الخطوط بشكل صحيح وخاصة عند إختيار خط عربي ولكن النتيجة تظهر بشكل ممتاز في متصفح Safari وهذا بفضل ميزة تنعيم الخط Font Smoothing، هذه صورة للمثال السابق في عدة متصفحات بإستخدام خاصية font-face:

لذا أنصح بإستخدام بدائل لخاصية font-face إذا لم يدعم المتصفح الخاصية بشكل صحيح، يمكنك رؤية بعض تفاصيل دعم متصفح الفايرفوكس لخاصية Font-Face مع المقارنة ببقية المتصفحات على سبيل المثال.

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

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

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

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

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

$("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 كما بالشكل التالي:

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

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

كود الــ CSS :

بطاقه ستايل :

كود الـ CSS :

.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 http://portal.fwasl.com/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a8%d9%8a%d8%a6%d8%a9-%d9%85%d9%85%d9%8a%d8%b2%d9%87-%d9%85%d8%b9-css-%d9%88-javascript/ http://portal.fwasl.com/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a8%d9%8a%d8%a6%d8%a9-%d9%85%d9%85%d9%8a%d8%b2%d9%87-%d9%85%d8%b9-css-%d9%88-javascript/#comments Sat, 07 Jan 2012 20:58:18 +0000 http://www.portal.fwasl.com/?p=7274 في البدايه وقبل \اي شئ عليك أن تقوم بزياره هذا الموقع المميز والجذاب والذي أعتقد انه سوف يسلبك عقلك كما فعل معي

Activatedrinks.com

في البدايه القسم الأول من الموقع سوف تلاحظ أن هناك زجاجه هذه الزجاجه يمكن للمستخدم ان يقوم بفتحها ويقوم بتدوير الغطاء كما يحدث بالواقع!

والقسم الثاني يعتمد إعتمادا كبيرا علي الرسومات الكبيره والجريئه في نفس الوقت وعلي الألون الحقيقيه للمنتج نفسه.

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

بمجرد أن يتم تحميل موقع نبدأ منطق تطوير الرسوم المتحركة. وتتألف من مكونين رئيسيين :

جافا سكريبت لعمل تويست
الفلاش للرسوم المتحركه الذي يعرض التقدم

نحقق ذلك عن طريق استخدام CSS لتحديد موقف الحركة  :

#intro-twist-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

لكي نرسم مخططا للحركه نحن بحاجه الي تحديد عنصريين اساسيين وهما بدايه ونهايه الحركه. نحن ندعو هذه scrollMin وscrollMax.والفرق بينهم يتيح للزائر أن يقوم بالتدوير للغطاء كما يريد. نحن نسمي هذا scrollDistance.

لتحقيق هذا نطبق الصيغة التالية :

var scrollDistance = maxScroll – minScroll;
// …
var animationProgress = (currentScroll – minScroll) / scrollDistance;

وهذا الكود لتمرير الموقف ككل

الجزء الثاني العمق والمنظر:

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

خلق تيار الجسيمات

والأن لنجعل الجزيئات تتحرك وكأنها علي تيار أي نقوم بخلق تيار يحرك الجزيئات الموجوده علي صفحه الويب لكي بيدو الموضوع أكثر حيويه

for( var i=0; i<numParticles; i++ ){
var y = i * spacing;
var x = radius * Math.sin( y );
$("#my-particle-id").css( "left", windowWidth/2 + x );
$("#my-particle-id").css( "top", y );
}

ولتحقيق هذا عليك أن تقوم بتوير محو x قليلا بهذا الكود:

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

خلق العمق والحركة

وأنه كان لدينا الآن تدفق الجزيئات بمعدل الأداء اللائق ، وحان الوقت لوضع بعض الحياة فيها. بدلا من مجرد السماح للتدفق جزيئات من اليسار إلى اليمين أردنا منهم للالتفاف حول بعضهم البعض والعمل كدوامه من الجزيئات.

لجعل هذا يحدث عليك أن تقوم ببناء هذه الداله المسؤوله عن توير الجزيئات بالشكل الذي رايته:

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

var z = Math.cos( delta );

if( z < -0.9 || z > 0.9 ){
particle.addClass("layer3");
} else if( z < -0.4 || z > 0.4 ){
particle.addClass("layer2");
} else {
particle.addClass("layer1");
}

والأن أصبح لدينا العديد من الجزيئات التي تلتف حول محو x وحول محور y لتعطي لنا التأثير الذي نتمناه

وهذا التاثير سوف يعطي اختلافا بسيط للأشياء بدل من الحركه العموديه فقط:

والأن تجد ان الجافا سكريبت فعلا يمكنك العمل معها بكل سهوله و باعلي جوده وتحكم