اكواد css 3 تساعدكـ في اخراج ستايلكـ بشكل افضل

07 - 09 - 2010, 19:39 sUlTaN غير متواجد حاليآ بالمنتدى

sUlTaN

:: المركز الثاني في مسابقه أجمل طرح ::

بيانات موقعي

اسم الموقع: Sultan Shanqeeti

اصدار المنتدى: لا أملك منتدى

اكواد css 3 تساعدكـ في اخراج ستايلكـ بشكل افضل

السلام عليكم ورحمة الله وبركاته
قبل البدء بعرض هذه الأفكار يجب أن نتذكر أن دعم css3 في المتصفحات مازال محدود و متفاوت . لذلك لا تستخدمها حاليا كجزء أساسي في التصميم لانه من الخطأ استخدام css3 كعنصر اساسي لذا انصحكـ بانـ تقلل عدد اكواد css3 في الاستايل وخاصة في الصفحة الرئيسية..

1-الاطراف الدائرية او المنحنية
يستخدم هاذا الكود في اعطاء جمالية لبعض العناصر مثل الاقسام الرئيسية وايضا في خلفية الصفحة مثل ستايل خيال كلاسيكـ الحالي اضغط هنا للمعاينة
ولو كان لدينا المعرف box

رمز PHP:


			
<div id="box">



المحتوى هنا



</div>

وسوف يكون كود css هكذا

رمز PHP:


			
#box {



border-radius: 15px;



-moz-border-radius: 15px;



-webkit-border-radius: 15px;

}
بيحث انـ 15 هو مستوى الانحناء في الزاوي

رمز PHP:


			
#box{



-moz-border-radius-topleft: 15px;



-moz-border-radius-topright: 0px;



-moz-border-radius-bottomright: 15px;










-moz-border-radius-bottomleft: 0px;



-webkit-border-top-left-radius: 15px;



-webkit-border-top-right-radius: 0px;



-webkit-border-bottom-left-radius: 0px;



-webkit-border-bottom-right-radius: 15px;

في هاذا الكود زاوية منحنية وزاوية حادة

مدعوم في : فايرفوكس 3.5 , متصفح جوجل (1.0.154.36),سفاري (3.2.1, وندوز)

غير مدعوم في : انترنت اكسبلورر و اوبرا
تأكد من الدعم

2- الظلال العناصر والصناديق

في السابق كانت هناك عدة طرق أيضا منها إضافة صورة تحت العنصر أو الصندوق أو استخدام صورة كخلفية للقيام بذلك . بواسطة css 3 الفكرة بسيطة .

رمز PHP:


			
#box{



-webkit-box-shadow: 10px 10px 5px #888;



}

القيمة الأولى هي مكان الظل بالنسبة للمحور السيني x و الثانية بالنسبة للمحور الصادي y و القيمة الثالثة درجة التشتيت blur و آخر قيمة هي اللون .
مدعوم في : سفاري 3.2.1 على وندوز .
غير مدعوم : فايرفوكس و انترنت اكسبلورر و متصفح جوجل و اوبرا و نسخ سفاري تحت ٣ .
تأكد من الدعم

3- ظلال النصوص
في css3 وجدت الخاصية text-shadow لإعطاء النص ظلال لو كان لدينا عنوان من نوع h2 و نريد إعطاء العناوين من هذا النوع ظلال يمكن القيام بذلك بواسطة

رمز PHP:


			
h2 {



color: red;



text-shadow: 2px 2px 2px black;

}

كما يمكنك استخدام أكثر من ظل بأكثر من لون للنص الواحد

رمز PHP:


			
h2 {



text-shadow: red 4px 4px 2px,



yellow -4px -4px 2px,



green -4px 4px 2px;



}

مدعوم في : سفاري ٣ و أكثر و اوبرا 9.5 و فايرفوكس 3.1
غير مدعوم : متصفح جوجل .
تأكد من الدعم

4-الخطوط الخاصة

