Archive for August, 2011

عشره نقاط تميز ديف ميكس

بسم الله الرحمن الرحيم

في البدايه ساعرف بنفسي انا محمد جبريل وهأسرد عليكم  لماذا فكرت في صياغه هذا الموضوع وكتابته … كثيرا ما كنت اواجه باجابه لسؤال ما وهو “” ما الذي يجعلكم مختلفين عن غيركم مثلا فريق ما او نشاط لاحدي المجموعات الطلابيه “” .. ولكن كنت اقف بالساعات لافكر واجيب عن هذا السؤال .. ولهذا قررت ان ارتب افكاري واضع اجابه لهذا السؤال واللي تتلخص في 10 نقاط – لا تنتظر معلومه تقنيه – تجعل فريق ديف ميكس يختلف عن غيره وهي كالاتي

قياده ممتازه

ترددت كثيرا في صياغه هذا الفقره ولكن قولت في نفسي الحق أحق ان يتبع … اننا – بحمد الله – نملك قياده -بدون مبالغه – ممتازه في جميع النواحي : الاخلاقيه والمهنيه والاداريه فنحن وانا منهم نفتخر بان لدينا قائد له رؤيه واضحه وخبرات كبيره وهو بدوره ينقلها لنا حتي نكون في الصوره اللي ترضيه فى صالح الفريق .. قائد متفهم يحمل شعار لا للتعصب لراي ما او لشخص ما … انه الرجل الناسب في المكان امناسب

نحب ونؤمن بهدف

اننا وبحمد لله نحب ما نعمل ونجتهد ونعمل ونفشل ونعمل وننجح لنعمل الافضل … اننا مؤمنين بهدف وبرساله وبرؤيه واضحه تسعي لنشر المعرفه … هدفنا هو الغايه والوسيله اللي تبث فينا الروح وتعطي لنا الامل حتي نحقق ونصل الي ما نريد .. نحب جدا ما نؤمن به وسنحققه ان شاء الله وعندها سنسعي لهدف اخر ولرؤيه اخري لنحققها

نثق في قدراتنا

يجب ان تثق في قدراتك حتي تصل الي مرادك … يجب عليك ان تعلم انك ستحقق ذلك باذن الله ولا تدع مجال للشك في انك ستفشل لانك لو فعلت ستفشل فعلا … وهذا ما نقوم به كفريق تنثق في قدراتنا جدا ولكن ليس الي حد الغرور اننا نطور من انفسنا حتي تزيد ثقنا فينا .. ومن هذه الثقه نبدأ عملنا حتي نصل الي هدفنا

روح الفريق

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

نحترم الاراء ونتقبل النقد

اننا نؤمن جدا باننا لسنا كاملين مائه بالمائه – فالكمال لله وحده – ولهذا نعلم دائما ان هناك نقد وهذا سلبيات في كل شئ … ومن هنا جاء ايماننا بالراي الاخر واحترامه بل ودراسته ومعالجته … حتي وان كان النقد غير صحيح فاننا نكون ايضا قد استفدنا بمعرفه رؤا الاخرين فينا .. وان كان النقد صحيحا فاننا نقدر جدا من عبر عن رايه وساعدنا وحينا نعلم ان هناك من يقدرنا ويطمح بان نكون في افضل حال .. لهذا لا تبخل برايك وقول ما تحب فاننا ينتقبله بصدر رحب وبدراسه شامله

نتطلع للافضل دائما

نعم نحن لا نرضي بما وصلنا اليه .. نحن لا نقول اكتفينا بما حققناه .. نحن نعلم ان دائما هنالك الافضل .. بعد كل انجاز وكل هدف مصغر تم الوصول اليه نضع لنا اهداف اكبر واصعب حتي ما نلبس ان نصل اليها فنضع غيرها وهكذا فنحن لا نشعر بالرضي عما حققناه – ولكننا نرضي بما قسمه الله لنا – وهذه احدي النقاط القويه اللي تجعلنا دائما في نفس الروح الحماسيه

خطواتنا سريعه

