Archive for category Basics

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

CSS3 .. Track II of web with DevMix Team

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

كما وعدناكم من قبل مع سلسلة الويب والتى بدأت بمجموعة من المقالات فى الــ
HTML5
مستمرين معكم فى نفس السلسلة .. ويسر فريق ديف ميكس ان يعلن عن الآتى

CSS 3

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

حيث انه تم نشر 3 مقالات فى الفيرجن 2 من نفس اللغة والتى تعتبر فى المقام الاول ليست لغة برمجة انما هى طريقة لتنسيق صفحات الويب

انتظروا فى اقرب وقت جدول بالمقالات القادمة فى هذا التراك .. ممكن تنزلوا الكتاب ده من اللينك ده

, ,

Leave a comment

CSS–Advanced Topics

Alsalamo alekom .. we will continue what we started which is css reviews … so u have to check this links befour we start CSS Basics || and CSS Basics | Now we will talk about something advanced about CSS .. our topics will be

  • CSS – Cursor

  • CSS – Position

  • CSS – Layer

  • CSS – Display

CSS – Cursor

we will change cursor icon when we do action like “we are over text” we have many cursors like :

  • default – Display the normal mouse cursor

  • iconwait – The mouse icon to represent the computer “thinking”

  • crosshair – A cross hair reticletext – An “I” shaped icon that is displayed when selecting textpointer

  • A hand icon that you see when you hover over an
    HTML link-help

  • A question mark (usually)

Lets Try it now .. Just make Style tag and copy this :

 p { cursor: wait }
 h4 { cursor: help }
 h5 { cursor: crosshair }

and make your mouse over each one and see what happended 🙂 … and tell me

CSS Position

You will be able to manipulate the exact position of your HTML elements

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we can make it abit to right or to left , up , down or mix of them … i like “mix” remeber me “DevMix” 🙂 so the css code will be :

 

 h3 { 
 position: relative; 
 top: 15px;
 left: 150px;
 }
 p { 
 position: relative; 
 left: -10px;
 }

See this to understand more :

BeforeCSS    After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser’s viewable area, so be sure you are measuring from that point.

CSS Code :

 h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
 }
 p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
 }

CSS –  Layers

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other. To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

 h4{ 
 position: relative; 
 top: 30px;
 left: 50px;
 z-index: 2;
 background-color: #336699;
 }

 p { 
 position: relative; 
 z-index: 1; 
 background-color: #FFCCCC;
 }

CSS – Display

Display Block and Inline

are you bored from using <br/> tag ?? yes me too .. what will we so if we have ablock of links … wil we using <br/> tag alot and alot ?? no css will make it easy for you let’s have an example :

CSS Code:

 a { display: block; }
 p { display: inline; }

Display:

Developers Mix
Developers Mix

Developers Mix

Developers Mix

Developers Mix

    These Links     belong   to     DevMix blog

 

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus.This is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none". Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a
display value of “block”.

Finally

I hope add something new to ur knowleadge ,,, thanks for reading …
we wait your feedback ….. ohhh Dont Forget we will make articles
about CSS3 … Don’t Miss it 😀

By : Mohammed Gabrail

, , , , , ,

6 Comments

CSS Basics ||

 

Background

  • Background Color
  • Background Image

Demo:
<html>

<style>
p{background-color:gray;}
h3{background-image: url(images.jpg);}
</style>
<body>
<p> DevMix Team </p>
<h3>pla pla pla pla pla…… </h3>
</body>
</html>

Text

  • Text Color
  • Text Decoration
  • Text Alignment
  • Text Indentation
  • Text Transformation

Demo:
<html>

<style type=”text/css”>
p{color: maroon;}
h1{text-decoration: underline;}
h2{text-align: center;}
h3{text-transform: uppercase;}
h4{text-indent:30px;}
</style>
<body>
<p>DevMix Team</p>
<h1>i love Orange :)</h1>
<h2>Hello! </h2>
<h3>mohamed </h3>
<h4>CSS Styling </h4>
</body>
</html>

Fonts

  • Font Family
  • Font Size
  • Font Style

Demo:
<html>
<style type=”text/css”>
p.family{font-family: Arial,sans-serif;}
p.size{font-size: 40px;}
p.style{font-style:italic;}
</style>

<body>
<p> Font Family ,arial ,sans_serif </p>
<p>Font Size with pixels </p>
<p>Font Style Italic </p>
</body>
</html>

Lists

  • List Type
  • List Image

Demo:
<html>

<style type=”text/css”>
ol.m{list-style-type: lower-alpha;}
ul.n{list-style-type: square;}
ul.i{list-style-image: url(images2.jpg)}
</style>
<body>
<ul>
<li>first </li>
<li>second</li>
</ul>
<ol>
<li>pla pla pla </li>
<li>pla pla pla pla pal </li>
</ol>
<ul>
<li> image </li>
</ul>
</body>
</html>

Links

  • a:link \\ unvisited link
  • a:visited \\ visited link
  • a:hover \\ mouse over link
  • a:active \\ selected link

Demo:
<html>

<style type=”text/css”>
a:link{color:blue;}
a:visited{color: red;}
a:hover{color: maroon;}
a:active{color: gray;}
</style>
<body>
<a href=”www.google.com” >Google</a>
</body>
</html>
</body>
</html>
By: Mohamed Ibrahim 🙂

,

3 Comments

10 Articles Introduction to HTML5 is Done !

Hey all, devmix promise with a few articles of HTML5 in 3 days .. and it’s done 🙂
we promise also with other articles in HTML5 in the other sides of this language, wait us very soon isA .. we only need one thing from you .. Your feed Back

The 10 articles are as follow:

HTML5 — How came to be ? By Mohamed Gebril
Detecting HTML5 Features By Mohamed Ibrahim
HTML5 getStarted(); By Mohamed Ashraf
HTML5 – Canvas element By Mai Mohamed
HTML5 – Video element By Medhat Dawoud
HTML5 – Geolocation By Eman Elma3sarawi
HTML5 – Local Storage By Maha Elbasuony
HTML5 – Let’s Take This Offline By Amar Ashor
HTML5 – What Is MiCroData? By Dina Wasef
HTML5 – Fantastic Form By Medhat Dawoud

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 🙂

, , , , ,

3 Comments