نحن نعرف ان الخط الذي نستخدمه في التصميم يعتمد على وجوده لدى المستخدم و لو لم يكن متوفر في جهاز المستخدم سيظهر له خط بديل .لكن يمكننا الآن حل هذه المشكلة بواسطة css3 يمكنك إدراج الخطوط التي تريد لاستخدامها مع مراعاة حقوق الملكية للخطوط و إن كان يمكنك استخدامها على الشبكة .
علينا اولا تعريف declare الخطوط التي نريد استخدامها بواسطة @font-face

رمز PHP:


			


@font-face {



font-family: fontname;



src: url(‘fontfile.ttf’);

حيث علينا استبدال fontname باسم نخصصة للخط . و استبدال fontfile باسم ملف الخط .
و الآن لدينا خط جديد يمكننا استخدامه اسميناه fontname

رمز PHP:


			
body {



font-family : fontname ;



font-size:0.9em

مدعوم في :فايرفوكس 3.5 ,سفاري 3.2.1 و انترنت اكسيلورر ٧ و٨ و لكن باستخدام خطوط .eot .

غير مدعوم في : فايرفروكس ٣و متصفح جوجل و أوبرا
تأكد من الدعم

5- استخدام اكثر من صورة بالخلفية

سابقا كنت تستطيع استخدام صورة واحدة في الخلفية بهذا الشكل

رمز PHP:


			
#box {



background:url('images.gif') repeat center top ;



}

مع css 3 يمكنك القيام بأمور اكثر تعقيدا

رمز PHP:


			
#box {



background: url(example.png) top right no-repeat,



url(example2.png) bottom right no-repeat,



url(example3.png) center center repeat-y;

}
مدعوم في : اوبرا 9.6 و سفاري 3.2.1

غير مدعوم في : قايرفوكس و جوجل و انترنت اكسبلورر .
تأكد من الدعم

6-الشفافية و rgba

ما قدمته png من امكانيات للوصول إلى تصاميم و أفكار ابداعية يمكن الوصول إليه بواسطة rgba. ببساطة rgba يأخذ ٤ قيم اول ٣ قيم تمثل درجات الألوان

r= red احمر
g =green أخضر
b=blue أزرق
أما آخر قيمة فهي تمثل درجة الشفافية لهذا العنصر .

مثال

رمز PHP:


			
#box {



background: rgba(200, 100, 100, 0.5);



}

كما يمكنك تحديد اللون بالطريقة المعتادة و استخدام opacity كمثال

رمز PHP:


			
#box {



color: red;



opacity: 0.5;

مدعوم في : فايرفوكس ٣ و متصفح جوجل و سفاري 3.2.1.

غير مدعوم : انترنت اكسبلورر و اوبرا .
تأكد من الدعم

مع خالص تحياتي
سلطانـ

المصدر

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع sUlTaN

part1
{متكـآمـل} ألكـل تحـت سقف وـاحد ...<آفكـار وشروحـات
part2
{متكـآمـل} ألكـل تحـت سقف وـاحد ...<آفكـار وشروحـات [part 2]
sll50_

hotmail.com

رقم المشاركة : [ 2 ]

07 - 09 - 2010, 19:56 جروح الايام غير متواجد حاليآ بالمنتدى

جروح الايام

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: ترآيدنت

اصدار المنتدى: 3.8.7

بارك الله فيك
وجزاك ربي كل خير على الشرح الرائع

يعطيك الف عافية

تحياتي قلبوو

جروح الايام

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع جروح الايام

سبحان الله وبحمده سبحان الله العظيم

╗═.♥.════════.♥.═╔

♥ ® أذكر ربك يذكرك ® ♥

‏╝═.♥.════════.♥.═╚

رقم المشاركة : [ 3 ]

07 - 09 - 2010, 20:08 sUlTaN غير متواجد حاليآ بالمنتدى

sUlTaN

:: المركز الثاني في مسابقه أجمل طرح ::

بيانات موقعي

اسم الموقع: Sultan Shanqeeti

اصدار المنتدى: لا أملك منتدى

اقتباس