نعم اننا نمضي باسرع ما نملك من طاقه ولكن ايضا نهتم بالجوده .. فانني لن اتحدث عن انجازاتنا لاننا نؤمن بان ما نفعله واجب علينا وليس اجتهاد منا .. نحن نمضي بخطوات سريعه في عده طرق ولكل طريق هدف سامي نسعي لنحققه .. نمضي باسرع ما يمكن لنحقق الذات ولننشر الرساله ولنشعر بوجودنا ونرضي ضمائرنا

لا نقبل الا بالافضل

نحن نعاني من مرض الوسواس -لا تنزعج من هذا المصطلح – نعم ولكن نحب هذا المرض لانه يجعلنا دائما نعيد التفكير اكثر من مره فيما نقوم به .. هل هذا افضل شئ ..هل هذا خير ما نقدمه .. هل سرضي الناس بما قدمناه .. دائما ما نطرح تلك الاسئله ونعيد النظر فيها اكثر من مره .. ولكن في النهايه نستقر ونهدأ لنقدم الافضل .. اعلم انه ليس الافضل علي الاطلاق ولكن هذا ما استطعنا الوصول اليه وبنقدك وتحليلك لنا هنحقق الافضل دائما ان شاء الله

نتطلع للمستقبل

نحن كفريق نعمل ونعمل حتي نصل الي ما نسعي اليه .. لكن لا يغيب عن فكرنا ولو للحظه المستقبل القريب وماذا ينتظرنا وما سوف نقدمه وما سوف نقوم عليه دائما ما يشل المستقبل جزء من تفكيرنا لاننا نؤمن اننا نمثل جزء – ولو بسيط – منه وايضا نشارك في صنعه ونتمني دائما ان يأتي الينا بكل غالي ونفيس ونري فيه ثمره اجتهادنا

شعبيه ليست بقليله

اننا – بحمد الله – نملك شعبيه كبيره لا ندعي ذلك ولكن نعشر وندرك ذلك وهذا ما يجعلنا دائما نقدم افضل ما لدنيا .. ان كل فرد فينا يملك شعبيه ليست بقليله وعدد كبير من الاصدقاء .. لا نتباهي بكثره اصدقائنا ولكن نتباهي بثمره اخلاقنا وتعاملاتنا مع الاخرين وهذا ما جمعنا كفريق حتي نقدم ما يرضي عنا اصدقائنا ومتابعينا والذين نرحب بهم ايضا كأصدقاء مقربين منا

في النهايه

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

وشكرا لكم المتابعه والسلام عليكم ورحمه الله

,

Leave a comment

9 articles in CSS/CSS3 from devmix

Hey all, devmix collect the 9 articles of CSS/CSS3 for you .. enjoy and share .. we only need one thing from you .. Your feed Back

The 9 articles are as follow:

CSS Basics | By Maha Elbasuony
CSS Basics || By Mohamed Ibrahim
CSS Advanced Topics By Mohamed Gebril
CSS3 – Introduction By Medhat Dawoud
CSS3 – Transitions By Maha Elbasuony
CSS3 – Hover crafting By Ahmed Daif
CSS3 – Transformation By Eman Elma3sarawy
CSS3 – Background By Ahmed Yousef
CSS3 – Enriching Forms By Mohamed Gebril

We hope that these articles were useful for you, wait us soon for more articles and keep contacting us:

DevMix Official Page on facebook
DevMix Page on GooglePlus
DevMix Team group on facebook
DevMix2011@gmail.com
http://twitter.com/DevMixTeam

🙂 Good Luck For All 🙂

, ,

2 Comments

CSS3 – Enriching Forms

بسم الله الرحمن الرحيم

استكمالا لما بدأناه كفريق ديف ميكس سنتابع اليوم موضوعا لا يخلي منه اي موقع … فعندما ندخل علي احد الموقع اما ان تسجل الدخول في الموقع اذا كان لك حساب عليه او اما ان تدخل علي صفحه التسجيل حتي تصبح عضوا فيه … ولكننا اليوم سنتناول الشكل العام لتسجيل الدخول وهسنتناول ان شاء الله تلك العنوانين

HTML Code
HTML Only Demo
Styling the Form Element
Adding CSS3 to the Form Element
Styling the Input Elements
Adding CSS3 to the Input Element
Styling the Button
Adding CSS3 to the Submit Button

