gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: converted single to triple backticks6 (#36233)

Browse Source
This commit is contained in:
Randell Dawson
2019-06-20 14:40:26 -07:00
committed by Tom
parent 9c90b163d6
commit 19a601f135
75 changed files with 1760 additions and 1577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
guide/arabic/csharp/foreach/index.md
View File

@ -23,7 +23,8 @@ localeTitle: Foreach حلقة
### انتاج:
`> We have Jim
> We have Jane
> We have Jack
`
```sh
> We have Jim
> We have Jane
> We have Jack
```

50
guide/arabic/csharp/if-else-statement/index.md
View File

@ -8,32 +8,34 @@ localeTitle: إذا كان البيان الآخر
## مثال
`if(boolean expression)
{
// execute this code block if expression evalutes to true
}
else
{
// always execute this code block when above if expression is false
}
int Price = 30;
If (Price = 30)
{
Console.WriteLine("Price is equal to 30.");
}
Else
{
Console.WriteLine("Price is not equal to 30.");
}
`
```
if(boolean expression)
{
// execute this code block if expression evalutes to true
}
else
{
// always execute this code block when above if expression is false
}
int Price = 30;
If (Price = 30)
{
Console.WriteLine("Price is equal to 30.");
}
Else
{
Console.WriteLine("Price is not equal to 30.");
}
```
بما أننا أعلنا بالفعل أن السعر لدينا هو 30 ، سيكون هذا هو الناتج المتوقع.
## انتاج |
`Price is equal to 30.
`
```
Price is equal to 30.
```

11
guide/arabic/csharp/indeterminate-parameters/index.md
View File

@ -28,8 +28,9 @@ localeTitle: معلمات غير محددة
## انتاج:
`> Parameter 0 is 1
> Parameter 1 is 2
> Parameter 2 is 3
> Parameter 0 is 4
`
```
> Parameter 0 is 1
> Parameter 1 is 2
> Parameter 2 is 3
> Parameter 0 is 4
```

9
guide/arabic/csharp/interface/index.md
View File

@ -28,12 +28,13 @@ localeTitle: جهة تعامل
مثال على واجهة:
`public Interface IUserFavoriteFood
{
```csharp
public Interface IUserFavoriteFood
{
void AddFood();
Task<User> EatFavoriteFood(int id);
}
`
}
```
* * *

5
guide/arabic/csharp/linq/all/index.md
View File

@ -8,8 +8,9 @@ localeTitle: الكل
### التوقيع
`public static bool All<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
`
```csharp
public static bool All<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
```
## مثال

46
guide/arabic/csharp/linq/any/index.md
View File

@ -8,28 +8,30 @@ localeTitle: أي
### التوقيع
`public static bool Any<TSource>(this IEnumerable<TSource> source);
public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
`
```csharp
public static bool Any<TSource>(this IEnumerable<TSource> source);
public static bool Any<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate);
```
## مثال
`var fruits = new List<Fruit>() {
new Fruit() { Id = 1, Name = "Orange", Color = "Orange", Quantity: 3 },
new Fruit() { Id = 2, Name = "Strawberry", Color = "Red", Quantity: 12 },
new Fruit() { Id = 3, Name = "Grape", Color = "Purple", Quantity: 25 },
new Fruit() { Id = 4, Name = "Pineapple", Color = "Yellow", Quantity: 1 },
new Fruit() { Id = 5, Name = "Apple", Color = "Red", Quantity: 5 },
new Fruit() { Id = 6, Name = "Mango", Color = "Yellow", Quantity: 2 }
};
// Check if any Fruits have a quantity greater than 20
var anyFruitGreaterThanTwenty = fruits.Any(f => f.Quantity > 20); // true
// Any Fruit with color Green
var anyGreen = fruits.Any(f => f.Color == "Green"); // false
var hasFruits = fruits.Any(); // true
var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true
`
```csharp
var fruits = new List<Fruit>() {
new Fruit() { Id = 1, Name = "Orange", Color = "Orange", Quantity: 3 },
new Fruit() { Id = 2, Name = "Strawberry", Color = "Red", Quantity: 12 },
new Fruit() { Id = 3, Name = "Grape", Color = "Purple", Quantity: 25 },
new Fruit() { Id = 4, Name = "Pineapple", Color = "Yellow", Quantity: 1 },
new Fruit() { Id = 5, Name = "Apple", Color = "Red", Quantity: 5 },
new Fruit() { Id = 6, Name = "Mango", Color = "Yellow", Quantity: 2 }
};
// Check if any Fruits have a quantity greater than 20
var anyFruitGreaterThanTwenty = fruits.Any(f => f.Quantity > 20); // true
// Any Fruit with color Green
var anyGreen = fruits.Any(f => f.Color == "Green"); // false
var hasFruits = fruits.Any(); // true
var hasYellowFruit = fruits.Any(f => f.Color == "Yellow"); // true
```

27
guide/arabic/csharp/linq/single-or-default/index.md
View File

@ -13,16 +13,17 @@ localeTitle: واحد أو افتراضي
## مثال
`var fruits = new List<Fruit>() {
new Fruit() { Id = 1, Name = "Orange", Color = "Orange", Quantity: 3 },
new Fruit() { Id = 2, Name = "Strawberry", Color = "Red", Quantity: 12 },
new Fruit() { Id = 3, Name = "Grape", Color = "Purple", Quantity: 25 },
new Fruit() { Id = 4, Name = "Pineapple", Color = "Yellow", Quantity: 1 },
new Fruit() { Id = 5, Name = "Apple", Color = "Red", Quantity: 5 },
new Fruit() { Id = 6, Name = "Mango", Color = "Yellow", Quantity: 2 }
};
var purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape
var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null
`
```csharp
var fruits = new List<Fruit>() {
new Fruit() { Id = 1, Name = "Orange", Color = "Orange", Quantity: 3 },
new Fruit() { Id = 2, Name = "Strawberry", Color = "Red", Quantity: 12 },
new Fruit() { Id = 3, Name = "Grape", Color = "Purple", Quantity: 25 },
new Fruit() { Id = 4, Name = "Pineapple", Color = "Yellow", Quantity: 1 },
new Fruit() { Id = 5, Name = "Apple", Color = "Red", Quantity: 5 },
new Fruit() { Id = 6, Name = "Mango", Color = "Yellow", Quantity: 2 }
};
var purpleFruit = fruits.SingleOrDefault(f => f.Color == "Purple"); // Grape
var greenFruit = fruits.SingleOrDefault(f => f.Color == "Green"); // null
```

5
guide/arabic/csharp/method-overloading/index.md
View File

@ -17,8 +17,9 @@ localeTitle: طريقة الحمولة الزائدة
السلسلة العامة SayHello (الشخص الشخص) { "مرحبًا ، هناك" + شخص. اسم أول + "" + شخص. اسم مستعار ؛ } }
`2. In your default Program.cs file you can call now this class Person using the method overloading.
`
```
2. In your default Program.cs file you can call now this class Person using the method overloading.
```
برنامج الصف { الفراغ الاستاتيكي Main (string \[\] args) { شخص شخص = شخص جديد ("جين" ، "دو") ؛ Console.WriteLine (person.SayHello ("Peter Smith"))؛

22
guide/arabic/csharp/nameof-expressions/index.md
View File

@ -8,21 +8,23 @@ localeTitle: nameof التعبيرات
# #
`public void ProcessStudent(Student student)
{
if (student == null) throw new ArgumentNullException("student");
}
`
```
public void ProcessStudent(Student student)
{
if (student == null) throw new ArgumentNullException("student");
}
```
ومع ذلك ، إذا كان سيتم إعادة تسمية المعلمة الطالب ، يجب عليك أن تتذكر أيضا تعديل سلسلة حرفية. الآن مع تعبير nameof ، لن تحتاج إلى استخدام القيم الحرفية للسلسلة وسيتمكن المترجم من تحذيرك إذا كنت تستخدم اسمًا غير صحيح.
# #
`public void ProcessStudent(Student student)
{
if (student == null) throw new ArgumentNullException(nameof(student));
}
`
```
public void ProcessStudent(Student student)
{
if (student == null) throw new ArgumentNullException(nameof(student));
}
```
بعض الأمثلة من حيث قد تكون تعبيرات nameof مفيدة تشمل:

28
guide/arabic/csharp/nested-if-statement/index.md
View File

@ -6,19 +6,21 @@ localeTitle: متداخلة If بيان
يتم استخدام البيان المتداخل If عند إنشاء عبارة if تريد نقطة ثانوية للتحقق أو إذا كانت عبارة داخلها.
`int Price = 100;
int Quantity = 20;
if (Price == 100)
{
if (Quantity == 20)
{
Console.WriteLine("Price of an item is 200, and we have 20 in quantity.");
}
}
`
```
int Price = 100;
int Quantity = 20;
if (Price == 100)
{
if (Quantity == 20)
{
Console.WriteLine("Price of an item is 200, and we have 20 in quantity.");
}
}
```
لذلك ، وبما أننا حددنا مسبقاً السعر والكمية ، سيكون الناتج:
`Price of an item is 200, and we have 20 in quantity.
`
```
Price of an item is 200, and we have 20 in quantity.
```

51
guide/arabic/csharp/null-coalescing-operator/index.md
View File

@ -10,29 +10,33 @@ localeTitle: Null-coalescing Operator
بما أن `name` `null` ، فسيتم تعيين `name` `clientName` "John Doe".
`string name = null;
string clientName = name ?? "John Doe";
Console.WriteLine(clientName);
`
```cs
string name = null;
`> John Doe
`
string clientName = name ?? "John Doe";
Console.WriteLine(clientName);
```
```cs
> John Doe
```
## مثال 2
نظرًا لأن `name` ليس `null` ، فسيتم تعيين `name` `clientName` ، وهو "Jane Smith".
`string name = "Jane Smith";
string clientName = name ?? "John Doe";
Console.WriteLine(clientName);
`
```cs
string name = "Jane Smith";
`> Jane Smith
`
string clientName = name ?? "John Doe";
Console.WriteLine(clientName);
```
```cs
> Jane Smith
```
## بديل إلى if… else Statement
@ -48,20 +52,23 @@ localeTitle: Null-coalescing Operator
ومع ذلك ، يمكن تبسيط ذلك إلى حد كبير باستخدام مشغل التوليف الفارغ.
`string clientName = name ?? "John Doe";
`
```cs
string clientName = name ?? "John Doe";
```
## بديل لمشغل (شرطي) شرطي
من الممكن أيضًا استخدام المشغل الشرطي لاختبار وجود قيمة `null` وتعيين قيمة مختلفة.
`string clientName = name != null ? name : "John Doe";
`
```cs
string clientName = name != null ? name : "John Doe";
```
مرة أخرى ، يمكن تبسيط ذلك باستخدام مشغل التوليف الفارغ.
`string clientName = name ?? "John Doe";
`
```cs
string clientName = name ?? "John Doe";
```
## المراجع

59
guide/arabic/csharp/null-conditional-operator/index.md
View File

@ -6,29 +6,33 @@ localeTitle: مشغل شرطي لاغية
تسمح عوامل الشرطية خالية التحقق خالية مع الحد الأدنى من التعليمات البرمجية. على سبيل المثال ، إذا كان لديك متغير الموظف من نوع الموظف مع خاصية من نوع العنوان ، قد تفعل فحص فارغ كما يلي:
`Address address = null;
if (employee != null)
{
address = employee.Address;
}
`
```csharp
Address address = null;
if (employee != null)
{
address = employee.Address;
}
```
يمكنك استخدام عامل تشغيل شرطي قياسي لجعل ذلك الاختيار أكثر إيجازًا:
`Address address = employee != null ? employee.Address : null;
`
```csharp
Address address = employee != null ? employee.Address : null;
```
ومع ذلك ، في C # 6.0 دخلت المشغلين خالية الشرطي ، لذلك الآن يمكن للخط أعلاه ببساطة يتم تمثيله على النحو التالي:
`Address address = student?.Address;
`
```csharp
Address address = student?.Address;
```
إذا كان الموظف فارغًا ، فسيتم تعيين العنوان ببساطة ، ولن يحدث أي NullReferenceExeception. هذا يصبح أكثر فائدة مع الرسوم البيانية كائن أعمق ، كما يمكنك التعامل مع سلسلة من وصول الأعضاء المشروط.
فمثلا:
`string city = student?.Address?.City;
`
```csharp
string city = student?.Address?.City;
```
المشغلين الشرطيين هم دوائر قصيرة ، وذلك بمجرد التحقق من وصول العضو الشرطي إرجاع لا شيء ، والباقي لا يحدث.
@ -38,18 +42,19 @@ localeTitle: مشغل شرطي لاغية
فمثلا:
`public string GetStringValue()
{
return null;
}
// Display the value of s if s is NOT null. If x IS null, display the string "It was null."
string x = GetStringValue();
Console.WriteLine(x ?? "It was null.");
// Result:
"It was null."
`
```csharp
public string GetStringValue()
{
return null;
}
// Display the value of s if s is NOT null. If x IS null, display the string "It was null."
string x = GetStringValue();
Console.WriteLine(x ?? "It was null.");
// Result:
"It was null."
```

37
guide/arabic/csharp/nullable-types/index.md
View File

@ -8,24 +8,25 @@ localeTitle: أنواع nullable
#### كيفية استخدام نوع nullable
`// Declare a variable of Nullable type (Nullable<int>)
int? i = null;
int j = 0;
int defaultValue = 0;
// test for null and assign value to another variable
if (i.HasValue)
{
j = i.Value;
}
// get assigned value or default when current value is null
j = i.GetValueOrDefault(); // i.GetValueOrDefault(defaultValue)
//use coalescing operator to assign default value when current value is null
j = i ?? defaultValue;
`
```csharp
// Declare a variable of Nullable type (Nullable<int>)
int? i = null;
int j = 0;
int defaultValue = 0;
// test for null and assign value to another variable
if (i.HasValue)
{
j = i.Value;
}
// get assigned value or default when current value is null
j = i.GetValueOrDefault(); // i.GetValueOrDefault(defaultValue)
//use coalescing operator to assign default value when current value is null
j = i ?? defaultValue;
```
لمزيد من المعلومات ، قم بزيارة الرابط التالي:

23
guide/arabic/csharp/string-interpolation/index.md
View File

@ -8,21 +8,24 @@ localeTitle: الاستيفاء سلسلة
# #
`string message = "Hello " + firstName + " " + lastName + "!";
string message2 = string.Format("Hello {0} {1}!", firstName, lastName);
`
```
string message = "Hello " + firstName + " " + lastName + "!";
string message2 = string.Format("Hello {0} {1}!", firstName, lastName);
```
باستخدام تعبيرات سلسلة متداخلة ، لديك سلسلة تحتوي على تعبيرات مضمنة يتم استبدالها بنتائج التعبيرات. يجب عليك بادئة السلسلة الحرفية الخاصة بك بعلامة الدولار ($). يتم وضع التعبيرات التي تريد تضمينها في السلسلة مضمنة محاطة بأقواس معقوفة. الرسالة المذكورة أعلاه ستبدو الآن كما يلي:
# #
`string message = $"Hello {firstName} {lastName}!";
`
```
string message = $"Hello {firstName} {lastName}!";
```
**القليل من المعلومات المفيدة** في الاستيفاء سلسلة لديك القدرة على استدعاء وظائف ، والخصائص والمشغلين الثلاثي:
`int a = 3;
int b = 454;
string result = $"{a}+{b} = {a+b}";
`
```
int a = 3;
int b = 454;
string result = $"{a}+{b} = {a+b}";
```

66
guide/arabic/csharp/switch-case/index.md
View File

@ -8,41 +8,43 @@ localeTitle: تبديل القضية
## مثال
`public enum Colors { Red, Blue, Green, Orange }
Colors myColor;
... myColor is set to one of the enum values ...
switch(myColor){
case Colors.Red:
Console.WriteLine("How you like them apples?");
break;
case Colors.Blue:
Console.WriteLine("Ice Ice Baby...");
break;
case Colors.Green:
Console.WriteLine("Fore!");
break;
default:
Console.WriteLine("I have a hard time when I try to rhyme.");
}
`
```
public enum Colors { Red, Blue, Green, Orange }
Colors myColor;
... myColor is set to one of the enum values ...
switch(myColor){
case Colors.Red:
Console.WriteLine("How you like them apples?");
break;
case Colors.Blue:
Console.WriteLine("Ice Ice Baby...");
break;
case Colors.Green:
Console.WriteLine("Fore!");
break;
default:
Console.WriteLine("I have a hard time when I try to rhyme.");
}
```
## انتاج |
`If myColor is Colors.Red:
> How you like them apples?
If myColor is Colors.Blue:
> Ice Ice Baby...
If myColor is Colors.Green:
> Fore!
If myColor is Colors.Orange:
> I have a hard time when I try to rhyme.
`
```
If myColor is Colors.Red:
> How you like them apples?
If myColor is Colors.Blue:
> Ice Ice Baby...
If myColor is Colors.Green:
> Fore!
If myColor is Colors.Orange:
> I have a hard time when I try to rhyme.
```
### مصادر:

35
guide/arabic/csharp/ternary-operator/index.md
View File

@ -8,8 +8,9 @@ localeTitle: المشغل الثلاثي
## بناء الجملة
`condition_expression ? expression_1 : expression_2
`
```
condition_expression ? expression_1 : expression_2
```
### معامل
@ -21,20 +22,22 @@ localeTitle: المشغل الثلاثي
## مثال
`// initialize - set true or false here to view different result
bool hasFreeSweet = false;
string str = hasFreeSweet ? "Free sweet!" : "No free sweet.";
//output in console
Console.WriteLine(str);
`
```
// initialize - set true or false here to view different result
bool hasFreeSweet = false;
string str = hasFreeSweet ? "Free sweet!" : "No free sweet.";
//output in console
Console.WriteLine(str);
```
## انتاج |
`if hasFreeSweet == true
> Free sweet!
if hasFreeSweet == false
> No free sweet.
`
```
if hasFreeSweet == true
> Free sweet!
if hasFreeSweet == false
> No free sweet.
```

133
guide/arabic/csharp/try-catch/index.md
View File

@ -12,22 +12,23 @@ localeTitle: حاول الصيد في النهاية
## بناء الجملة
`try
{
// Code which could potentially throw an exception
var parsedValue = Int32.Parse("abcde");
}
catch(Exception e)
{
// Code to handle the exception
Console.WriteLine("Exception: " + e.Message);
}
finally
{
// Code which will always run no matter what.
Console.WriteLine("Try-Catch block has finished execution");
}
`
```csharp
try
{
// Code which could potentially throw an exception
var parsedValue = Int32.Parse("abcde");
}
catch(Exception e)
{
// Code to handle the exception
Console.WriteLine("Exception: " + e.Message);
}
finally
{
// Code which will always run no matter what.
Console.WriteLine("Try-Catch block has finished execution");
}
```
في المثال أعلاه ، نحاول تحويل "abcde" إلى قيمة عددية. سيقوم هذا الخط بطرح استثناء لأنه لا يمكن تحويله إلى رقم بنجاح. سيتم اكتشاف الاستثناء في كتلة catch وسيتم تخزين رسالة الاستثناء والتفاصيل الأخرى في المتغير المعين في كتلة catch (الحرف 'e' في المثال أعلاه). بعد تنفيذ كل هذا ، سيتم تنفيذ القسم "أخيرًا" لإنهائه.
@ -37,51 +38,54 @@ localeTitle: حاول الصيد في النهاية
كتلة المحاولة لها نطاق طريقة خاص بها ، لذلك لن يتم الوصول إلى أي من المتغيرات التي يتم الإعلان عنها داخل كتلة المحاولة خارج نطاق المحاولة.
`try
{
// Read user input from the console.
var userInput = Console.ReadLine();
}
catch(Exception e)
{
Console.WriteLine("Exception: " + e.Message);
}
//Outside the Try block
var parsedUserInput = Int32.Parse(userInput); // Not correct
`
```csharp
try
{
// Read user input from the console.
var userInput = Console.ReadLine();
}
catch(Exception e)
{
Console.WriteLine("Exception: " + e.Message);
}
//Outside the Try block
var parsedUserInput = Int32.Parse(userInput); // Not correct
```
سيعطيك ما سبق خطأ في وقت الترجمة لأن القيمة 'userInput' لا يمكن الوصول إليها. إذا كنت تحتاج إلى الوصول إلى متغير خارج كتلة try-catch ستحتاج إلى تعريف المتغير قبل كتلة المحاولة.
`var userInput = "";
try
{
// Read user input from the console.
userInput = Console.ReadLine();
}
catch(Exception e)
{
Console.WriteLine("Exception: " + e.Message);
}
//Outside the Try block
var parsedUserInput = Int32.Parse(userInput); // Correct
`
```csharp
var userInput = "";
try
{
// Read user input from the console.
userInput = Console.ReadLine();
}
catch(Exception e)
{
Console.WriteLine("Exception: " + e.Message);
}
//Outside the Try block
var parsedUserInput = Int32.Parse(userInput); // Correct
```
## كتلة الصيد
هذه الكتلة هي المكان الذي تحدد فيه نوع `Exception` الذي تريد التقاطه. إذا كنت تريد التقاط كافة الاستثناءات الممكنة ، يمكنك استخدام الفئة الأساسية `Exception` . إذا كنت تريد فقط التقاط نوع معين من الاستثناء ، فيمكنك تحديد ذلك بدلاً من ذلك. بعض الأمثلة على أنواع الاستثناءات الأخرى هي `ArgumentException` و `OutOfMemoryException` و `FormatException` .
`try
{
var parsedValue = Int32.Parse("abcde");
}
// Only FormatExceptions will be caught in this catch block.
catch(FormatException exceptionVariable)
{
Console.WriteLine(exceptionVariable.Message);
}
`
```csharp
try
{
var parsedValue = Int32.Parse("abcde");
}
// Only FormatExceptions will be caught in this catch block.
catch(FormatException exceptionVariable)
{
Console.WriteLine(exceptionVariable.Message);
}
```
المتغير المعلن بعد نوع الاستثناء سيحتوي على كل بيانات الاستثناء ويمكن استخدامه داخل كتلة `Catch` .
@ -89,14 +93,15 @@ localeTitle: حاول الصيد في النهاية
يتم **دائمًا** تشغيل الكتلة الأخيرة في النهاية بعد كتل `Try` and `Catch` . وعادة ما يستخدم هذا القسم لعندما يكون هناك شيء **يجب أن** يحدث في نهاية بغض النظر عما إذا كان طرح استثناء أم لا. على سبيل المثال ، لنفترض أننا بحاجة إلى متغير ليتم إعادة تنشيطه مرة أخرى إلى رقم محدد بعد التلاعب به طوال الوقت.
`int initalValue = 12;
try
{
// Code which manipulates 'initialValue'
}
finally
{
Console.WriteLine("re-initalising value back to 12");
initialValue = 12;
}
`
```csharp
int initalValue = 12;
try
{
// Code which manipulates 'initialValue'
}
finally
{
Console.WriteLine("re-initalising value back to 12");
initialValue = 12;
}
```

9
guide/arabic/csharp/xaml/index.md
View File

@ -25,10 +25,11 @@ localeTitle: XAML
يوضح المثال التالي تسمية "Hello World!" كمحتوى في حاوية مستوى أعلى تسمى UserControl.
`<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Label Content="Hello World!" />
</UserControl>
`
```XAML
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Label Content="Hello World!" />
</UserControl>
```
### معلومات اكثر:

53
guide/arabic/css/background-opacity/index.md
View File

@ -14,37 +14,40 @@ localeTitle: تعتيم الخلفية
**كامد بالكامل**
`.class-name {
opacity:1;
}
OR
.class-name {
opacity:1.0;
}
`
```css
.class-name {
opacity:1;
}
OR
.class-name {
opacity:1.0;
}
```
**شفافي نصف شفاف**
`.class-name {
opacity:0.5;
}
Opacity value can be anything between 0 and 1;
`
```css
.class-name {
opacity:0.5;
}
Opacity value can be anything between 0 and 1;
```
**شفاف**
`.class-name {
opacity:0;
}
OR
.class-name {
opacity:0.0;
}
`
```css
.class-name {
opacity:0;
}
OR
.class-name {
opacity:0.0;
}
```
بدلا من ذلك يمكنك استخدام قيمة rgba شفافة مثل هذا: \`\` \`المغلق

11
guide/arabic/css/background-size/index.md
View File

@ -18,11 +18,12 @@ localeTitle: حجم الخلفية
لتعيين هذه الخاصية على صور خلفية متعددة ، قم بفصل القيم بفاصلة:
`.multiple {
background-image: url(1.png), url(2.png);
background-size: 3px 3px, cover;
}
`
```css
.multiple {
background-image: url(1.png), url(2.png);
background-size: 3px 3px, cover;
}
```
#### معلومات اكثر:

97
guide/arabic/css/background/index.md
View File

@ -43,19 +43,21 @@ localeTitle: خلفية
يمكنك استخدام خاصية صورة الخلفية لتعيين صورة كخلفية لعنصر. يتم تكرار الصورة افتراضيًا بحيث تغطي العنصر بأكمله.
`body {
background-image: url("barn.jpg");
}
`
```css
body {
background-image: url("barn.jpg");
}
```
![صورة](https://user-images.githubusercontent.com/26467304/31036366-eb1fc260-a539-11e7-835d-e3f935a22c86.png)
يمكنك أيضًا ربط الصور أو صور gif التي تعثر عليها عبر الإنترنت باستخدام رابطها (على سبيل المثال ، من صور Google البحث).
`body {
background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
`
```css
body {
background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}
```
### صورة الخلفية - خاصية التكرار
@ -63,29 +65,32 @@ localeTitle: خلفية
إليك مثال يكرر الصورة عموديًا.
`body {
background-image: url("barn.jpg");
background-repeat: repeat-y;
}
`
```css
body {
background-image: url("barn.jpg");
background-repeat: repeat-y;
}
```
![عمودي](https://user-images.githubusercontent.com/26467304/31039770-8962c7a6-a54e-11e7-9d25-4fb09760d219.PNG)
يمكنك تكرار الصورة أفقيًا عن طريق تعيين الخاصية background-repeat إلى "repeat-x".
`body {
background-image: url("barn.jpg");
background-repeat: repeat-x;
}
`
```css
body {
background-image: url("barn.jpg");
background-repeat: repeat-x;
}
```
يمكنك أيضًا استخدام خاصية تكرار الخلفية لتعيين صورة لعدم تكرارها.
`body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
}
`
```css
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
}
```
![norepeat](https://user-images.githubusercontent.com/26467304/31039801-c8761efc-a54e-11e7-8bb9-ec5b88885a50.PNG)
@ -93,12 +98,13 @@ localeTitle: خلفية
يمكنك استخدام خاصية الموضع لتحديد مكان صورتك على صفحة الويب.
`body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
}
`
```css
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
}
```
![موضع](https://user-images.githubusercontent.com/26467304/31039828-077d1038-a54f-11e7-8aa6-092253ca92b8.PNG)
@ -106,13 +112,14 @@ localeTitle: خلفية
يمكنك استخدام خاصية "إرفاق الخلفية" لتعيين صورة إلى موضع ثابت. يجعل موقع ثابت الصورة بحيث لا يتم التمرير مع باقي الصفحة.
`body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
`
```css
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
```
![ثابت](https://user-images.githubusercontent.com/26467304/31039859-39612c92-a54f-11e7-93ca-9d7bcb938225.PNG)
@ -128,10 +135,11 @@ localeTitle: خلفية
يمكنك كتابة خصائص الخلفية على سطر واحد. وهذا ما يسمى خاصية الاختزال.
`body {
background: url("barn.jpg") no-repeat right top;
}
`
```css
body {
background: url("barn.jpg") no-repeat right top;
}
```
يمكنك ترك الممتلكات التي لا تحتاج إليها عند استخدام خاصية الاختزال ، ولكن الخصائص يجب استخدامها في ترتيب معين. الترتيب هو:
@ -145,10 +153,11 @@ localeTitle: خلفية
يمكنك تحديد صور خلفية متعددة في خاصية خلفية واحدة.
`body {
background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}
`
```css
body {
background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}
```
الصورة الأولى (أو التدرج) المحددة هي الأكثر في الأعلى ، والثانية تأتي بعدها ، وهكذا. إذا كان أحد العناصر غير صحيح بسبب عنوان URL الخاص به أو بناء الجملة الخاص به ، فسيتم تجاهل السطر بأكمله بواسطة المستعرض.

43
guide/arabic/css/before-selector/index.md
View File

@ -8,25 +8,26 @@ localeTitle: قبل المختار
لنلق نظرة على بعض الأمثلة:
`p::before {
content: "";
border: solid 5px #ccc
}
span.comment::before{
content: "Comment: ";
color: blue;
}
`
```css
p::before {
content: "";
border: solid 5px #ccc
}
`
<p> To infinity and beyond</p>
<p> I am buz lightyear, I come in peace.</p>
<span class="comment"> May the force be with you</span>
<br/>
<span> Do. Or do not. There is no try</span>
`
span.comment::before{
content: "Comment: ";
color: blue;
}
```
```html
<p> To infinity and beyond</p>
<p> I am buz lightyear, I come in peace.</p>
<span class="comment"> May the force be with you</span>
<br/>
<span> Do. Or do not. There is no try</span>
```
في المثال أعلاه ، سنقوم بترقيم حدود رمادية قبل كل عنصر فقرة في الصفحة ، ونحن نقوم أيضًا بإضافة كلمة "تعليق" باللون الأزرق قبل كل عنصر في الامتداد مع تعليق الفصل.
@ -41,9 +42,9 @@ localeTitle: قبل المختار
}
`
`
<p>world!!</p>
`
```html
<p>world!!</p>
```
هذا سيظهر `Hello world!!` في الصفحة.