المشاركة الأصلية أضيفت بواسطة : صرخة فلسطين


	بارك الله فيك وجزاك ربي كل خير على الشرح الرائع يعطيك الف عافية تحياتي قلبوو

العفو يالغلا

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع sUlTaN

hotmail.com

رقم المشاركة : [ 4 ]

07 - 09 - 2010, 20:14 pHp M!nD غير متواجد حاليآ بالمنتدى

pHp M!nD

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: :: TRAIDNT ::

اصدار المنتدى: منتج اخر

الـ CSS 3.0 صارت مو محببة (بسبب عدم توافقها مع جميع المتصفحات ) ,

ودخلت على الساحة طريقة الجافا سكربت (ولكن صعب ربطها مع منتديات الفي بي ) ,

فنحن ننتظر طريقة جديدة او توافق جديد للـ CSS 3.0 وموضوعك تحفة .

يعطيك العافية ,

pHp M!nD

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع pHp M!nD

CSS Style
==============================
d0n3 !! ~ >>
i7'5 0wn3d !! 4nD i 4m n07 50rRy f0r y0u y0uR 53rv3r 53cur!ty 5y5t3m i5 F**k3d uP ~ >>
تابعنا !
===============================

رقم المشاركة : [ 5 ]

08 - 09 - 2010, 03:27 أبوسامر الشريف غير متواجد حاليآ بالمنتدى

أبوسامر الشريف

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: قلعة الشباب

اصدار المنتدى: 3.8.5

طريقة حلوة

ولكنها تطلع أخطاء في w3

أبوسامر الشريف

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع أبوسامر الشريف

لا تَنسَى التّوبةَ والتّوبةَ والتّوبةَ الصّادقة.

كل يوم تُب توبة جديدة صادقة.

هذا هو دأب الصادقين.

أستغفر الله وأتوب إليه

رقم المشاركة : [ 6 ]

08 - 09 - 2010, 19:49 ابو شدق غير متواجد حاليآ بالمنتدى

ابو شدق

::مراقب::
أقسام تعليم استايلات

بيانات موقعي

اسم الموقع: منتديات ابوشدق

اصدار المنتدى: 4.1.9

شرح رائع جدا بارك الله فيك
واعتقد فيه مكتبه جافا سكربت تربطه مع css3 ويتوافق مع المتصفحات

ابو شدق

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع ابو شدق

مهم جدا : خصوصية ترايدنت

::شكراً ترايدنت::

منع وضع الروابط الا بعد عدد معين من المشاركات للحد من اعضاء السبام

رقم المشاركة : [ 7 ]

09 - 09 - 2010, 09:41 sUlTaN غير متواجد حاليآ بالمنتدى

sUlTaN

:: المركز الثاني في مسابقه أجمل طرح ::

بيانات موقعي

اسم الموقع: Sultan Shanqeeti

اصدار المنتدى: لا أملك منتدى

اقتباس

المشاركة الأصلية أضيفت بواسطة : pHp M!nD


	الـ CSS 3.0 صارت مو محببة (بسبب عدم توافقها مع جميع المتصفحات ) , ودخلت على الساحة طريقة الجافا سكربت (ولكن صعب ربطها مع منتديات الفي بي ) , فنحن ننتظر طريقة جديدة او توافق جديد للـ CSS 3.0 وموضوعك تحفة . يعطيك العافية ,

الله يعافيكـ لاكن الاصدار الجديد اللذي اقترب نزوله من انترنت اكسبلور يدعم تقنيةcss3
يعني ستظهر الـ css3 متوافقة مع جميع المتصفحات تحياتي

اقتباس

المشاركة الأصلية أضيفت بواسطة : أبوسامر الشريف


	طريقة حلوة ولكنها تطلع أخطاء في w3

ايه صحيح لذالكـ اذا كنت تريد تصميم ستايل متوافق مع المعايير القياسية لاتعتمد عليها
تحياتي

اقتباس

المشاركة الأصلية أضيفت بواسطة : ابو شدق


	شرح رائع جدا بارك الله فيك واعتقد فيه مكتبه جافا سكربت تربطه مع css3 ويتوافق مع المتصفحات