🙂 والان نبدا العمل

Writing The HTML

HTML Code

HTML اول شئ لابد من عمل صفحه التسجيل باستخدام لغه

<form>
 <label>Username:</label> 
<input type="text"name="username"/>
 <label>Password:</label>
 <input type="password"name="password"/>
 <input type="submit"value="Submit" name="submit" class="submit"/>
</form>

HTML هذا الكود بسيط جدا وسهل الفهم اذا كنت تعلم البسيط عن لغه

HTML Only Demo

سيكون شكل الصفحه كما هوه مبين

Writing The CSS

والان حانت اللحظه … سوف نعطي هذه الصفحه بعضا من اكسير الحياه وسنفضي عليها من ابداعنا الخاص ولكن في البدايه سنضيف هذا الكود حتي نحدد مكان الفورمه وايضا الخلفيه الخاصه بالصفحه

* {
        margin: 0px;
        padding: 0px;outline: none;
    }

    body {
        background: #4E0085;
    }

Styling the Form Element

سنبدا الان من اعلي اي اسفل .. بمعني اننا سنتناول تنسيق هذا النموذج / الفورمه ونحدد لها الطول

والعرض وسيكون الكود بهذا الشكل

form {
    width: 250px;     padding: 20px;  border: 1pxsolid#270644;
}

وسيكون بهذا الشكل

Adding CSS3 to the Form Element

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