54
guide/arabic/css/borders/index.md
View File

@ -45,33 +45,36 @@ localeTitle: الملكية الحدودية
المغلق نمط الحد الأعلى: صلب ؛ border-left-style: منقط ؛ border-right-style: dashed؛ نمط الحد السفلي: مزدوج ؛
`Or you can style them all at once:
`
```
Or you can style them all at once:
```
المغلق نمط الحدود: الصلبة متقطعة مزدوجة منقط ؛
`As shown, the border property allows you to select different sections of it. [top, bottom, left, right]
### Border Width
To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must
define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick.
Example:
`
```
As shown, the border property allows you to select different sections of it. [top, bottom, left, right]
### Border Width
To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must
define a border-style for the border to show up. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick.
Example:
```
المغلق
table { border-width: 7px; border-style: outset; } td { border-width: medium; border-style: outset; } p { border-width: thick; border-style: solid; }
`### Border Color
Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout
of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
Example:
`
```
### Border Color
Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout
of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
Example:
```
المغلق
@ -89,12 +92,13 @@ table { border-color: rgb( 100, 100, 255); border-style: dashed; } td { border-c
المغلق border-radius: 15٪ 10px 30٪ 5px؛
`### Border: All in One
While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code.
Example:
`
```
### Border: All in One
While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code.
Example:
```
المغلق

51
guide/arabic/css/box-shadow/index.md
View File

@ -41,36 +41,39 @@ localeTitle: صندوق الظل
المغلق شعبة { مربع الظل: لا شيء \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # -moz-box-shadow: none | \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # -webkit-box-shadow: لا شيء \[أقحم؟ && \[ ؟ ؟ ؟ \]\] # }
`However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track.
### Examples
#### Basic use
`
```
However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track.
### Examples
#### Basic use
```
المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: 10px 10px 5px #ccc؛ }
`10px - offset-x
10px - offset-y
5px - blur
#ccc - light gray color
It will display
![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png)
#### Inside box shadow
`
```
10px - offset-x
10px - offset-y
5px - blur
#ccc - light gray color
It will display
![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow1.png)
#### Inside box shadow
```
المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc؛ }
`It uses very similar code, but with inset value, which displays shadow inside the div element
![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png)
#### Multiple box shadows
`
```
It uses very similar code, but with inset value, which displays shadow inside the div element
![image](https://raw.githubusercontent.com/krzysiekh/images/master/box-shadow2.png)
#### Multiple box shadows
```
المغلق div { العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: # 333 ؛ box-shadow: inset 10px 10px 5px #ccc، 10px 10px 5px #ccc؛ } \`\` \`

203
guide/arabic/css/breakpoints/index.md
View File

@ -27,66 +27,67 @@ localeTitle: نقاط
وهنا مثال على ذلك
`/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Google Pixel ----------- */
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
`
```
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Google Pixel ----------- */
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
```
> مع هذا النهج ، سوف ينتهي بك الأمر وجود قائمة ضخمة من الاستفسارات الإعلامية.
@ -94,21 +95,23 @@ localeTitle: نقاط
هذا هو الخيار المفضل أثناء إجراء أو كتابة قواعد نقطة الإيقاف. لأنه من الأسهل ضبط المحتوى وفقًا لتخطيط معين فقط عندما يتطلب تغييرًا.
`@media only screen (min-width: 768px){
...
}
`
```
@media only screen (min-width: 768px){
...
}
```
> تعني نقطة الإيقاف هذه أنه سيتم تطبيق CSS عندما يكون عرض الجهاز 768 بكسل وما فوق.
#### يمكنك أيضًا تعيين نطاق بنقاط توقف ، بحيث لا يتم تطبيق CSS إلا ضمن هذه الحدود.
`@media only screen and (min-width: 768px) and (max-width: 959px){
...
}
`
```
@media only screen and (min-width: 768px) and (max-width: 959px){
...
}
```
**ملحوظة** حاول دائمًا إنشاء نقاط توقف استنادًا إلى المحتوى الخاص بك وليس إلى الأجهزة. تقسيمها إلى عرض منطقي بدلاً من عرض عشوائي والاحتفاظ بها إلى عدد يمكن إدارتها ، لذلك يبقى التعديل بسيطة وواضحة.
@ -118,15 +121,16 @@ localeTitle: نقاط
دعونا نحولها إلى رمز CSS:
`.text1 {
font-size: 16px;
}
@media (min-width: 1200px) {
.text1 {
font-size: 20px;
}
}
`
```css
.text1 {
font-size: 16px;
}
@media (min-width: 1200px) {
.text1 {
font-size: 20px;
}
}
```
**للراحة لدينا،** وكتابة `.text1` التصميم الأساسي أولا ... ثم بعد ذلك سنقوم تحديد `@media` القواعد.
@ -134,13 +138,14 @@ localeTitle: نقاط
من الجيد تمامًا استخدام `@media (max-width) {}` . هنا مثال:
`.text1 {
font-size: 20px;
}
@media (max-width: 1199px) {
font-size: 16px;
}
`
```css
.text1 {
font-size: 20px;
}
@media (max-width: 1199px) {
font-size: 16px;
}
```
`// Normal, basic styles
// that look great on small screens
@ -161,21 +166,23 @@ localeTitle: نقاط
نقاط التوقف المستندة إلى محتوى بدلاً من الجهاز تكون أقل تعقيدًا. إليك مقتطف بسيط يتم `code 700px` عندما يكون عرض الجهاز أعلى من حجم شاشة الهاتف الذكي بحجم `code 700px` تقريبًا
`@media only screen and (min-width: 700px) {
something {
something: something;
}
}
`
```css
@media only screen and (min-width: 700px) {
something {
something: something;
}
}
```
يمكنك أيضًا تعيين الحد الأدنى والحد الأقصى للعرض ، والذي يتيح لك إجراء التجارب باستخدام نطاقات مختلفة. هذا واحد تقريبا يطلق بين الهاتف smar وأكبر حجم سطح المكتب وأحجام الشاشة
`@media only screen and (min-width: 700px) and (max-width: 1500px) {
something {
something: something;
}
}
`
```code
@media only screen and (min-width: 700px) and (max-width: 1500px) {
something {
something: something;
}
}
```
#### معلومات اكثر:

52
guide/arabic/css/class-selector/index.md
View File

@ -14,44 +14,48 @@ localeTitle: اختيار الطبقة
أمثلة:
`
<h1 class="test">This is a heading 1</h1>
<p class="test">This is a paragraph 1</p>
<h2 class="test">This is a heading 2</h2>
<p class="test">This is a paragraph 2</p>
<div class="test2 test3">This is a div 1</div>
`
```html
<h1 class="test">This is a heading 1</h1>
<p class="test">This is a paragraph 1</p>
<h2 class="test">This is a heading 2</h2>
<p class="test">This is a paragraph 2</p>
<div class="test2 test3">This is a div 1</div>
```
نظرًا لأن اسم الفئة ليس فريدًا ، فإن سمة فئة HTML تجعل من الممكن تعريف أنماط متساوية للعناصر التي تحمل نفس اسم الفئة. **فيما يلي كيفية تحديد الطبقة في ملف CSS لعناصر النمط (لاحظ تدوين.):**
**سيتم تطبيق جميع عناصر `test` الصف باستخدام هذا النمط:**
`.test {
color: green;
}
`
```css
.test {
color: green;
}
```
**سيتم تطبيق جميع عناصر `<p>` `test` الصف باستخدام هذا النمط:**
`p.test {
border: 1px solid black;
color: red;
}
`
```css
p.test {
border: 1px solid black;
color: red;
}
```
**سيتم تطبيق جميع عناصر `<h1>` و `<h2>` `test` الصف باستخدام هذا النمط:**
`h1.test, h2.test {
color: blue;
}
`
```css
h1.test, h2.test {
color: blue;
}
```
**سيتم تطبيق جميع العناصر التي تشتمل على كلا النوعين `test2` و `test3` مع هذا النمط:**
`.test2.test3 {
color: green;
}
`
```css
.test2.test3 {
color: green;
}
```
**نصائح: لا توجد مساحة بين فئات متعددة.**

34
guide/arabic/css/colors/index.md
View File

@ -48,19 +48,20 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
#### أمثلة
`
<html>
<body>
<p>Hello Moto</p>
</body>
</html>
`
```html
<html>
<body>
<p>Hello Moto</p>
</body>
</html>
```
`body {
background-color: green;
color: white;
}
`
```css
body {
background-color: green;
color: white;
}
```
في المثال أعلاه ، يتحول `background-color: green` إلى عنصر `<body>` باللون الأخضر. يؤدي هذا إلى تحويل صفحة الويب بأكملها إلى اللون الأخضر. تكون عناصر `<p>` بيضاء بعد `color: white` أيضًا. يمكنك استخدام ألوان مسمى ، مثل `green` `blue` `yellow` `red` `purple` وغيرها الكثير. ولكن بالنسبة للألوان المخصصة ، يمكنك استخدام الأكواد العشرية ( `#147ACC` ) ، قيم RGB ( `rgb(20, 122, 204)` ) ، وحتى قيم HSL ( `hsl(145, 59%, 30%)` ).
@ -75,10 +76,11 @@ Hexcode ، وهو اختصار للرمز السداسي العشري ، هو ط
يمكنك أيضًا إضافة قيمة ألفا ، أو الشفافية للألوان. الشفافية تسمح بتراكب النص على صورة وتمييز الصورة بشكل جزئي من خلال النص ، أو يمكن استخدامها لتغيير ظل اللون إذا لم تكن هناك عناصر أخرى أمام أو خلف النص. استخدم `rgba()` أو `hsla()` وقم بتعبئة قيم الألوان الخاصة بك. تنخفض قيمة alpha ويتم تحويلها إلى قيمة عشرية. (على سبيل المثال ، 20٪ هي 0.2 ، 75٪ هي 0.75 ، إلخ.)
`body {
background-color: hsl(184, 87%, 94%); // bright blue
}
`
```css
body {
background-color: hsl(184, 87%, 94%); // bright blue
}
```
يظهر أعلاه فقرات مصممة باللون البرتقالي اللامع و 20٪ شفافة ، وعناصر h2 بلون وردي من سمك السلمون ، وخلفية الجسم زاهية اللون.

33
guide/arabic/css/css-buttons/index.md
View File

@ -36,12 +36,13 @@ localeTitle: أزرار CSS
لإضافة حد ملون إلى زر ، استخدم خاصية الحدود:
`button {
background-color: #FFF;
color: #FFF;
border: 2px solid #6ba0f4;
}
`
```
button {
background-color: #FFF;
color: #FFF;
border: 2px solid #6ba0f4;
}
```
![Button Border](https://image.ibb.co/kUqymR/button_border_blue.png "حدود الزر")
@ -81,11 +82,12 @@ localeTitle: أزرار CSS
لتغيير نمط زر عند تحريك الماوس فوقه ، استخدم: select hover:
`button:hover {
background-color: #0E2C5B;
color: #FFF;
}
`
```
button:hover {
background-color: #0E2C5B;
color: #FFF;
}
```
![Hoverable Buttons](https://image.ibb.co/hxQnfm/button_hover.png "أزرار Hoverable")
@ -95,10 +97,11 @@ localeTitle: أزرار CSS
لتعطيل زر ، استخدم خاصية المؤشر:
`button {
cursor: not-allowed;
}
`
```
button {
cursor: not-allowed;
}
```
#### معلومات اكثر:

9
guide/arabic/css/css-cursors/index.md
View File

@ -44,10 +44,11 @@ localeTitle: مؤشرات CSS
يمكنك أيضًا تعيين صورة كمؤشر.
`.custom-cursor {
cursor: url(cursor-image.png);
}
`
```
.custom-cursor {
cursor: url(cursor-image.png);
}
```
#### معلومات اكثر:

11
guide/arabic/css/css-custom-properties/index.md
View File

@ -10,11 +10,12 @@ localeTitle: خصائص CSS مخصصة
ضمن محدد ، يتم تعريف الخصائص المخصصة باستخدام واصلين (-) والاسم ، متبوعًا بالقيمة. يمكن أن تكون القيمة بسيطة ، مثل اللون (RGB ، hexcode ، إلخ) أو الحجم (باستخدام البكسل ، em ، rem ، إلخ) ، أو يمكن أن تكون أكثر تعقيدًا ، مثل تعريف dropshadow. انظر الأمثلة أدناه.
`:root {
--firstVariable: red;
--headerSize: 16px;
--dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2);
`
```css
:root {
--firstVariable: red;
--headerSize: 16px;
--dropShadow: 1px 1px 2px 2px rgba(100,100,100,0.2);
```
الإعلان عن الخصائص المخصصة في `:root` محدد `:root` جعل هذه الخصائص متاحة على مستوى العالم. يمكن اعتبار `:root` محدد `:root` نفس محدد `html` .

32
guide/arabic/css/css-frameworks/css-framework-bulma/index.md
View File

@ -10,22 +10,22 @@ Bulma هو إطار CSS حديث يعتمد على [Flexbox وقابلاً](http
في ما يلي نموذج HTML بسيط يشتمل على أحدث ملفات CSS المجمعة والمختصرة لمكتبة Bulma.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
</body>
</html>
`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
</body>
</html>
```
لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت Bulma [هنا](http://bulma.io/documentation/overview/start/) .

34
guide/arabic/css/css-frameworks/css-framework-foundation/index.md
View File

@ -10,23 +10,23 @@ localeTitle: مؤسسة CSS Framework
في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة المؤسسة.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foundation Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
</body>
</html>
`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foundation Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
</body>
</html>
```
يستخدم هذا المثال استخدام CDN الذي يقوم بتحميل الإعدادات الافتراضية. إذا كنت ترغب في تخصيص تخطيط الشبكة ، قم بتغيير الألوان أو إضافة وإزالة المكونات التي يمكنك القيام بها على صفحة [تنزيل](http://foundation.zurb.com/sites/download/) Foundation.

26
guide/arabic/css/css-frameworks/css-framework-material-design-lite/index.md
View File

@ -10,19 +10,19 @@ localeTitle: CSS Framework Material Design Lite
في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS مجمع ومختزن لمكتبة MDL.
`
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
</body>
</html>
```
لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت MDL [هنا](https://getmdl.io/started/index.html) .

42
guide/arabic/css/css-frameworks/css-framework-materialize/index.md
View File

@ -10,27 +10,27 @@ localeTitle: CSS Framework تتحقق
في ما يلي نموذج HTML بسيط يشتمل على أحدث CSS وملف Javascript مجمّعة ومختصرة لمكتبة Materialize.
`
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Hello World!</h1>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Hello World!</h1>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
```
لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من طرق أخرى لتثبيت ثريتم [هنا](http://materializecss.com/getting-started) .

36
guide/arabic/css/css-frameworks/css-framework-skeleton/index.md
View File

@ -10,24 +10,24 @@ localeTitle: CSS Framework Skeleton
في ما يلي نموذج HTML بسيط يشتمل على أحدث ملف CSS مجمع ومختزن لمكتبة Skeleton.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton Template</title>
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton Template</title>
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
```
[![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)

28
guide/arabic/css/css-frameworks/css-frameworks-uikit/index.md
View File

@ -10,20 +10,20 @@ UIKit هو إطار أمامي خفيف الوزن ومعياري لتطوير
هنا هو قالب HTML بسيط يتضمن أحدث CSS المترجمة والمختصرة لمكتبة UIKit.
`
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
</body>
</html>
```
لقد استخدمنا CDN في هذا المثال ، ولكن يمكنك التحقق من الطرق الأخرى لتثبيت UIKit [هنا](https://getuikit.com/docs/introduction) .

9
guide/arabic/css/css-performance/index.md
View File

@ -22,10 +22,11 @@ localeTitle: أداء CSS
تخيل CSS التالي:
`nav ul li a {
color: #fff;
}
`
```css
nav ul li a {
color: #fff;
}
```
هذه ليست فكرة جيدة. هناك طرق أفضل لتحديد عنصر ارتباط في التنقل. ولكن كيف يحدد الكمبيوتر العنصر الصحيح؟ أولا يجدها كل `a` عنصر على الصفحة الخاصة بك. ثم يتحقق إذا كان داخل عنصر `li` ، داخل `ul` داخل `div` . لذا ، يقرأ المتصفح المحددات من اليمين إلى اليسار. إذا كان لديك مئات الروابط ، فقد يستغرق ذلك بعض الوقت ، فما الذي يجب عليك فعله؟

13
guide/arabic/css/css-position/index.md
View File

@ -6,12 +6,13 @@ localeTitle: وضع CSS
تحدد خاصية الموضع نوع طريقة تحديد المواقع المستخدمة لعنصر. يحتوي على 5 قيم للكلمات الرئيسية:
`.static { position: static; } // default value
.relative { position: relative; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
`
```css
.static { position: static; } // default value
.relative { position: relative; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
```
### معلومات اكثر:

11
guide/arabic/css/css-preprocessors/index.md
View File

@ -28,11 +28,12 @@ localeTitle: CSS Preprocessors
\`\` \`ساس for $ vfoo 35px to 85px { .margin - # {vfoo} { الهامش: $ vfoo 10px؛ } }
`This loop saves us from having the to write the same code multiple times to change the margin size.
### If/Else Statements
Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:
`
```
This loop saves us from having the to write the same code multiple times to change the margin size.
### If/Else Statements
Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:
```
ساس if width (body)> 500px { لون الخلفية: الأزرق. } آخر { لون الخلفية: أبيض. } \`\` \` هنا ، سيغير لون الخلفية اللون حسب عرض نص الصفحة.

96
guide/arabic/css/css-syntax-and-selectors/index.md
View File

@ -18,17 +18,17 @@ localeTitle: CSS المختار والقواعد
إليك مثال على CSS المضمّن. سيكون للكلمات "One" و "Two" لون خلفية باللون الأصفر ولون النص باللون الأحمر. تحتوي كلمة "ثلاثة" على نمط جديد يتجاوز الأول ، وسيكون له لون خلفية باللون الأخضر ونص اللون السماوي. في المثال ، نحن نطبق الأنماط على علامات `<div>` ، ولكن يمكنك تطبيق نمط على أي عنصر HTML.
`
<div style="color:red; background:yellow">
One
<div>
Two
</div>
<div style="color:cyan; background:green">
Three
</div>
</div>
`
```html
<div style="color:red; background:yellow">
One
<div>
Two
</div>
<div style="color:cyan; background:green">
Three
</div>
</div>
```
### CSS داخلي
@ -38,48 +38,48 @@ localeTitle: CSS المختار والقواعد
في ما يلي مثال له تأثير مماثل لمثال "مضمنة" أعلاه ، باستثناء أنه تم استخراج CSS إلى منطقته الخاصة. ستتطابق الكلمتان "One" و "Two" مع محدد `div` ويكون النص الأحمر على خلفية صفراء. تتطابق الكلمتان "Three" و "Four" مع محدد `div` أيضًا ، ولكنهما يتطابقان أيضًا مع محدد `.nested_div` الذي ينطبق على أي عنصر HTML يشير إلى هذه الفئة. يتجاوز هذا المحدد المحدد الأول ، وينتهي ظهرا في الظهور كنص أزرق سماوي على خلفية خضراء.
`
<style type="text/css">
div { color: red; background: yellow; }
.nested_div { color: cyan; background: green; }
</style>
<div>
One
<div>
Two
</div>
<div class="nested_div">
Three
</div>
<div class="nested_div">
Four
</div>
</div>
`
```html
<style type="text/css">
div { color: red; background: yellow; }
.nested_div { color: cyan; background: green; }
</style>
<div>
One
<div>
Two
</div>
<div class="nested_div">
Three
</div>
<div class="nested_div">
Four
</div>
</div>
```
تعتبر المحددات المبينة أعلاه بسيطة للغاية ، ولكنها قد تكون معقدة للغاية. على سبيل المثال ، من الممكن تطبيق الأنماط فقط على العناصر المتداخلة ؛ وهذا هو ، العنصر الذي هو طفل لعنصر آخر.
في ما يلي مثال على تحديدنا للنمط الذي يجب تطبيقه فقط على عناصر `div` التي تمثل طفلًا مباشرًا لعناصر `div` الأخرى. والنتيجة هي أن "Two" و "Three" سيظهران كنص أحمر على خلفية صفراء ، لكن "One" و "Four" سيظلان غير متأثران (وعلى الأرجح نص أسود على خلفية بيضاء).
`
<style type="text/css">
div > div { color: red; background: yellow; }
</style>
<div>
One
<div>
Two
</div>
<div>
Three
</div>
</div>
<div>
Four
</div>
`
```html
<style type="text/css">
div > div { color: red; background: yellow; }
</style>
<div>
One
<div>
Two
</div>
<div>
Three
</div>
</div>
<div>
Four
</div>
```
### CSS خارجي

130
guide/arabic/css/css3-2d-transforms/index.md
View File

@ -37,12 +37,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
`
```css
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
```
## طريقة التدوير ()
@ -52,12 +53,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
`
```css
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
```
يؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة.
@ -65,12 +67,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
`
```css
div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
```
## مقياس () الطريقة
@ -80,23 +83,25 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
`
```css
div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
```
المثال التالي يقلل عنصر `<div>` ليكون نصف أصله الأصلي العرض والارتفاع:
### مثال:
`div {
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
}
`
```css
div {
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
}
```
## طريقة skewX ()
@ -106,12 +111,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
`
```css
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
```
## طريقة (())
@ -121,12 +127,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
`
```css
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
```
## طريقة الانحراف ()
@ -136,23 +143,25 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
`
```css
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
```
إذا لم يتم تحديد المعلمة الثانية ، فإنها تحتوي على قيمة صفرية. لذلك ، ما يلي على سبيل المثال يتخطى عنصر `<div>` 20 درجة على طول المحور X:
### مثال:
`div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
`
```css
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
```
## طريقة المصفوفة ()
@ -164,12 +173,13 @@ localeTitle: CSS3 2d يحول
### مثال:
`div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
`
```css
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
```
## CSS3 خصائص التحويل

13
guide/arabic/css/css3-at-media-rule/index.md
View File

@ -24,12 +24,13 @@ localeTitle: CSS3 في Media Rule
مثال لاستعلام الوسائط هو كما يلي:
`@media screen and (max-width: 1000px) {
body {
background: #000;
}
}
`
```CSS
@media screen and (max-width: 1000px) {
body {
background: #000;
}
}
```
لا تنطبق قاعدة CSS في استعلام Media إلا عندما تكون القاعدة صحيحة. على سبيل المثال ، بالنظر إلى المقتطف أعلاه ، سيتم تغيير خلفية النص إلى `#000` فقط عندما يزور أحد المستخدمين الصفحة بجهاز بعرضه 1000 بكسل أو أقل. إذا كانت أعلى من 1000 بكسل ، فلن تنطبق هذه القاعدة.

41
guide/arabic/css/css3-borders-rounded-corners/index.md
View File

@ -21,38 +21,43 @@ localeTitle: CSS3 الحدود شعاع الملكية
إذا تم توفير قيمة واحدة فقط ، فسيكون نصف قطر الحدود هو نفسه لجميع الزوايا الأربع ، كما هو موضح في الأمثلة السابقة. ولكن لديك أيضًا خيار تحديد قيم مختلفة لكل ركن.
`.new-shape {
border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
}
`
```css
.new-shape {
border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
}
```
في حالة تقديم قيمتين فقط ، يتم تطبيق القيمة الأولى على الركن الأيمن العلوي والسفلي ، وتنطبق القيمة الثانية على الركن الأيمن العلوي والسفلي الأيسر.
`.leaf-shape {
border-radius: 0 50%;
}
`
```css
.leaf-shape {
border-radius: 0 50%;
}
```
إذا تم تعيين ثلاث قيم ، فسيتم تطبيق القيم الأولى مرة أخرى على نصف قطر أعلى اليسار ، تشير القيمة الثانية إلى اليمين العلوي والسفلي الأيسر ، تاركة القيمة الثالثة للإشارة إلى الركن السفلي الأيمن.
`.odd-shape {
border-radius: 0 20px 50%;
}
`
```css
.odd-shape {
border-radius: 0 20px 50%;
}
```
![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/odd-shapes.png?raw=true)
لا يجب أن يكون تقريب الزاوية متماثلًا تمامًا. يمكنك تحديد كل من الشعاعين الأفقي والعمودي باستخدام شرطة مائلة ("/") لتحقيق زاوية ذات شكل بيضاوي الشكل. \`\` \`المغلق .elliptical-1 { border-radius: 50px / 10px؛ / \* نصف القطر الأفقي / نصف القطر الرأسي \* / } .elliptical-2 { border-radius: 10px / 50px؛ }
`![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true)
Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.
`
```
![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true)
Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.
```
المغلق .elliptical-3 { border-radius: 50px 20px 50px 20px / 20px 50px 20px 50px؛ / \* أفقية من اليسار إلى اليمين ، أعلى يمين أفقي ، أفقي من أسفل إلى اليمين ، أفقي من أسفل يسار / عمودي إلى يسار علوي ، عمودي أعلى يمين ، عمودي إلى أسفل يمين ، عمودي إلى أسفل يسار \* / }
`Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.
`
```
Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.
```
المغلق .elliptical-4 { نصف قطر أعلى يمين - أقصى: 50 بكسل 20 بكسل ؛ / \* نصف القطر الأفقي ، نصف القطر الرأسي \* / نصف قطر أعلى يمين الحد: 20px 50px؛ نصف قطر الحد السفلي - اليمين - اليمين: 50 بكسل × 20 بكسل ؛ border-bottom-left-radius: 20px 50px؛ } \`\` \` ![أمثلة](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-advance.png?raw=true)

36
guide/arabic/css/css3-colors/index.md
View File

@ -12,10 +12,11 @@ localeTitle: ألوان CSS3
### بناء الجملة
`p {
color: green;
}
`
```
p {
color: green;
}
```
هذه القاعدة تغير كل لون الخط لكل
@ -29,10 +30,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
من المستحيل محاولة حفظ كل رمز لون ولهذا السبب هناك العديد من الأدوات عبر الإنترنت لاختيار الألوان التي تريدها لمشاريعك. على سبيل المثال: https://www.w3schools.com/colors/colors\_picker.asp أو http://htmlcolorcodes.com/color-picker/.
`p {
color: rgb(0, 255, 0);
}
`
```css
p {
color: rgb(0, 255, 0);
}
```
تغير هذه القاعدة لون الخط لكل عناصر p إلى اللون الأخضر ، تمامًا كما هو موضح أعلاه.
@ -46,10 +48,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
### بناء الجملة
`p {
color: #00fe00;
}
`
```
p {
color: #00fe00;
}
```
تقوم هذه القاعدة مرة أخرى بتغيير لون الخط لكل عناصر p إلى اللون الأخضر.
@ -59,10 +62,11 @@ RGB تعني "أحمر" و "أخضر" و "أزرق" ويمكننا أيضًا ت
### بناء الجملة
`p {
color: hsl(0, 100%, 50%);
}
`
```
p {
color: hsl(0, 100%, 50%);
}
```
### انتاج |

159
guide/arabic/css/css3-gradients/index.md
View File

@ -28,32 +28,33 @@ localeTitle: تدرجات CSS3
#### مثال
`<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
`
```
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
```
![الافتراضي الخطية التدرج](https://cdn-media-1.freecodecamp.org/imgr/CvtXCMd.jpg)
@ -63,32 +64,33 @@ localeTitle: تدرجات CSS3
#### مثال
`<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
`
```
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
```
![من اليسار إلى اليمين](https://cdn-media-1.freecodecamp.org/imgr/k4FSyXz.jpg)
@ -102,32 +104,33 @@ localeTitle: تدرجات CSS3
#### مثال
`<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
`
```
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
```
![قطري-إكسب](https://cdn-media-1.freecodecamp.org/imgr/8gKRhAp.jpg)

22
guide/arabic/css/css3-nth-child-selector/index.md
View File

@ -23,19 +23,21 @@ localeTitle: CSS3 Nth Child Selector
المغلق a: nth-childe (odd) { / \* CSS هنا \* / }
`##### Even
Even returns all even elements of a given type.
`
```
##### Even
Even returns all even elements of a given type.
```
المغلق a: nth-childe (even) { / \* CSS هنا \* / }
`#### An+B
Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).
For example, the following will match every 3rd anchor element:
`
```
#### An+B
Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).
For example, the following will match every 3rd anchor element:
```
المغلق a: nth-childe (3n) { / \* CSS هنا \* / } \`\` \`

33
guide/arabic/css/css3-opacity-property/index.md
View File

@ -10,22 +10,23 @@ localeTitle: خاصية عتامة CSS3
ضبط عنصر على `opacity: 0;` لا يزيلها من الصفحة. سيظل العنصر قابلاً للنقر وسيؤثر على تدفق محتوى الصفحة.
`.transparent {
opacity: 0;
}
.verySeeThrough {
opacity: 0.3;
}
.slightlySeeThrough {
opacity: 0.7;
}
.opaque {
opacity: 1;
}
`
```css
.transparent {
opacity: 0;
}
.verySeeThrough {
opacity: 0.3;
}
.slightlySeeThrough {
opacity: 0.7;
}
.opaque {
opacity: 1;
}
```
[يوضح هذا المثال البسيط](https://jsfiddle.net/1ogmxaf8/1/) كيفية استخدام التعتيم مع تأثير التمرير.

64
guide/arabic/css/css3-transitions/index.md
View File

@ -10,13 +10,15 @@ localeTitle: التحولات CSS3
الخاصية `transition` هي خاصية مختزلة لخاصية `transition-property` ، `transition-duration` `transition-timing-function` ، `transition-timing-function` `transition-delay` ، وبناء الجملة هو ما يلي:
`transition: transition-property transition-duration transition-timing-function transition-delay
`
```css
transition: transition-property transition-duration transition-timing-function transition-delay
```
فمثلا :
`transition: width 2s ease-in-out 1s;
`
```
transition: width 2s ease-in-out 1s;
```
### وصف الخصائص
@ -34,8 +36,9 @@ localeTitle: التحولات CSS3
فمثلا :
`transition-property: width; /* means the transition applies on the width */
`
```
transition-property: width; /* means the transition applies on the width */
```
#### `transition-duration`
@ -43,8 +46,9 @@ localeTitle: التحولات CSS3
فمثلا :
`transition-duration: 2s /* means the transition effect last 2s */
`
```
transition-duration: 2s /* means the transition effect last 2s */
```
#### `transition-timing-function`
@ -61,8 +65,9 @@ localeTitle: التحولات CSS3
فمثلا :
`transition-timing-function: linear
`
```css
transition-timing-function: linear
```
ملاحظة: جميع القيم المذكورة أعلاه هي في الواقع تفاصيل `cubic-bezier` . `linear` ، على سبيل المثال ، تعادل `cubic-bezier(0.25,0.1,0.25,1)`
@ -74,8 +79,9 @@ localeTitle: التحولات CSS3
فمثلا :
`transition-delay: 1s /* means wait 1s before the transition effect start */
`
```
transition-delay: 1s /* means wait 1s before the transition effect start */
```
### كيفية استخدام التحولات؟
@ -83,25 +89,27 @@ localeTitle: التحولات CSS3
#### استخدام الخاصية المختزلة ( `transition` )
`div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
`
```css
div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
```
#### إعطاء جميع خصائص النقل قيمة
`div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
`
```css
div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
```
ملاحظة: كلا المثالين **متساويان**

89
guide/arabic/css/current-color-keyword/index.md
View File

@ -14,21 +14,22 @@ localeTitle: الكلمة الرئيسية الحالية
نعلن أن كل div يحتوي على حدود 3px بلون _currentColor_ ، مما يعني أن كل حد div سيتم تلوينه بنفس قيمة خاصية `color` الخاصة به. تحقق من المثال الحي [هنا](http://jsfiddle.net/tjkp0cm3/)
`div{
/* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
border: 3px solid currentColor;
}
/* This div will have green borders, because its color value is green. */
#div1{
color: green;
}
/* This div will have blue borders, because its color value is blue. */
#div2{
color: blue;
}
`
```css
div{
/* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
border: 3px solid currentColor;
}
/* This div will have green borders, because its color value is green. */
#div1{
color: green;
}
/* This div will have blue borders, because its color value is blue. */
#div2{
color: blue;
}
```
### التطبيق العملي مع SVG
@ -44,37 +45,39 @@ localeTitle: الكلمة الرئيسية الحالية
يمكننا استخدام هذا الرمز الخاص بنا لتحقيق السلوك المطلوب.
`button{
color: #016898;
}
.emailIcon{
fill: #016898;
}
button:hover {
color: #19B5FE;
}
button:hover .emailIcon{
fill: #19B5FE;
}
`
```css
button{
color: #016898;
}
.emailIcon{
fill: #016898;
}
button:hover {
color: #19B5FE;
}
button:hover .emailIcon{
fill: #19B5FE;
}
```
الآن، بدلا من تغيير SVG في `fill` اللون على تحوم بشكل واضح، فإننا يمكن أن يحدد التعبئة ل `currentColor` . يقوم هذا تلقائيًا بتغيير لون SVG إلى قيمة خاصية `color` الخاصة بالزر. نحن الآن بحاجة فقط إلى تغيير خاصية `color` من الزر. هذا يجعل رمز CSS أقصر وأذكى.
`.emailIcon{
fill: currentColor;
}
button{
color: #016898;
}
button:hover {
color: #19B5FE;
}
`
```css
.emailIcon{
fill: currentColor;
}
button{
color: #016898;
}
button:hover {
color: #19B5FE;
}
```
تحقق من المثال المباشر على https://repl.it/NNt9/2.

59
guide/arabic/css/dropdowns/index.md
View File

@ -8,38 +8,39 @@ localeTitle: هبوط قطرة
أمثلة:
`
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdownContent">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</div>
`
```html
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdownContent">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</div>
```
ثم يجب عليك تخصيص الطبقات في CSS
`.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: red;
padding: 10px;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-content {
display:block;
}
`
```css
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: red;
padding: 10px;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-content {
display:block;
}
```
تحتاج إلى فئات div منفصلة لإنشاء الزر ، و div آخر لفصل قائمة ما يحتوي عليه الزر.

82
guide/arabic/css/fonts/index.md
View File

@ -29,18 +29,19 @@ localeTitle: الخطوط
* مائل - النص موضح في _المائل_
* مائل - النص المائل يميل
`.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
`
```css
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
```
### حجم الخط
@ -53,39 +54,41 @@ localeTitle: الخطوط
* `small` ، `medium` ، `large` - يُعرف بقيم الحجم المطلقة
* `%` - النسب المئوية
`.with-pixels {
font-size: 14px;
}
.with-ems {
font-size: 0.875em;
}
.with-absolute {
font-size: large;
}
.with-percentage {
font-size: 80%;
}
`
```css
.with-pixels {
font-size: 14px;
}
.with-ems {
font-size: 0.875em;
}
.with-absolute {
font-size: large;
}
.with-percentage {
font-size: 80%;
}
```
### وزن الخط
تحدد الخاصية `font-weight` الوزن (أو الجرأة) للخط. يقبل الكلمات الرئيسية ( `bold` ، `normal` ، `bolder` ، `lighter` ) أو كلمات رئيسية عددية ( `100` ، `200` ، `300` ، `400` إلخ) `400` هو نفسه `normal` .
`p {
font-weight: bold
}
`
```css
p {
font-weight: bold
}
```
### استجابة الخط
يمكن ضبط حجم النص بوحدة عرض vw (عرض إطار العرض). وبهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح.
`
<h1 style="font-size:10vw">Hello World</h1>
`
```html
<h1 style="font-size:10vw">Hello World</h1>
```
`Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.`
@ -93,10 +96,11 @@ localeTitle: الخطوط
تحدد خاصية `font-variant` إذا كان يجب عرض النص في خط صغير الحجم (حيث يتم تحويل جميع الأحرف الصغيرة إلى أحرف كبيرة أثناء الظهور في حجم خط أصغر من الأحرف الكبيرة الأصلية في النص).
`p.small {
font-variant: small-caps;
}
`
```css
p.small {
font-variant: small-caps;
}
```
#### معلومات اكثر:

10
guide/arabic/css/forms/index.md
View File

@ -6,11 +6,11 @@ localeTitle: إستمارات
يعرّف عنصر نموذج HTML نموذجًا يُستخدم لجمع إدخال المستخدم. أمثلة:
`
<form>
contents
</form>
`
```html
<form>
contents
</form>
```
يحتوي نموذج HTML على عناصر النموذج.

57
guide/arabic/css/height-and-width-dimensions/index.md
View File

@ -32,9 +32,9 @@ localeTitle: أبعاد الطول والعرض
**مثال:**
`
<p id="red">Example text</p>
`
```html
<p id="red">Example text</p>
```
`p#red {
margin: 0;
@ -51,20 +51,22 @@ localeTitle: أبعاد الطول والعرض
**مثال:**
`p#example {
min-height: 400px;
}
`
```css
p#example {
min-height: 400px;
}
```
تحدد الخاصية `max-height` أقصى ارتفاع يمكن أن يصل إليه العنصر. قد يكون ذلك مفيدًا عندما لا تريد أن يكون العنصر أكبر من حجم معين. إذا كان محتوى العنصر أعلى من قيمة `max-height` المحتوى.
**مثال:**
`p {
max-height: 40px;
background-color: red;
}
`
```css
p {
max-height: 40px;
background-color: red;
}
```
**نتيجة:** ![مثال 3](https://image.prntscr.com/image/eRdqazdUSWO2rdVfcUb5rQ.png)
@ -74,11 +76,12 @@ localeTitle: أبعاد الطول والعرض
**مثال:**
`p {
width: 150px;
background-color: red;
}
`
```css
p {
width: 150px;
background-color: red;
}
```
**نتيجة:** ![مثال 4](https://image.prntscr.com/image/x1_khU6TQsmZQznt7YU9qw.png)
@ -86,20 +89,22 @@ _ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يسته
**مثال:**
`p {
min-width: 50px;
}
`
```css
p {
min-width: 50px;
}
```
لن يسمح الكود السابق ببساطة لعنصر فقرة أن يتقلص أفقيًا إلى أقل من 50 بكسل.
**مثال:**
`p {
max-width: 300px;
background-color: red;
}
`
```css
p {
max-width: 300px;
background-color: red;
}
```
لن يسمح الرمز أعلاه بعرض عنصر أكبر من 300 بكسل.

23
guide/arabic/css/hover-selector/index.md
View File

@ -18,17 +18,18 @@ CSS البناء :يحوم { اعلانات css }
يطبق محدد التمرير فقط الأنماط المتوفرة في القاعدة عندما يدخل العنصر في حالة التمرير. هذا هو عندما يمرر المستخدم فوق العنصر باستخدام الماوس الخاص به.
`button {
color: white;
background-color: green;
}
button:hover {
background-color: white;
border: 2px solid green;
color: green;
}
`
```css
button {
color: white;
background-color: green;
}
button:hover {
background-color: white;
border: 2px solid green;
color: green;
}
```
في المثال أعلاه ، يكون التصميم العادي للزر عبارة عن نص أبيض على زر أخضر. عندما يمرر المستخدم فوق الزر باستخدام الماوس الخاص به ، فإن القاعدة مع `:hover` سوف تصبح نشطة ، وسوف يتغير نمط الزر.

20
guide/arabic/css/id-selector/index.md
View File

@ -8,15 +8,17 @@ localeTitle: محدد الهوية
### بناء الجملة
`#specified_id { /* styles */ }
`
```css
#specified_id { /* styles */ }
```
يمكنك دمج محدد المعرّف مع أنواع أخرى من المحددات لتمييز عنصر محدد جدًا.
`section#about:hover { color: blue; }
div.classname#specified_id { color: green; }
`
```css
section#about:hover { color: blue; }
div.classname#specified_id { color: green; }
```
### ملاحظة حول المعرفات
@ -24,9 +26,9 @@ localeTitle: محدد الهوية
تذكر ، يجب أن يتطابق محدد ID مع سمة معرف عنصر HTML.
`
<div id="specified_id"><!-- content --></div>
`
```html
<div id="specified_id"><!-- content --></div>
```
### النوعية

117
guide/arabic/css/image-galleries/index.md
View File

@ -8,64 +8,65 @@ localeTitle: معرض الصور
## معرض الصور مثال
`<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 150px;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="mountains.jpg">
<img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
`
```
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 150px;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="https://www.dropbox.com/s/mdj3pjh4jgyeieo/cat1.jpg?raw=1" alt="Image of staring cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="https://www.dropbox.com/s/i1ow97mcl6ubxhv/cat2.jpg?raw=1" alt="Image of fat cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="https://www.dropbox.com/s/h6ks8v78ncwur31/cat3.jpg?raw=1" alt="Image of frolicking cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="mountains.jpg">
<img src="https://www.dropbox.com/s/zda9llgop3j9bf7/cat4.jpg?raw=1" alt="Image of wide-eyed cat" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
```
## النتائج:

15
guide/arabic/css/image-opacity-and-transparency/index.md
View File

@ -33,13 +33,14 @@ localeTitle: تعتيم الصورة والشفافية
المغلق img { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } img: hover { opacity: 1.0؛ filter: alpha (opacity = 100)؛ }
`[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
<!--I cannot figure out how to embed a Codepen. I would really like to know-->
You can create the opposite effect with less code since the image is 1.0 opacity by default
Example:
`
```
[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
<!--I cannot figure out how to embed a Codepen. I would really like to know-->
You can create the opposite effect with less code since the image is 1.0 opacity by default
Example:
```
المغلق img: hover { التعتيم: 0.3 ؛ filter: alpha (opacity = 30)؛ } \`\` \` [مثال codepen لإظهار الشفافية على الماوس](https://codepen.io/lvcoulter/full/xXBQoR/)

48
guide/arabic/css/layout/display-property/index.md
View File

@ -6,32 +6,34 @@ localeTitle: عرض الملكية
تحدد خاصية `display` نوع المربع المستخدم لعنصر HTML. هناك 20 قيمة للكلمات الرئيسية الإجمالية ، على الرغم من استخدام 10 فقط بشكل شائع. هذه هي شائعة الاستخدام:
`.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.flex {display: flex}
.inline-flex {display: inline-flex}
.inline-table {display: inline-table}
.table {display: table}
.inherit {display: inherit}
.initial {display: initial}
`
```css
.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.flex {display: flex}
.inline-flex {display: inline-flex}
.inline-table {display: inline-table}
.table {display: table}
.inherit {display: inherit}
.initial {display: initial}
```
**أمثلة شائعة:**
`.myBox {
display: block;
}
.myContainer {
display: flex;
}
.inlineList ul > li {
display: inline;
}
`
```css
.myBox {
display: block;
}
.myContainer {
display: flex;
}
.inlineList ul > li {
display: inline;
}
```
#### معلومات اكثر:

5
guide/arabic/css/layout/flexbox/flex-basis-property/index.md
View File

@ -8,8 +8,9 @@ localeTitle: خصائص Flex Basis
## بناء الجملة
`flex-basis: auto | content | <width> | <height>;
`
```css
flex-basis: auto | content | <width> | <height>;
```
## أساس المرن: السيارات

25
guide/arabic/css/layout/flexbox/flex-grow/index.md
View File

@ -20,21 +20,22 @@ localeTitle: فليكس النمو
HTML
`
<p class = "ten">1</p>
<p class = "twenty">2</p>
`
```html
<p class = "ten">1</p>
<p class = "twenty">2</p>
```
CSS
`body {
display:flex;
}
p {
flex-grow: 1;
}
`
```css
body {
display:flex;
}
p {
flex-grow: 1;
}
```
حدث شيئان

36
guide/arabic/css/layout/float-and-clear/index.md
View File

@ -20,26 +20,29 @@ localeTitle: تعويم وواضحة
![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "CSS-الحيل تعويم قيمه img")
`img {
float: right;
}
`
```
img {
float: right;
}
```
يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليمين في صفحة:
![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "تعويم img على شبكة الإنترنت")
`img {
float: left;
}
`
```
img {
float: left;
}
```
يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليسار في صفحة:
`img {
float: none;
}
`
```
img {
float: none;
}
```
في المثال التالي ، سيتم عرض الصورة فقط في مكان حدوثها في النص ( `float: none;` ):
@ -57,10 +60,11 @@ localeTitle: تعويم وواضحة
![unclear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/unclearedfooter.png "صورة تذييل غير واضح") المصدر: CSS-TRICS
`div {
clear: left;
}
`
```
div {
clear: left;
}
```
![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "صورة تذييل واضح") المصدر: CSS-TRICS

134
guide/arabic/css/layout/grid-layout/index.md
View File

@ -24,25 +24,27 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
من الناحية المثالية ، عند إنشاء موقع ، يمكنك تصميمه مع الشبكة واستخدام Flex كحل بديل. يمكنك معرفة ما إذا كان المستعرض يدعم الشبكة باستخدام قاعدة CSS `@support` (يُعرف أيضًا باسم استعلام الميزات). إليك مثال على ذلك:
`.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
`
```css
.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
```
### ابدء
لجعل أي عنصر شبكة ، تحتاج إلى تعيين خاصية `display` الخاصة بها إلى `grid` ، مثل:
`.conatiner {
display: grid;
}
`
```css
.conatiner {
display: grid;
}
```
وهذا كل شيء. لقد قمت للتو `.container` . يصبح كل عنصر داخل `.container` عنصر شبكة بشكل تلقائي.
@ -50,9 +52,10 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
الصفوف والأعمدة
`grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
`
```css
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
```
المناطق
@ -65,39 +68,41 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
أو
`grid-template-areas:
"header header header header"
"nav main main sidebar";
`
```css
grid-template-areas:
"header header header header"
"nav main main sidebar";
```
### مناطق الشبكة
فيما يلي بعض نماذج التعليمات البرمجية حول كيفية تحديد مناطق الشبكة وتعيينها
`.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
`
```css
.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
```
### وحدة `fr`
@ -111,25 +116,26 @@ CSS Network Layout ، والمعروف ببساطة باسم الشبكة ، ه
الحل البسيط هو تغيير `grid-template-areas` أساس حجم الشاشة. يمكنك أيضًا **تغيير عدد الأعمدة والصفوف بناءً على حجم الشاشة** أيضًا. هذا هو بديل أنظف وأبسط بكثير لنظام Bootstrap الشبكة ( `col-xs-8 col-sm-6 col-md-4 col-lg-3` ).
`.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
`
```css
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
```
انظر [شبكة](https://codepen.io/aamnah/pen/RLVVoE/) القلم [المغلق من خلال المثال - 2 (مناطق الشبكة + شبكة الفجوة) من](https://codepen.io/aamnah/pen/RLVVoE/) قبل Aamnah أكرم ( [aamnah](https://codepen.io/aamnah) ) على [CodePen](https://codepen.io) .

192
guide/arabic/css/legal-color-values/index.md
View File

@ -27,23 +27,24 @@ localeTitle: قيم اللون القانونية
هنا ألوان عرافة مختلفة. ابحث عن المثال المباشر على https://jsfiddle.net/qg9revp4/2/.
`#divRed{
color: #ff0000; /* red */
}
#divGreen{
color: #00ff00; /* green */
}
#divBlue{
color: #0000ff; /* blue */
}
#divWhite{
color: #ffffff; /* white */
background: #000000; /* black background, so that the text is visible */
}
`
```css
#divRed{
color: #ff0000; /* red */
}
#divGreen{
color: #00ff00; /* green */
}
#divBlue{
color: #0000ff; /* blue */
}
#divWhite{
color: #ffffff; /* white */
background: #000000; /* black background, so that the text is visible */
}
```
### ألوان RGB
@ -59,23 +60,24 @@ localeTitle: قيم اللون القانونية
هنا ألوان RGB مختلفة. ابحث عن المثال الحي على https://jsfiddle.net/vspepeth/1/.
`#divRed{
color: rgb(255, 0, 0); /* red */
}
#divGreen{
color: rgb(0, 255, 0); /* green */
}
#divBlue{
color: rgb(0, 0, 255); /* blue */
}
#divWhite{
color: rgb(255, 255, 255); /* white */
background: rgb(0, 0, 0); /* black background, so that the text is visible */
}
`
```css
#divRed{
color: rgb(255, 0, 0); /* red */
}
#divGreen{
color: rgb(0, 255, 0); /* green */
}
#divBlue{
color: rgb(0, 0, 255); /* blue */
}
#divWhite{
color: rgb(255, 255, 255); /* white */
background: rgb(0, 0, 0); /* black background, so that the text is visible */
}
```
### ألوان RGBA
@ -91,23 +93,24 @@ localeTitle: قيم اللون القانونية
هنا مختلف ألوان RGBA. ابحث عن المثال المباشر على https://jsfiddle.net/hq0ngwg2/1/.
`#divRed{
color: rgba(255, 0, 0, 0.3); /* red with opacity */
}
#divGreen{
color: rgba(0, 255, 0, 0.7); /* green with opacity */
}
#divBlue{
color: rgba(0, 0, 255, 0.5); /* blue with opacity */
}
#divWhite{
color: rgba(255, 255, 255, 0.6); /* white with opacity */
background: rgba(0, 0, 0, 0.8); /* black background with opacity */
}
`
```css
#divRed{
color: rgba(255, 0, 0, 0.3); /* red with opacity */
}
#divGreen{
color: rgba(0, 255, 0, 0.7); /* green with opacity */
}
#divBlue{
color: rgba(0, 0, 255, 0.5); /* blue with opacity */
}
#divWhite{
color: rgba(255, 255, 255, 0.6); /* white with opacity */
background: rgba(0, 0, 0, 0.8); /* black background with opacity */
}
```
### ألوان HSL
@ -134,19 +137,20 @@ HSL تعني الصباغة والتشبع والخفة. يتم تحديده ك
ابحث عن المثال المباشر على https://jsfiddle.net/g10zpL28/1/.
`#div1 {
background-color: hsl(240, 100%, 50%); /* blue */
}
#div2 {
background-color: hsl(195, 53%, 79%); /* light blue */
}
#div3 {
background-color: hsl(240, 100%, 25%); /* dark blue */
}
#div4 {
background-color: hsl(187, 75%, 86%); /* pastel blue */
}
`
```css
#div1 {
background-color: hsl(240, 100%, 50%); /* blue */
}
#div2 {
background-color: hsl(195, 53%, 79%); /* light blue */
}
#div3 {
background-color: hsl(240, 100%, 25%); /* dark blue */
}
#div4 {
background-color: hsl(187, 75%, 86%); /* pastel blue */
}
```
### ألوان HSLA
@ -171,19 +175,20 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
فيما يلي أمثلة على ألوان HSLA. انظر لهم يعيشون في https://jsfiddle.net/2Lxscgfy/1/.
`#div1 {
background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */
}
#div2 {
background-color: hsla(195, 53%, 79%, 0.8); /* light blue with transparency */
}
#div3 {
background-color: hsla(240, 100%, 25%, 0.3); /* dark blue with transparency */
}
#div4 {
background-color: hsla(187, 75%, 86%, 1.0); /* pastel blue with transparency */
}
`
```css
#div1 {
background-color: hsla(240, 100%, 50%, 0.5); /* blue with transparency */
}
#div2 {
background-color: hsla(195, 53%, 79%, 0.8); /* light blue with transparency */
}
#div3 {
background-color: hsla(240, 100%, 25%, 0.3); /* dark blue with transparency */
}
#div4 {
background-color: hsla(187, 75%, 86%, 1.0); /* pastel blue with transparency */
}
```
### أسماء اللون المعرفة مسبقا
@ -195,22 +200,23 @@ HSLA تعني التدرج والتشبع والخفة وقناة ألفا. تم
فيما يلي بعض أسماء الألوان المستخدمة. تحقق من المثال الحي على https://jsfiddle.net/rqygumpy/. ابحث عن القائمة الكاملة في [مستندات MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords) .
`#div1{
color: BlueViolet;
}
#div2{
color: RebeccaPurple;
}
#div3{
color: RoyalBlue;
}
#div4{
color: Salmon;
}
`
```css
#div1{
color: BlueViolet;
}
#div2{
color: RebeccaPurple;
}
#div3{
color: RoyalBlue;
}
#div4{
color: Salmon;
}
```
#### معلومات اكثر:

35
guide/arabic/css/linear-gradient/index.md
View File

@ -20,8 +20,9 @@ localeTitle: الخطي التدرج
لإنشاء تدرج خطي ، يجب تحديد إيقافين للألوان على الأقل. (وهي الألوان التي يتم إنشاء الانتقالات بينها). يتم الإعلان على إما **الخلفية** أو خصائص **الصورة الخلفية** .
`background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
`
```
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
```
**ملاحظة: في حالة عدم تحديد أي اتجاه ، يكون النقل من أعلى إلى أسفل بشكل افتراضي**
@ -29,8 +30,9 @@ localeTitle: الخطي التدرج
**من اعلى لاسفل :**
`background: linear-gradient(red, yellow);
`
```
background: linear-gradient(red, yellow);
```
![من اعلى لاسفل](https://cdn.discordapp.com/attachments/261391445074771978/371702268803809301/image.png)
@ -38,8 +40,9 @@ localeTitle: الخطي التدرج
لجعله اليسار إلى اليمين، يمكنك إضافة معلمة إضافية في بداية الخطية التدرج () بدءا من كلمة **الذي** يشير إلى الاتجاه:
`background: linear-gradient(to right, red , yellow);
`
```
background: linear-gradient(to right, red , yellow);
```
![من اليسار إلى اليمين](https://cdn.discordapp.com/attachments/261391445074771978/371702990161051648/image.png)
@ -58,13 +61,15 @@ localeTitle: الخطي التدرج
يمكنك أيضًا استخدام الزوايا ، لتكون أكثر دقة في تحديد اتجاه التدرج:
`background: linear-gradient(angle, colour-stop1, colour-stop2);
`
```
background: linear-gradient(angle, colour-stop1, colour-stop2);
```
يتم تحديد الزاوية كزاوية بين الخط الأفقي وخط التدرج.
`background: linear-gradient(90deg, red, yellow);
`
```
background: linear-gradient(90deg, red, yellow);
```
![90 درجة](https://cdn.discordapp.com/attachments/261391445074771978/371710718698848256/image.png)
@ -72,8 +77,9 @@ localeTitle: الخطي التدرج
لا تقتصر على لونين فقط ، يمكنك استخدام العديد من الألوان المفصولة بفواصل كما تريد.
`background: linear-gradient(red, yellow, green);
`
```
background: linear-gradient(red, yellow, green);
```
![تدرج مع 3 توقفات لونية](https://cdn.discordapp.com/attachments/261391445074771978/371706534591201281/image.png)
@ -83,8 +89,9 @@ localeTitle: الخطي التدرج
لا يمكنك استخدام التدرجات اللونية فقط للانتقال باستخدام ألوان باهتة ، ولكن يمكنك أيضًا استخدامها للتغيير من لون واحد إلى لون خالص آخر على الفور
`background: linear-gradient(to right,red 15%, yellow 15%);
`
```
background: linear-gradient(to right,red 15%, yellow 15%);
```
![توقف اللون الصلب](https://cdn.discordapp.com/attachments/261391445074771978/371716730046775318/image.png)

9
guide/arabic/css/margins/index.md
View File

@ -10,10 +10,11 @@ localeTitle: هوامش
## بناء الجملة
`.element {
margin: margin-top || margin-right || margin-bottom || margin-left;
}
`
```css
.element {
margin: margin-top || margin-right || margin-bottom || margin-left;
}
```
يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.

75
guide/arabic/css/navigation-bars/index.md
View File

@ -19,44 +19,45 @@ localeTitle: أشرطة الملاحة
هناك جزءان لأي التنقل: HTML و CSS. هذا مجرد مثال سريع.
`
<nav class="myNav"> <!-- Any element can be used here -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
`
```html
<nav class="myNav"> <!-- Any element can be used here -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
```
`/* Define the main Navigation block */
.myNav {
display: block;
height: 50px;
line-height: 50px;
background-color: #333;
}
/* Remove bullets, margin and padding */
.myNav ul {
list-style: none;
padding: 0;
margin: 0;
}
.myNav li {
float: left;
/* Or you can use display: inline; */
}
/* Define the block styling for the links */
.myNav li a {
display: inline-block;
text-align: center;
padding: 14px 16px;
}
/* This is optional, however if you want to display the active link differently apply a background to it */
.myNav li a.active {
background-color: #3786E1;
}
`
```css
/* Define the main Navigation block */
.myNav {
display: block;
height: 50px;
line-height: 50px;
background-color: #333;
}
/* Remove bullets, margin and padding */
.myNav ul {
list-style: none;
padding: 0;
margin: 0;
}
.myNav li {
float: left;
/* Or you can use display: inline; */
}
/* Define the block styling for the links */
.myNav li a {
display: inline-block;
text-align: center;
padding: 14px 16px;
}
/* This is optional, however if you want to display the active link differently apply a background to it */
.myNav li a.active {
background-color: #3786E1;
}
```
#### معلومات اكثر:

9
guide/arabic/css/object-fit/index.md
View File

@ -12,10 +12,11 @@ localeTitle: كائن صالح
## بناء الجملة
`.element {
object-fit: fill || contain || cover || none || scale-down;
}
`
```css
.element {
object-fit: fill || contain || cover || none || scale-down;
}
```
## القيم

20
guide/arabic/css/overflow/index.md
View File

@ -23,29 +23,33 @@ localeTitle: فيض
### مرئي:
`.box-element { overflow: visible; }
`
```css
.box-element { overflow: visible; }
```
![صورة المثال](https://s26.postimg.org/gweu6g5yh/1-vissible.png)
### المخفية:
`.box-element { overflow: hidden; }
`
```css
.box-element { overflow: hidden; }
```
![صورة المثال](https://s26.postimg.org/l49mf77e1/2-hidden.png)
### انتقل:
`.box-element { overflow: scroll; }
`
```css
.box-element { overflow: scroll; }
```
![صورة المثال](https://s26.postimg.org/d8z30dxrd/3-scroll.png)
### تلقاءي:
`.box-element { overflow: auto; }
`
```css
.box-element { overflow: auto; }
```
![صورة المثال](https://s26.postimg.org/z5q7ei0bt/4-autoank.png)

9
guide/arabic/css/padding/index.md
View File

@ -10,10 +10,11 @@ localeTitle: حشوة
## بناء الجملة
`.element {
padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
}
`
```css
.element {
padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
}
```
يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.

25
guide/arabic/css/properties/background-color-property/index.md
View File

@ -8,18 +8,19 @@ localeTitle: خاصية لون الخلفية
**مثال:**
`body {
background-color: crimson;
}
div {
background-color: #ffffff;
}
.myClass {
background-color: rgba(0, 0, 0, 0.5);
}
`
```css
body {
background-color: crimson;
}
div {
background-color: #ffffff;
}
.myClass {
background-color: rgba(0, 0, 0, 0.5);
}
```
#### قيم الملكية:

41
guide/arabic/css/properties/background-property/index.md
View File

@ -19,26 +19,27 @@ localeTitle: خاصية الخلفية
التركيب 1 :
`body {
/* Using a <background-color> */
background: green;
}
.error {
/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;
}
header {
/* Using a <box> and <background-color> */
background: border-box red;
}
.topbanner {
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
}
`
```css
body {
/* Using a <background-color> */
background: green;
}
.error {
/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;
}
header {
/* Using a <box> and <background-color> */
background: border-box red;
}
.topbanner {
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
}
```
### مصادر

27
guide/arabic/css/properties/background-repeat-property/index.md
View File

@ -10,8 +10,9 @@ localeTitle: تكرار الخلفية الملكية
بناء الجملة:
`background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
`
```css
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
```
* تكرار: سيتم تكرار صورة الخلفية عموديًا وأفقيًا. هذا هو الافتراضي
@ -28,19 +29,21 @@ localeTitle: تكرار الخلفية الملكية
أمثلة: لتكرار الصورة أفقياً وعمودياً
`body {
background-image:url(smiley.gif);
background-repeat:repeat;
}
`
```css
body {
background-image:url(smiley.gif);
background-repeat:repeat;
}
```
لتكرار الصورة أفقيا
`body {
background-image:url(smiley.gif);
background-repeat:repeat-x;
}
`
```css
body {
background-image:url(smiley.gif);
background-repeat:repeat-x;
}
```
#### معلومات اكثر:

15
guide/arabic/css/properties/clear-property/index.md
View File

@ -10,13 +10,14 @@ localeTitle: واضح الممتلكات
يتم استخدام هذه الخاصية بعد استخدام الخاصية `float` "مسح" خارج `float` .
`clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
`
```css
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
```
### مثال:

54
guide/arabic/css/properties/color-property/index.md
View File

@ -10,45 +10,51 @@ localeTitle: خاصية اللون
* بالاسم (ملاحظة: هذا يعمل فقط مع ألوان معينة)
`h1{
color: blue;
}
`
```css
h1{
color: blue;
}
```
* سداسي عشري (تم تحديده كـ #rrggbb)
`h1{
color: #0000ff;
}
`
```css
h1{
color: #0000ff;
}
```
* RGB (تم تحديده على أنه rgb (r، g، b))
`h1{
color: rgb(0, 0, 255);
}
`
```css
h1{
color: rgb(0, 0, 255);
}
```
* RGBA (تم تحديده كـ rgba (r، g، b، alpha))
`h1{
color: rgba(0, 0, 255, 0.5);
}
`
```css
h1{
color: rgba(0, 0, 255, 0.5);
}
```
* HSL (هوى ، خفة ، تشبع)
`h1{
color: hsl(240, 100%, 50%);
}
`
```css
h1{
color: hsl(240, 100%, 50%);
}
```
* HSLA (هوى ، خفة ، تشبع ، ألفا)
`h1{
color: hsl(240, 100%, 50%, 0.5);
}
`
```css
h1{
color: hsl(240, 100%, 50%, 0.5);
}
```
## خصائص CSS الألوان موضحة

5
guide/arabic/css/properties/css3-text-shadow-property/index.md
View File

@ -8,8 +8,9 @@ localeTitle: خاصية الظل النص CSS3
ظل النص: X-offset Y-offset blur-radius color
`**Example :**
`
```
**Example :**
```
المغلق ص { الظل النص: 2px 2px 8px # FF0000؛ } \`\` \`