Posts Tagged web

Become HTML5 developer ,right now

Hello every body,

first I am HTML5 geek so i will take about it in some articles,
but in first article I want to tell you why i love HTMl5 in 10 reasons

1 – Accessibility:

HTML5 makes creating accessible sites easier for two main reasons:
semantics: The new (some currently available) HTML headings like: <header> , <footer> , <nav> , <section> , <aside> , etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class.

ARIA : ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes.For a more in depth discussion on HTML5 and ARIA please visit the WAI.

2 – Video and Audio Support:

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags,It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly(will eplain later in upcoming articles),

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
</video>

3 – Doctype

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting andpasting some long unreadable line of code and no more dirty head tags filled with doctype attributes.

4 – Cleaner Code

If you are passionate about simple,HTML5 is the beast.
Consider this typical and simple header code with navigation:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
<h1><code>Header Text</code></h1>
<ul>
	<li><code><a href="#">Link</a></code></li>
	<li><code><a href="#">Link</a></code></li>
	<li><code><a href="#">Link</a></code></li>
</ul>
</header>

5 – Smarter Storage

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database.
Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins.
for more info.

6 – Better Interactions

we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas> ,
Beyond <canvas> , HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:
1) Drag and Drop (DnD)
2) Offline storage database
3) Browser history management
4) document editing
5) Timed media playback

7 – Game Development

Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.
for more Info. wait our upcoming articles.

8 – Cross Browser Support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers.
HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

9 – Mobile, Mobile, Mobile!!!

mobile technology is becoming more popular these days.The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays.
you can also make mobile apps with HTML5!!!(wait upcoming articles).
For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

10 – It’s the Future, Get With It!!!!

it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary,
You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

finally

I hope you start to use HTML5,
Happy new year 🙂

AhmedYousef

, , , ,

7 Comments

التصميمات المرسلة فى المسابقة – قيّم معانا

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

Group 1

DevRock_design1

Download


Group 1

DevRock_design2

Download


Group 2

Grendizer_design1

Download


Group 1

Grendizer_design2

Download


Group 3

Yousif_design1

Download


Group 3

Yousif_design2

Download


Group 4

Sara_design1

Download


Group 4

Sara_design2

Download


هناك اعمال اخرى لم يتم عرضها .. سيتم فحصها وعرضها ان شاء الله ولكن خارج المنافسة علما بان هناك تصميمات تم ارسالها تخالف قواعد المسابقة ولكن اصحابها لهم من الفريق كل الاحترام والتقدير على المجهود وحفاظا لحقوق الفكرية لهم سيتم نشر اكوادهم ايضا ولكن بعد انتهاء واعلان الفائز فى المسابقة (إبداع)… سيتم التقييم خلال 42 ساعة من الان من خلال حضراتكم ومن خلال لجنة التحكيم ايضا وبعدها سيتم الاعلان عن الفريق الفائز فى المسابقة بناء على التقييم من اللجنة ومن أرائكم ان شاء الله .. بالتوفيق 🙂

, , , , , , ,

6 Comments

مسابقة إبداع لتصميم صفحات الويب

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

متابعى فريق ديف ميكس وأنشطته الاعزاء .. نقدم لكم نشاط جديد وهذه المرة بمشاركتكم انتم وهى مسابقة إبداع فى تصميم صفحات الويب باستخدام XHTML+HTML5+CSS+CSS3 مع مراعاة عدم استخدام أدوات أخرى مثل ال JavaScript ويكمن ابداعكم فى هذه المسابقة فى اختياركم للافكار المعبرة عن التصميم وسوف يتم التقييم على الافكار قبل الادوات من قبل مصممين ذات كفاءة عالية سوف يعلن عنهم لاحقا لذا ارجو التركيز فى هذه الاعمال التى سوف تقدم.

مسابقة إبداع

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

للمسابقة قواعد بسيطة لو تم الالتزام بها سوف تعم الفائدة على الجميع باذن الله، وهى كالتالى:

1 – اهمها الالتزام بمواعيد تسليم التصميمات التى سوف ينوه عنها واى تأخير لن يتم قبول هذه التصميمات للاسف فهناك died-line للمسابقة لا يمكن تعديه.

2 – كان هناك قاعدة بالزام العمل فى فريق ولكن .. طلب الكثير بعدم التحتم عليها حيث ان هناك الكثير بمفردهم .. لذا فمن الممكن ان تشترك منفردا ولكن من حقك تكوين فريق لا يتعدى ال 4 افراد.

3 – ارسال الاعمال فور الانتهاء منها فى سرية تامة الى devmix2011@gmail.comحتى يتم عرضها على لجنة التحكيم دون عرضها على العامة لتقيمها قبل انتهاء ميعاد المسابقة الاصلي.. وعند الانتهاء سوف يتم عرضها مفتوحة المصدر كما فى المثال التالى:

fci_design1

Download Design

Designed By:

  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII

Evaluation From Here

يستطيع الجميع انزال التصميم بملفاته من Download Design ويقوم بعدها بوصضه التقييم فى مكان التقييم المبين فى لينك Evaluation واتنى يكون التقييم فعلا على الاعمال بعيدا عن المجاملات والصداقات وسوف تعرض كل الاعمال فى موضوع واحد ان شاء الله مفتوحة المصدر.. اما عن اعلان الفائز فسوف يكون بعد يوم من التقييمات واهداء الجوائز فى أول ايفينت للفريق ان شاء الله فى القريب العاجل ليكون تكريم امام الجميع.


لجنة التحكيم:

عندما فكرت فى عمل لجنة لتحكيم الاعمال المقدمة وتقييمها .. قررت اختيار احسن المصممين على الاطلاق المعروفين لدى الكثير منكم فلجنة التحكيم تتكون من 3 افراد هم:

مهندس محمود متولى – مهندس UI/UX فى شركة كلود نينرز.

مهندس تميم ابراهيم – مهندس تصميم صفحات ويب ومدير شركة TameemGroup .

مهندس مدحت داود – مطور صفحات ويب ومنظم المسابقة.

تم الاتفاق على ان التقييم لن يكون فقط على جمال التصميم او كفاءة التول بل سيتوسع التقييم الى الفكرة الابداعية التى وراء التصميم .. فكن مبدعا 🙂


نظام المسابقة: {المطلوب فى المسابقة}

المطلوب الاول: مطلوب عمل تصميم فى احد المواضيع التالية:

-تصميم موقع لمدينة علمية

-تصميم موقع لمكتبة

-تصميم موقع لصفحة شخصية لاي من الشخصيات (مهندس -دكتور – مدرس – بياع سندوتشات :))

المطلوب الثانى: مطلوب عمل تصميم من ابداعك .. فكرة ابداعية من خيالكم تنفذ بشكل يجعلنا عندما ننظر اليها نستطيع ان نستشف الفكرة من التميم ولاى غرض تم.


طريقة تسليم الأعمال:

كما نوهت من قبل سيتم ارسالها على devmix2011@gmail.com ولكن الان انوه عن ما سيتم ارساله ، مطلوب وضع كل الملفات فى ملف واحد مضغوط zip/rar وارساله وتسميته باسم المجموعة المقدمة واذا كان التصميم الاول واسم المجموعة مثلا FCI سيتم تسمية الملف fci_design1.zip وارساله على الفور وبالطبع لو كان الديزاين الثاني سيكون fci_design2.zip بهذه الطريقة يكون الموضوع اكثر تنظيما، وسوف يتم ارسال الاعمال من المتحدث باسم الفريق الذي سيسجل فريقه فقط وليس مطلوب ان كل فرد فى الفريق ان يسجل.


طريقة التسجيل:

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

التسجيل مفتوح من الان وحتى غدا 2 سبتمبر 2011 الساعة 12 منتصف الليل وبعدها يتم اغلاق التسجيل وتبدأ المسابقة ولمدة 4 ايام باذن الله.

نتمنى من الله ان يجعلنا سبب فى ان نساعد الناس فى العلم والتعلم .. بالتوفيق 🙂

, , , , , , ,

5 Comments

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 – 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