form {
 width: 250px;
 padding: 20px;
 border: 1pxsolid #270644;
 /*** Adding in CSS3 ***/
 /*** Rounded Corners ***/
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
 background: -moz-linear-gradient(19% 75%90deg,#4E0085, #963AD6);
 background:-webkit-gradient(linear, 0%0%, 0% 100%, from(#963AD6), to(#4E0085));
 /*** Shadow behind the box ***/
 -moz-box-shadow:0px
 -5px300px #270644;
 -webkit-box-shadow:0px
 -5px300px #270644;
}

وسيكون الشكل كالاتي

Styling the Input Elements

text box والان سوف نتناول تنسيق العنصر الخاص بــادخال النصوص
 نحن نريد ان نغير الخلفيه الخاصه بمربع ادخال النص وايضا تكبير حجمه وتغير مكانه قليلا

وسيكون الكود بهذا الشكل

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1pxsolid#ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

 transitions سنقوم باضافه الكود السابق ومع بعض الاضافات التي تفضي قليلا من الجمال وهي
وسيكون الكود بها الشكل

input
{
 width: 230px;
 background: #8a33c6;
 padding: 6px;
 margin-bottom: 10px;
 border-top: 1pxsolid #ad64e0;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px;
 /*** Adding CSS3 ***/
 /*** Transition Selectors - What properties to animate and how long ***/
 -webkit-transition-property: -webkit-box-shadow, background;
 -webkit-transition-duration: 0.25s;
 /*** Adding a small shadow ***/
 -moz-box-shadow: 0px 0px2px #000;
 -webkit-box-shadow: 0px 0px2px #000;
}

ولكن سيتم تفعيل هذه الخاصيه السباق ذكرها عندما يقف مؤشر الفاره علي مكان ادخال النصوص
text boxes

وسيكون الكود بهذا الشكل

input:hover 
{
-webkit-box-shadow: 0px 0px4px#000;
background: #9d39e1;
}

وسيكون الشكل النهائي كما هو مبين 

Styling the Button

submit يتبقي لنا تنسيق شكل الزر

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

وسيكون الكود بهذا الشكل

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow: #0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
}

والشكل النهائي سيكون كما هو مبين

Adding CSS3 to the Submit Button

والان ستم اضافه الكود السابق الي الزر الخاص به وهذا شكل الكود

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow:#0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
 /*** Adding CSS3 Gradients ***/
 background: 
-webkit-gradient(linear, 0% 0%, 0%100%, from(#963AD6), to(#781bb9));
 background: -moz-linear-gradient(19% 75%90deg,#781bb9, #963AD6);
}

وسيكون الشكل النهائي كما هوه مبين

وبهذا يكون قد اتهينا من شرح كل جزء واضافه التاثيرات عليه وكما قلنا افضينا عليه بعض من اكسير الحياه … في النهايه هذا هوه كود الصفحه بالكامل لتجربته علي جهازه

😀 … ولكن نحن نتتظر منك رايك في الموضوع وتجربتك الشخصيه للكود

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>this activity belong to Devmix team </title>
	<meta name="description" content="this activity belong to Devmix team.">
	<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;outline: none;
	}

	body {
		background: #4E0085;
	}

	form {
		border: 1px solid #270644;
		width: 250px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
		background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
		margin:50px auto;
		padding: 20px;
		-moz-box-shadow:0px -5px 300px #270644;
		-webkit-box-shadow:0px -5px 300px #270644;
	}

	label {
		font-size: 12px;
		font-family: arial, sans-serif;
		list-style-type: none;
		color: #fff;
		text-shadow: #000 1px 1px;
		margin-bottom: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		text-transform: uppercase;
		display: block;
	}

	input {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
	  	padding: 6px;
		border-bottom: 0px;
		border-left: 0px;
		border-right: 0px;
		border-top: 1px solid #ad64e0;
		-moz-box-shadow: 0px 0px 2px #000;
		-webkit-box-shadow: 0px 0px 2px #000;
		margin-bottom: 10px;
		background: #8a33c6;
		width: 230px;
	}

	input.submit {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
		width: 100px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
		color: #fff;
		text-transform: uppercase;
		text-shadow: #000 1px 1px;
		border-top: 1px solid #ad64e0;
		margin-top: 10px;
	}

	input.submit:hover {
		-webkit-box-shadow: 0px 0px 2px #000;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
	} 

	input.submit:active {
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
		background:  -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
	}

	input:hover {
		-webkit-box-shadow: 0px 0px 4px #000;
		background: #9d39e1;
	}
	</style>
</head>
<body>
<form action="">

		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password" />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>	

</body>
</html>

🙂

شكرا لحسن المتابعه ولا تنسي ان تعبر لنا عن رايك سواء بالسلب او

بالايجاب

كتب هذا المقال / محمد جبريل

, , ,

2 Comments

CSS3-Background

السلام عليكم ورحمة الله وبركاته ..

فى المقالة دى إن شاء الله هنتكلم عن موضوع مهم جدا ,
وفى نظرى من ضمن الأضافات الأكثر تأثيرا وظهورا فى السى اس اس 3 .
قبل البدء فى الشرح أود أن أطرح بعض الأسئله والتى سوف نجيب عليها فى أثناء المقاله :-
أولا:-ماهو الجديد فى الخلفيات فى السى اس اس 3 ؟
ثانيا:-هل يمكن إضافة أكتر من صورة كخلفية لصفحة الأتش تى إم إل؟؟!!
ثالثا:-هل يمكن تغيير حجم الخلفية لصفحة الأتش تى إم إل؟؟!!
رابعا:-هل يمكن تغيير درجة لون الخلفيه ؟؟!!

دعونا نبدأ فى البدايه مع السؤال الأول .ماهو الجديد فى الخلفيات كخصائص موجودة مسبقا فى السى اس اس2 ؟؟؟
أو ماهى الأضافات فى خاصية الخلفيات فى السى اس اس 3 ؟؟
فى البددايه كيف نكتب خاصية الخلفيه فى السى اس اس عامة

Body{
background:url(imagename.jpg)   left   bottom  no-repeat
}

, فإنه توجد العديد والعديد من الخصائص الجديدة فى السى اس اس 3
-:ولكن من أفضل الخصائص الموجودة فى السى اس اس 3 هى الخلفيه ففى هذة النسخه يمكنك
(1        إضافة أكتر من صورة فى الخلفيه
(2         التحكم فى حجم الخلفيه
(3         التحكم فى درجة اللون
وهذة الخصائص الجديدة تقودنا إلى السؤال الثانى وهو ,هل يمكن إضافة أكتر من صورة للخلفيه ؟؟!!
لو سألتنى مثلا منذ عدة سنوات هذ السؤال لقلت إن ذلك مستحيلا ولكن مع السى اس 3 لايوجد مستحيل
(مع ديف ميكس مفيش مستحيل )تستطيع عمل ذلك من خلال هذا الكود البسيط

Body{
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
}

نوصل لنقطه مهمه وبتضايق ناس كتير من السى اس اس 3 ألا وهى دعم المتصفحات لهذة الخاصيه :-
Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) andInternet Explorer (9.0+) 😀

وبكدا نكون وصلنا للسؤال الثانى ألا وهو هل يمكن التحكم فى حجم خلفية الصورة ؟؟!
بدون إطاله فى الكلام يمكن هذا وبكل سهوله عن طريق هذا الكود الصغير والمميز من السى اس اس 3

div {
background-image: url(imagename.png);
background-repeat: no-repeat;
background-size: 100% 100%
}

وكالعاده فى كل الخصائص هنشوف دعم المتصفحات وهيكون كالتالى
Opera 9.5, Safari 3

بعد كدا إن شاء الله نوصل للنقطه المهمه وهى إزاى أعمل صفحه مدرجه أو جزء مدرج فى الصفحه زى الشكل دا

الكود واضح مع تغير لون الصورة

, , , , , ,

1 Comment

CSS3 – Transformation

                                                                   CSS3 — Transformation

السلام عليكم ورحمة الله وبركاته

ان شاء الله هنكمل مع بعض درس جديد وشيق جدا تكملة على الدروس الماضية

-: يحتوى هذا الدرس على اربعة مواضيع رئيسية

التكبير Scale -1

الدوران Rotate -2

الانحراف Skew -3

x و y التحكم فى محورى Translate -4

التكبير Scale -1

تتيح لك عمل تكبير لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2);

– : كما عرفنا فى المقالات الماضية ان

-webkit —–> Chrome & safari

يعنى الكود اللى يكون فيه كدة يعمل على متصفحى جوجل كروم و سفارى وهناك بعض الاوامر للعمل على باقى المتصفحات سنتعرف عليها معا فى المثال الكامل

فتعنى تكبير الصورة بنسبة %20 من حجم الصورة الاصلى فى الاتجاهين الصادى والسينى scale(1.2)اما

الدوران Rotate-2

تتيح لك ايضا عمل دوران لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) rotate(+150deg);

هذا الامر يعنى انه يعمل دوران للصورة ب 150 درجة ف الاتجاه الموجب وهناك امر rotate(+150deg)

يعمل هذا الامر على الدوران حول المحور السينى فقط ومثله بالنسبة للمحور الصادىrotateX(+150deg)

الانحراف Skew-3

تتيح لك ايضا عمل انحراف لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) skew(+20deg, -10deg);

هذا الامر يستخدم لعمل انحراف لاحداثيات الصورة بدرجات معينة محورى السينى skew(+20deg, -10deg)

والصادى

x و y التحكم فى محورى Translate-4

لصورة او نص و هذا من خلال هذا الامر X ,Y تتيح لك ايضا التغير فى قيم ال css3

 -webkit-transform: scale(1.5) translate(20px, 40px);

—-Scale الناس هتيجى تقولى طب ايه الفرق بينه وبين ال

هنقول ان الفرق انى لما بقول اكبر واعمل اسكيل ف انا بيكون متاح ليا انى اكبر مرة ونص او الضعف وهكذا

فقط X فقط او محور ال Y انا بقدر اتحكم انى ازود محور ال translate لكن ف

لما يكونوا الاتنين موجب كدة معناها انى بزود من ناحية اليمين و اسفل والعكس … صحيح

وممكن تزود وتنقص حسب مالديزين اللى انت عايزه

وكدة نبقى عرفنا معنى كل موضوع وايه الناتج من استخدامه مش شرط طبعا اننا نستخدمهم كلهم فى مكان واحد لكن —

بنسخدمهم عشان نعمل ديزين كويس للموقع بتاعنا وغالبا ان اكثر ديزين بيجذب الانتباه اللى بيكون بسيط يعنى مش فيه

.الوان كتير ولا يكون فيه زخرفة كتير والشاطر اللى يعرف يوظف كل شئ بيتعلمه فى مكانه الصح

ودلوقتى هنبدا نشوف ازاى لما احط سطر الكود اللى فوق هيعمل الناتج دا وازاى استخدمه والمكان اللى هحط فيه الكود بتاعى

hover — Mouse Events بداية كدة ان الكود دا شغال على

يعنى مثلا لما اجى امشى بالماوس على صورة التاثيرات اللى ممكن تحصل انى احرك الصورة من مكانها او انى اكبرها عشان توضح او انى اغير اتجاها يعنى انى انقل الصورة من مكانها واغير فى احداثيات الصورة السينى والصادى

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

<head>

<style type="text/css">

#img1:hover{

-webkit-transform: scale(1.2);

}

</style>

</head>

<body>

<ul>

<img src="1.jpg" id="img1" width="130" height="130"/>

</ul>

</body>

وبعد ان انتهينا من معرفة كتابة الكود والتطبيق …….. اليكم هذا المثال كامل على الاربع مواضيع اللى اتكلمنا عنهم ممكن تحملوه من هنا

CSS3بعد ما طبقنا الكود وعرفنا بيشتغل ازاى وشوفنا المثال اللى معمول ب —

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

🙂 وبكدة اكون وصلت لنهاية درسنا

🙂 فريق الديف ميكس يرحب باستفساراتكم واسئلتكم

,

1 Comment

CSS3 – Hover crafting

Pseudo elements

هى عناصر تأخذ هذا الشكل
(selector:pseudo-element {property:value;})
يمكن لأى عنصر ان يستخدمها وابرزها
(hover) و (focus) و (active)
من اهم ما يميز تصميمات الويب عن غيرها هو التفاعل بين المستخدم والصفحة وظهور افكار جديدة فى كل صفحة وهذه اهم وسائل التفاعل فى لغة السي اس اس
hover
يتم تنفيذها عندما يأتى مؤشر الماوس على العنصر الموضوعة عليه

<style type="text/css">
#abc{
color: #FF0000;
}
#abc : hover
{
color:#0000FF;
}
</style>
<span id="abc">thi s is element</span>