الجافا سكربت مازلت صعبة الدمج مع الفي بي لذالكـ ماعلينا الا انتظار الاصدار الجديد من كافة المتصفحات للتتوافق مع css 3
تحياتي

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع sUlTaN

hotmail.com

رقم المشاركة : [ 8 ]

18 - 09 - 2010, 13:20 nayZak غير متواجد حاليآ بالمنتدى

nayZak

:: عضـــو::

بيانات موقعي

اسم الموقع: Madrid VS Barca

اصدار المنتدى: 3.8.4

جميل جدا تم تجربة بعض الاكواد
www.psdez.com

nayZak

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع nayZak

MADRID VS BARCA FORUMS

تم فتح البادل الاعلاني
للاتصال بنا
contact

psdez.com

رقم المشاركة : [ 9 ]

18 - 09 - 2010, 13:27 Dz-Mustapha 7 غير متواجد حاليآ بالمنتدى

Dz-Mustapha 7

:: عضو نشيط ::

أرسل رسالة بواسطة Skype™ إلى Dz-Mustapha 7

بيانات موقعي

اصدار المنتدى: منتج اخر

شكرا لك اخويا

Dz-Mustapha 7

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع Dz-Mustapha 7

لا اله الا الله محمد رسول الله

║▌║││ █ ▌│║█║▌║
║▌║││ █ ▌│║█║▌║
║▌║││ █ ▌│║█║▌║
AlGeRiA
© 2011

Viva Palestine
صرت أكره احط مواضيع بسبب بعض ناس

رقم المشاركة : [ 10 ]

18 - 09 - 2010, 14:54 zedoon غير متواجد حاليآ بالمنتدى

zedoon

Banned

بيانات موقعي

اسم الموقع: فايف هوست

اصدار المنتدى: 3.8.6

مشكوووور يا الغالي

zedoon

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

رقم المشاركة : [ 11 ]

18 - 09 - 2010, 17:48 Ahmod غير متواجد حاليآ بالمنتدى

Ahmod

.:: عضو متألق ::.

بيانات موقعي

اصدار المنتدى: لا أملك منتدى

ماشاء الله جميلة جدا ال Css3

خاصا الحركة حقت ادراج خط غير موجود على جهاز المتصفح

تسلم يا الغالي ;)

الله يعطيك العافية

Ahmod

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع Ahmod

!

[/COLOR] [/RIGHT]
[/LEFT]

Don't Forget us

: 0020125584643 & 0020100786222 & design

zozika.net

رقم المشاركة : [ 12 ]

18 - 09 - 2010, 19:43 B O O 7 غير متواجد حاليآ بالمنتدى

B O O 7

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: منتج اخر

طيب عندي استفـسار ..
كيف يمكن إضافة خاصية text-shadow
لـ ستايل جاهز تم تركـيبـه ؟؟

B O O 7

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع B O O 7

رقم المشاركة : [ 13 ]

19 - 09 - 2010, 02:47 B O O 7 غير متواجد حاليآ بالمنتدى

B O O 7

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: منتج اخر

up
up
up

B O O 7

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع B O O 7

رقم المشاركة : [ 14 ]

19 - 09 - 2010, 14:56 B O O 7 غير متواجد حاليآ بالمنتدى

B O O 7

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: منتج اخر

B O O 7

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع B O O 7

رقم المشاركة : [ 15 ]

19 - 09 - 2010, 15:58 كواريزما غير متواجد حاليآ بالمنتدى

كواريزما

:: عضـــو::

بيانات موقعي

اسم الموقع: مطلوب دعم فني خبير

اصدار المنتدى: 3.8.4

جآآري التجربة
واي سؤال لا تقصر معي

كواريزما

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

أدوات الموضوع
عرض صفحة طباعة الموضوع ارسال الصفحة الى صديق
طرق العرض
العرض العادي الانتقال الى العرض المتطور الانتقال الى العرض الشجري

اكواد css 3 تساعدكـ في اخراج ستايلكـ بشكل افضل

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