نلاحظ من المثال السابق تغير لون العنصر عندما ياتى مؤشر الماوس عليه
ولكن هل كان هذا موجود فى سى اس 2 .. نعم ولكن ما هو الجديد فى سى اس 3 فى الواقع لا يوجد جديد بمعنى الكلمة فى هذه النقطة ولكن الجديد هو الخصائص الجديدة التى اضافها الاصدار الثالث التى يمكنها التغير عندما يأتى الماوس عليها والتى اعطت مساحة حرية اكبر لظهور تأثيرات جديدة مثل
(transition) و (text effects) و (transform)

<style type="text/css">
#abc
{
Width:150px;
Height:200px;
background-color:#000000;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
#abc : hover
{
Width : 450px;
*/الكود ده بيغير العرض بالايفيكت الاصلى/* (transition)
}
#efg:hover
{
text-shadow: 3px 3px 3px #00FF00;
*/الكود ده بيعمل ايفيكت على الكلام /*
}
#hij
{
width:200px;
height:100px;
background-color:#00FF00;
}
#hij : hover
{
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
*/ الكود ده بيعمل (rotation) /*
}
</style>
<div id="abc">thi s is element 1</div>
<h1 id="efg">thi s is element 2</h1>
<div id="hij">thi s is element 1</div>

out put
out put
اذا حاولت تجربة هذا الكود
الناتج سوف يظهر للمتصفحات التى تدعم السى اس اس 3

,

1 Comment

CSS3 – transitions

  1. Introduction
  2. Transition Properties
  3. Shorthand transitions

                  *********************************************************

Introduction

النهارده هنناقش سوا ف الترانزيشنز/ الانتقالات …. خلونا نبدء بمثال بسيط عشان نفهم الدنيا ماشيه ازاى

لو عاوزه  اما اقف ع لينك اغير الخلفيه بتاعه من لون لاخر ياترى اعمل  ايه ؟

اكيد اى حد هيقولى ببساطه خالص استخدمى ال
hover

 وغيرى الخلفيه بيه وهيغيرها بكل بساطه ذى كده

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


اوك تمام
ده اللى كلنا بنعمله بس لو انا واحد عاوز اعمل شىء مختلف شويه
عارفين الفلاش لما اجى ف كل فريم واغير لون الخلفيه مثلا لباتون او لينك بحيث ان اللون يتغير بالتدريج ؟
اهو انا عاوزه ده من غير فلاش عاوزاه بالسى اس اس

هل اقدر اعمله ؟!

 🙂 مفيش شىء مستحيل
طب اعمله ازاى ؟

هعمله بالترانزيشنز/الانتقالات
تمام يبقى انا عرفت الترانزيشنز حالا انها بتسخدم  لما اعمل اى ايفكت/ تاثير ع باتون او لينك او غيرهم

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

اول شىء محتاجه انى احدد الخاصيه اللى عاوزها تتاثر سواء حجم او لون او غير ذلك
تانى حاجه الزمن اللى هتتغير فيه
مثلا عشان اغير لون باتون من اخضر لاسود هيتغير ف مده اد ايه

transition: property  “duration ” == transition width 2s

بقوله هتعمل الترانزيشن ع الويدث ومده الترانزيشن بتاعى ثانيتين

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			-webkit-transition:background 6s; /* safari and Chrome */
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


انا حاليا قبل ما احط الماوس ع اللينك هيكون لون الخلفيه اخضر هنا بقوله انا هعمل الترانزيشن ع الخلفيه وبديها لون اخضر غامق

واما يعمل الترانزيشنزهيعمله ع الخلفيه ومدته6 ثوانى والبراوزر بتاعى كروم او سفارى
اول ما الماوس يقف ع اللينك يبدء اللون تدريجيا يتحول الى اللون الاخضر الغامق

طبعا ممكن تطبق ع اى خاصيه اخرى او اكثر من خاصيه عن طريق دمجهم سوا

مثال
width & height & rotate

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* safari and Chrome */
			}
			div:hover
			{
			width:100px;
			height:100px;
			-webkit-transform:rotate(180deg);  /* safari and Chrome */
			}
		</style>
	</head>
	<body>
		<div>Hover over me to see the transition effsct ! </div>
	</body>
</html>

Try With Yourself 😀

                  *********************************************************

Transition Properties

عندنا اربع خصائص بتستخدم مع الترانزيشنز

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

1-transition-property

transition-property: none|all|property;

من اسمها هى الخاصيه اللى هطبق عليها الترانزيشن سواء
width, height , background ,……,etc

بتاخد قيم اما انها ماتعملش اى الترانزيشنز وطبعا بحتاجها ف حالات معينه

او انها تطبق ع كل البروبرتز او تطبق  ع بروبرتى معينه وف الحاله دى بكتب اسمها

2-transition-duration

transition-duration: time;

وهى المده اللى هياخدها الترانزيشنز عشان يتنفذ
مثال لو هغير لون من ازرق لاسود مثلا الانتقال او التدريج بيبقى ف فتره اد ايه
هل ثانيه ولا اتنين ولا اكتر

3-transition-timing-function

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

ازاى السرعه اثناء الترانزيشن بتكون  ودى بتاخد قيمه من القيم دى

(ease (Default value) ,linear, ease-in, ease-out, ease-in-out, and cubic-bezier)

4-transition-delay

transition-delay: time;

بيحدد الوقت اللى الترانزيشن هيبدء فيه الديفولت بتاعه “صفر” اى انه يبدء الترانزيشن

علطول , ممكن اخلى الترانزيشن يتاخر شويه ثانيه او اتنين وهكذا

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition-property:width ;
			-webkit-transition-duration:1s;
			-webkit-transition-timing-function:linear;
			-webkit-transition-delay:2s;
			}
			div:hover
			{
			width:200px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>

                  *********************************************************

Shorthand transition

دى طريقه مختصره لكتابه الكود بدل ما اكتب كل بروبرتى وقيمتها لا هعمل طريقه مختصره بحيث انى اكتب القيم بس

طب نجرب نفس المثال السابق بس بالطريقه المختصره دى

<html>
	<head>
		<style type="text/css">
			div
			{
			width:20px;
			height:50px;
			background:red;
			-webkit-transition:width 1s linear 2s;
			}
			div:hover
			{
			width:60px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>





                  *********************************************************

Good Luck 🙂
Maha Elbasuony

,

Leave a comment