محمد الحاج خلف

مرّت قواعد البيانات بأشكال عديدة تطورت مع تطور التكنولوجيا ولعل أشهرها قواعد البيانات العلائقية relational database، والتي تعتمد على مفهوم الجدول كوحدة تخزين أساسية لتنظيم البيانات. وبالطبع فإن قواعد البيانات بحاجة إلى برامج وأدوات خاصة لإدارتها والتعامل معها، تعرف هذه البرامج باسم أنظمة إدارة قواعد البيانات Data Base Managements Systems DBMS ومن أشهر أنظمة إدارة قواعد البيانات: Oracle, Microsoft SQL Server, MySQL, Microsoft Access وغيرها من باقي الأنظمة. سنشرح في هذا الدرس أساسيات لغة الاستعلام SQL عبر الأمثلة العملية وذلك باستخدام لوحة التحكم phpMyAdmin. سنشرح كيفية إنشاء جدول جديد عبر استخدام تعليمة CREATE وكيف من الممكن إدخال البيانات وجلب البيانات من الجداول وذلك باستخدام تعليمتي INSERT INTO لتخزين السجلات في الجدول والتعليمة SELECT لجلب البيانات من جدول معين. بالإضافة إلى ذلك سنتعلّم كيف نقوم بتحديث وحذف السجلات، بالإضافة إلى أخذ لمحة سريعة عن التوابع الرياضية التي تقدمها SQL.

في بعض الأحيان تحتاج التصاميم شديدة البساطة إلى بنية معقدة وتطبيق مهارات مختلفة على التنسيق. توسيط العناصر، ضبط المحتوى و المحاذاة هي طرق غير كافية لجميع الحالات. أحد العيوب التي يمكن أن تسببها الطرق السابقة تكمن عند ضبط الترويسة بحيث يكون: العنوان على اليسار وقائمة التنقل على اليمين. في هذه الحالة من الشائع استخدام الخواص float ،position مع إعطاء القيمة absolute، كأسلوب آخر يمكن التفكير باستخدام الخصائص padding, margin ، حيث يوجد بالتأكيد عدة طرق وأساليب ولكن السؤال المهم هو: أي هذه الطرق مناسب عند عمل تصميم متوافق مع جميع أجهزة العرض "responsive" ؟ فبعض الطرق تعطي نتائج جيدة على الشاشات كبيرة الحجم ولكنها تؤدي إلى نتائج غير مرغوبة في الشاشات الصغيرة. ضمن هذا الدرس سنظهر كيفية توسيط عناصر الترويسة (أو أي عنصر آخر) وضبطها بشكل عمودي/شاقولي وباستخدام أشباه العناصر pseudo-elements فقط. وبدون استخدام الخصائص float أو absolute. وذلك للحصول على نتيجة مشابهة للتالي : شيفرة HTML لهذا المثال بسيطة جدا وهي : <header> <h1>Super Bad</h1> <nav> <a>First Link</a> <a>Second Link</a> <a>Third Link</a> </nav> </header>سنقوم بتطبيق بعض التنسيقات على هذه الترويسة لإعطائها ارتفاعًا ثابتًا وبعض الحشوة padding كما نقوم بإعطاء الخاصية text-align القيمة justify وذلك لضبط العناصر داخل الترويسة: header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }وفقاً للنتيجة المطلوب الوصول إليها، يجب أن يظهر كلً من العنوان وقائمة التنقل على سطر واحد، سنقوم بعمل هذا بدون استخدام float أو position إنما عبر تطبيق القيمة inline-block كالتالي : header h1, header nav { display: inline-block; }في الواقع فإن الخاصية text-align:justify والتي من شأنها أن تجعل العنوان على اليسار وقائمة التنقل على اليمين، فإنها لن تعطي النتيجة المرجوة منها بوجود الخاصية الأخرى inline-block إلا إذا كانت محتويات العنصر أكبر من العنصر نفسه، أي حدوث طفحان overflow وهذا غير موجود في مثالنا الحالي، لذلك نقوم استخدام شبه عنصر pseudo-element وذلك عبر استخدام الصنف after:: على الترويسة وظهوره معها ضمن نفس السطر عبر الخاصية inline-block وضمان حدوث الطفحان عبر الخاصية width: 100% : header::after { content: ''; display: inline-block; width: 100%; } لغاية الآن نكون قد حصلنا على النتيجة التالية. حتى الآن تمكنا من الحصول على العناصر مرتبة بأسلوب صحيح بشكل أفقي وبدون استخدام الخصائص float أو absolute ولكن ما نرغب به زيادةً على هذا هو تطبيق التوسيط عمودياً، وهي حقيقة من المشاكل التي تواجه مطوري الويب بشكل مستمر (توسيط المحتوى عمودياً)، يوجد بالتأكيد عدة حلول ومن الشائع استخدام الخصائص margin،line-height أو حتى absolute. ولكن دعنا نناقش طريقة أفضل. بدايةً لو قمنا بإعطاء الخاصية vertical-align: top إلى قائمة التنقل فإننا سنلاحظ أن جميع عناصر القائمة ستتحرك إلى الأعلى وبالتحديد إلى بداية قسم الترويسة وهذا طبيعي إلى الآن (معاينة). الآن إذا قمنا بإعطاء ارتفاع الترويسة القيمة 100% فيصبح بإمكاننا توسيط عناصر قائمة التنقل عبر استخدام الخاصية vertical-align: middle نحصل على هذا. ولكن كيف يمكن توسيط جميع عناصر الترويسة عموديا ؟ يكمن الحل بإضافة عنصر جديد وإعطائه ارتفاع 100% وذلك لنضمن عمل المحاذاة العمودية بالشكل الصحيح ، حيث سنلجأ إلى استخدام شبه عنصر نطبق عليه هذه الخاصية لنضمن توسيط باقي العناصر والحصول على النتيجة المرجوة، هذا الأسلوب تم شرحه من قبل Michal Czernow. وبالتالي يكون تنسيق CSS : header h1 { height: 100%; } header h1::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }وبالتالي نحصل على النتيجة المطلوبة. كما يبدو فإننا حصلنا على النتيجة المطلوبة ولكن علينا أن نتأكد من أمرين اثنين : Line-breaks : أي النتيجة التي ستظهر في حال النص الطويل والنزول لأكثر من سطر.Responsiveness : أي توافقية العرض على جميع الأجهزة للحصول على نفس النتيجة المطلوبة.لنبدأ بالنقطة الأولى: في حال كان العنوان يمتد على أكثر من سطر، عندئذ سيتم دفعه إلى الأسفل وهذا تصرف منطقي على اعتبار أن ارتفاع العنصر الوهمي هو 100%، أنظر هذا المثال. لحل هذه المسألة دعنا بالبداية نضع العنوان ضمن عنصر div خاص به: <header> <div> <h1>Super Bad</h1> </div> <nav> <a>First Link</a> <a>Second Link</a> <a>Third Link</a> </nav> </header>وبالتالي تطبيق شبه عنصر على هذه الفقرة الجديدة كالتالي: header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ''; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }وبالتالي الحصول على هذه النتيجة. ننتقل الآن إلى النقطة الثانية وهي التوافق مع جميع أجهزة العرض. يمكن على سبيل المثال عدم تعريف ارتفاع الترويسة وإعطاء حشوة padding لجميع العناصر الداخلية للحصول على الارتفاع المطلوب. في هذه الحالة لن نحتاج إلى العنصر div الذي تم إضافته مسبقا ويكون تنسيق CSS كالتالي : header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ''; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }ونحصل على هذه النتيجة. وبالتالي نكون قد حصلنا على النتيجة المطلوبة، أما في حال رغبت بتحديد ارتفاع الترويسة عندئذ يجب إعادة استخدام العنصر div والاستعانة بـ media query من أجل الشاشات الصغيرة، ويصبح تنسيق CSS كالتالي: @media screen and (max-width: 820px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }وتكون النتيجة مشابهة لهذه. ملاحظة: إن ترغب بجعل هذا المثال يعمل بشكل صحيح على المتصفح انترنت اكسبلورر 8 فيجب استخدام ":" عوضا عن "::" ضمن العناصر والفئات الوهمية، حيث يكون تنسيق CSS كاملا كالتالي : @import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; } header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ''; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ''; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }والنتيجة ستبدو كهذه. إلى هنا نأتي إلى نهاية هذا الدرس، والذي ناقشنا فيه كيفية توسيط العناصر عمودي/شاقولياً وبشكل يتوافق مع جميع شاشات العرض، يوجد بالتأكيد طرق أخرى بالإمكان الاستفادة منها. آمل أن يكون هذا الدرس قد حمل في طياته الشيء المفيد. ترجمة -وبتصرّف- للدّرس Justified and Vertically Centered Header Elements لكاتبه Mary Lou جميع حقوق المقال محفوظة لموقع codrops.

هذا أول درس من سلسلة "مدخل إلى ASP.net"، والتي سنحاول من خلالها تقريب منصة العمل ASP.net الخاصة بشركة Microsoft إلى المبتدئين، وهي مفصلّة إلى دروس، كل درس يتكلم عن موضوع معين، في هذا الدرس (الأول) سنتعلم كيف نستخدم عناصر التحكم الأساسية المضمنة في منصة العمل ASP.NET والتي لابد منها لإنشاء تطبيقات الانترنت، حيث سنتعلم كيف نعرض المعلومات باستخدام الأداتين Label ،Literal، وكيف نقبل ونتعامل مع دخل المستخدم من خلال الأدوات TextBox ،CheckBox ،RadioButton. عرض المعلومات منصة عمل ASP.NET تدعم أداتين لعرض البيانات النصية Label ،Literal ففي حين أن الأداة Literal تعرض البيانات بأسلوب بسيط، فإن الأداة Label تقدم العديد من المزايا والتنسيقات الإضافية. استخدام أداة التحكم Label نستخدم أدوات عرض المعلومات حتى نتمكن من تعديل النص المعروض على الصفحة وقت التنفيذ حيث نستطيع ببساطة أن نحدد النص المراد عرضه من خلال إسناده للخاصية Text لأداة Label، كما يمكن أن نستخدم تنسيقات html لتقوم هذه الأداة بتفسيرهم وتوليد الخرج المطلوب، وبشكل افتراضي تقوم هذه الأداة بإحاطة النص بالوسم <span>، في الكود التالي نعرض أساليب مختلفة لإسناد المعلومات لأدوات Label: كود ASP.net <div> <asp:Label ID="Label1" runat="server" Text="Hi i'm Label1" ></asp:Label> <br /> <asp:Label ID="Label2" runat="server" Text="Label"> Hi i'm Label2 </asp:Label> <br /> <asp:Label ID="Label3" runat="server" Text="<b><i>Hi i'm Label3</i></b>"> </asp:Label> </div> الأداة Label تدعم العديد من الخصائص لتنسيق النصوص، نستعرض منها: BackColor: تغيير لون الخلفية للأداة. BorderColor: تتعين لون لإطار يحيط بأداة Label. BorderStyle: تحديد نمط الإطار الذي سيتم عرضه، يمكن أن تأخذ هذه الخاصية أحد القيم التالية: NotSet، None، Dotted، Dashed، Solid، Double، Groove، Ridge، Inset،، Outset. BorderWidth: تحديد ثخانة الإطار. CssClass: تحديد صف CSS يتم تطبيقه على هذه الأداة. Font: تحديد نوع الخط المستخدم. ForeColor: تحديد لون الخط. Style: لتطبيق تصميم معين على أداة Label. ToolTip: نص يتم عرضه كتلميح عند مرور الماوس على أداة Label. عادة ما يتم استخدام الأداة Label لعرض عناوين لأدوات أخرى لمساعدة المستخدم على القيام بعمله، وبالتالي فإن هذه الأداة تملك الخاصية AssociatedControlID لتحديد الأداة المرتبطة بها وينصح باتسخدام هذه الخاصية بشكل عام. استخدام أداة التحكم Literal تعمل هذه الأداة بشكل مشابه جدا لعمل الأداة Label إلا أنها لاتقوم بإحاطة النص بالوسم <span> وهذا ماقد نحتاجه في بعض المواقع التي لايمكن فيها ترجمة أكود html ( كتحديد عنوان الصفحة على المتصفح مثلا )، وبما أن هذه الأداة لاتدعم الوسم <span> فهي أيضا لاتدعم الخصائص التابعة له CssClass ،BackColor، الأداة Literal تدعم خاصية هامة وغير مدعومة بالأداة Label وهي الخاصية Mode حيث يمكنها أن تأخذ أحد القيم الثلاث التالية: PassThrough: تفسير رموز html الموجدوة في النص وعرض ماتعنيه. Encode: عرض النص بدون ترجمة رموز html حيث تظهر كما هي. Transform: يتم تفسير فقط الرموز المدعومة من قبل الجهاز الطالب للصفحة. كود ASP.net <div> <asp:Literal ID="L1" runat="server" Mode="PassThrough" Text="<hr />"/> <asp:Literal ID="L2" runat="server" Mode="Encode" Text="<hr />"/> <asp:Literal ID="L3" runat="server" Mode="Transform" Text="<hr />"/> </div> عند تنفيذ الصفحة السابقة تقوم Literal1 بعرض خط أفقي، Literal2 تعرض النص </hr> في حين أن Literal3 تفحص الجهاز الطالب للصفحة فإن كان يدعم هذا الوسم فإنه يعرض خط أفقي وإلا فسيتم عرض النص كما هو </ hr>. قبول دخل المستخدم تتضمن منصة عمل ASP.NET أدوات تسمح للمستخدم بإدخال وتحديد اختياراته في الموقع، حيث تقدم ثلاث أدوات أساسية هي TextBox ،CheckBox ،RadioButton و سنتعرف عليهم في الفقرات التالية بالتفصيل. استخدام أداة التحكم TextBox تسمح هذه الأداة للمستخدم بإدخال نص وفقا ً لثلاثة أنماط تحددها قيمة الخاصية TextMode وهم: SingleLine: قبول الدخل كسطر واحد فقط. MultiLine: قبول الدخول بأسطر عديدة. Password: حيث يظهر دخل المستخدم كرموز ( نجوم *** أو غيره ). كود ASP.net <div> <asp:TextBox ID="TextBox1" runat="server" TextMode="SingleLine"/> <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" /> <asp:TextBox ID="TextBox3" runat="server" TextMode="Password" /> </div> خصائص الأداة TextBox: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoCompleteType: تحديد نمط الإكمال التلقائي حيث يكفي أن يدخل المستخدم بضعة حروف حتى يتم إظهار كلمات مطابقة تم إدخالها مسبقاً، يمكن إلغاء تفعيل هذه الخاصية بإسناد القيمة Disabled لها. AutoPostBack: إرسال المحتويات إلى السيرفر بشكل فوري عند أي تغير بالنص المدخل. Columns: تحديد عدد الأعمدة التي ستظهر. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. MaxLength: تحديد العدد الأعظمي من المحارف التي يمكن إدخالها ( لاتعمل مع MulitLine). ReadOnly: لمنع المستخدم من تغيير القيمة الموجودة بـ TextBox. Rows: تحديد عدد الأسطر التي ستظهر. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Warp: لتحديد إمكانية الالتفاف التلقائي للنص مع النمط MultiLine. أداة التحكم TextBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدث TextChanged والذي يُطلق عندما تتغير محتويات هذه الأداة. لتوضيح آلية عمل الخاصية AutoPostBack أنشئ صفحة جديدة أضف لها TextBox1 وأعطي الخاصية السابقة القيمة True ثم أضف Lable1 ماسنقوم به هو أنه عند كتابة نص ما فإنه سيعرض في الأداة Label1 بمجرد نقل التركيز خارج TextBox1 وهو دليل على عمل postBack آلي للصفحة، أي إرسالها للسيرفر وإعادة النتائج: كود ASP.net <div> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" ontextchanged="TextBox1_TextChanged"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> في الحدث TextChanged الخاص بالأداة TextBox1 اكتب الكود التالي: كود #C protected void TextBox1_TextChanged(object sender, EventArgs e) { Label1.Text = TextBox1.Text; } كود VB Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged Label1.Text = TextBox1.Text End Sub نفذ الصفحة واكتب ماتريد في TextBox1 ثم اضغط على المفتاح Tab من لوحة المفاتيح وشاهد النتيجة، أغلق المستعرض ثم أعد التنفيذ مرة أخرى وقم بكتابة أول حرف من القيمة التي أدخلتها بالتنفيذ الأول لترى كيف تتم عملية الإكمال التلقائي، ألغي تفعيل خاصية الإكمال التلقائي كما هو موضح بالأعلى ثم أعد التنفيذ وأعد كتابة نفس الكلمة لتلاحظ توقف عمل الإكمال التلقائي. استخدام أداة التحكم CheckBox تسمح هذه الأداة للمستخدم أن يحدد قبوله أو رفضه لأمر ما، أي أنها تعتبر كسؤال يطرح على المستخدم والإجابة حتما ً إما نعم أو لا، مثلا موقع فيسبوك يسألنا إن كنا نريد استقبال رسائل على بريدنا الإلكتروني أم لا، حيث إن الخاصية Checked هي التي تمكننا من معرفة خيار المستخدم كما سنرى بعد قليل. خصائص أداة التحكم CheckBox: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته. Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر بجانب هذه الأداة ( السؤال المطروح ). TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right. أداة التحكم CheckBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره سواءاً بالرفض أو القبول. مثال بسيط: أنشئ صفحة جديدة أضف لها الأدوات CheckBox1 ،Button1 ،Label1 أنقر على الزر Button1 مرتين واكتب الكود التالي: كود #C protected void Button1_Click(object sender, EventArgs e) { Label1.Text = CheckBox1.Checked.ToString(); } كود VB Protected Sub Button1_Click1(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = CheckBox1.Checked.ToString() End Sub نفذ وقم تحديد خيار CheckBox ثم اضغط على الزر، سترى أن الخاصية Checked أعادت True، ألغي تفعيل الخيار واضغط على الزر مرة أخرى. ماهي النتيجة الآن ؟ كود الصفحة بعد إجراء تعديلات بسيطة بالخصائص كالتالي: كود ASP.net <div> <asp:CheckBox ID="CheckBox1" runat="server" Text="استقبال رسائل على الجوال ؟ " TextAlign="Left"/><br /> <asp:Button ID="Button1" runat="server" Text=" ok " onclick="Button1_Click" /><br /> <asp:Label ID="Label1" runat="server" Text="" /> </div> ملاحظة: منصة عمل ASP.Net تدعم الأداة CheckBoxList والتي تتيح إماكانية عمل قائمة عناصرها عبارة عن أدوات CheckBox كما سنرى في درس لاحق. استخدام أداة التحكم RadioButton لا تظهر هذه الأداة منفردة لوحدها إنما تكون دائما ً ضمن مجموعة حيث بإمكان المستخدم تحديد خيار واحد فقط من ضمن أدوات مجموعة ما. خصائص أداة التحكم RadioButton: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته. Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. GroupName: لضم أداة RadioButton إلى مجموعة، من كل مجموعة لايمكن تحديد سوى خيار واحد فقط من أدوات RadionButton الموجودة فيها. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر بجانب هذه الأداة ( الخيار المطروح ). TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right. أداة التحكم RadioButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره. سنقوم بالمثال التالي بعرض بسيط لكيفية عمل هذه الأداة، أنشئ صفحة جديدة أضف عليها الأدوات التالية: RadioButton عدد 3، button ،Label، نعدل الخاصية Text لأدوات RadioButton بحيث تعرض كل أداة لون معين، كما يجب ( وهذا هام جدا) أن تأخذ الأدوات الثلاث السابقة نفس قيمة الـ GroupName، نضغط على الزر مرتين ونكتب الكود التالي: كود #C protected void Button1_Click(object sender, EventArgs e) { string color = ""; if (RadioButton1.Checked) color = RadioButton1.Text; if (RadioButton2.Checked) color = RadioButton2.Text; if (RadioButton3.Checked) color = RadioButton3.Text; Label1.Text = "Your Favorite color is: " + color; } كود VB Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim color As String = "" If RadioButton1.Checked Then color = RadioButton1.Text End If If RadioButton2.Checked Then color = RadioButton2.Text End If If RadioButton3.Checked Then color = RadioButton3.Text End If Label1.Text = "Your Favorite color is: " + color End Sub أما كود الصفحة فهو كالتالي: كود ASP.net <div> Favorite color ?<br /> <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" GroupName="colors"/><br /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Green" GroupName="colors"/><br /> <asp:RadioButton ID="RadioButton3" runat="server" Text="Blue" GroupName="colors"/><br /> <asp:Button ID="Button1" runat="server" Text=" ok " onclick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server" Text=""/> </div> قم بحذف الخاصية GroupName من الكود السابق ونفذ وجرب أن تختار أكثر من لون. ملاحظة: منصة عمل ASP.Net تدعم الأداة RadioButtonList والتي تتيح إماكانية عمل قائمة عناصرها عبارة عن أدوات RadioButton كما سنرى في درس لاحق. بهذا نكون قد وصلنا إلى نهاية الدرس الأول. سنتطرق في الدرس القادم إلى كيفية إرسال بيانات النماذج إلى الخادوم بواسطة أدوات الأزرار المتنوعة.

خلال العامين الأخيرين، قدَّمت CSS مجموعة جديدة من الخصائص التي تتيح إماكنية تطبيق تأثيرات مختلفة على الصور عبر متصفحات الويب. ومن خلال بضعة أسطر برمجية ودون الحاجة نهائيًا إلى برامج تحرير وتعديل الصور. بالتأكيد فإن هذا الموضوع سيلقى آذانًا صاغية عند الأشخاص الذين يتقنون كتابة الشيفرات البرمجية وليس لديهم نفس المهارة في التعامل مع برامج تحرير وتعديل الصور. من الأمثلة التي يمكن تطبيقها ضمن CSS هي "تأثير إكساء النص" حيث تظهر الكتابة وهي مكساة بغلاف (صورة) نقوم بتحديدها، أيضاً يمكن تطبيق تأثيرات مختلفة على ألوان الصور، تأثيرات مزج الصور مع عناصر أخرى، قص جزء من الصورة وفق أشكال مختلفة، وحتى قلب محتويات الصورة والعديد من التأثيرات الأخرى. إذاً، فإن CSS قد قطعت شوطًا طويلًا ضمن هذا المجال، خلال هذه المقالة سأقوم بعرض الخصائص التي تسمح بتطبيق التأثيرات الرسومية وهي تأثيرات "نماذج المزج" و"الفلاتر". مزج الألوان باستخدام نماذج المزج في CSS إذا كنت مصمم ويب وقد استخدمت مسبقً برامج تحرير الرسومات مثل "Photoshop" أو "Illustrator" فلابد أنك قمت بالتعامل مع نماذج المزج أثناء عملك على هذه البرامج . حيث تعتبر نماذج المزج أحد أكثر التأثيرات استعمالً على الرسومات. عمليات المزج والتي تسمى أيضاً بتوابع المزج تتيح درجة تحكم عالية لتطبيق عمليات المزج المختلفة مثل عكس الألوان، خلطها ببعضها البعض، زيادة درجة إضاءتها، والعديد غير هذا. عندما نستخدم نماذج المزج فإن تأثيرً معينً سيتم تطبيقه على عنصر محدد يدعى بالمصدر "source" حيث سيتم دمجه مع الخلفية ليتم تشكيل الهدف "destination". هذه الخلفية "backdrop" تعرَّف ضمن CSS على أنها المحتوى الذي يقع خلف العنصر المطلوب وهي التي سيتم دمج العنصر معها. وبالتالي فإن عملية الدمج يقصد بها دمج العنصر المطلوب مع الخلفية التي يتموضع عليها. أي أنه من الناحية العملية عندما نقوم باستخدام نموذج المزج على عنصرين، فإنه فعلياً ستتم عملية المزج على المناطق التي تحتوي هذين العنصرين، على اعتبار أن كل عنصر سيتم مسبقاً دمجه مع خلفيته الخاصة. قبل الشروع بالحديث عن تفاصيل عمليات الدمج ونماذج المزج فمن المهم التذكير بأن CSS تتيح طريقة سهلة لتطبيق عملية الدمج تعرف باسم "دمج ألفا البسيط simple alpha compositing" وعملياً فإن خاصية الشفافية opacity هي التي تقوم به، حيث إن تغيير قيمة هذه الخاصية يجعل المتصفح يقوم بعملية دمج بحيث يمكن أن يظهر العنصر بدرجة شفافية معينة بالنسبة إلى الخلفية التي يقع عليها. اليوم تتيح CSS خاصيتين رئيسيتين هما: background-blend-mode والتي تقوم بمزج العناصر مع الخلفية المحددة. والخاصية mix-blend-mode ةالتي تسمح بمزج العناصر مع بعضها البعض، ويتم استخدام هاتين الخاصيتين عبر توفير 16 نموذج مزج كقيمة محددة لهما. مزج صور الخلفية باستخدام الخاصية background-blend-mode إن الخاصية background-blend-mode وكما يعبر عنها اسمها، تقوم بتطبيق نموذج مزج معين على خلفية العنصر المحدد، هذه الخلفية إما أن تكون صورة أو لون. وبالتالي يجب أن نحدد لهذه الخاصية أي نموذج مزج يجب تطبيقه. في حال كان العنصر يملك أكثر من صورة واحدة كخلفية له، عندئذ بالإمكان تحديد أكثر من نموذج مزج، حيث يتم تطبيق النموذج الأول على الصورة الأولى، والنموذج الثاني على الصورة الثانية وهكذا ... على سبيل المثال: background-image: url(first-image.png), url(second-image.png); background-color: orange; background-blend-mode: screen, multiply; ضمن هذا المثال فإن الخلفية second-image.png سيتم مزجها مع اللون المحدد كخلفية "البرتقالي" باستخدام نموذج المزج "multiply"، بعد ذلك يتم مزج الخلفية first-image.png مع نفس اللون "البرتقالي" باستخدام نموذج المزج screen . (تذكر بأن الخلفية الأولى هي التي سوف تظهر في حين تتوضع باقي الخلفيات تحتها). توفر CSS كما ذكرنا مسبقا 16 نموذج مزج وهي: Normal: وهو النموذج الافتراضي وعمليا لايقوم بتطبيق أي تأثير. multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity كل نموذج مزج من المجموعة السابقة يقوم بتطبيق تأثيرات مختلفة عن باقي النماذج. يكمن الجزء الأصعب في التحديد المسبق لأي نموذج مزج ينبغي استخدامه للحصول على النتيجة المطلوبة، فمن شبه المستحيل توقع النتيجة التي ستظهر عند تطبيق نماذج المزج على الصور. الصورة التالية تظهر نتيجة تطبيق كل نماذج المزج السابقة (كلٌ على حدى) على نفس الصورة حيث تمت عملية المزج مع اللون الأحمر، ملاحظة : ترتيب الصور بدءً من الصورة العلوية في أقصى اليسار مع نفس ترتيب توابع المزج التي تم ذكرها في الأعلى. عادةً، يتم اختيار نموذج المزج من خلال التجربة عبر تطبيق نماذج المزج على الصورة لتحديد التأثير المطلوب . كما يمكن الاحتفاظ بنماذج المزج ذات التأثيرات الشائعة على الصور لتطبيقها عند الحاجة. على سبيل المثال نموذج اللمعان والذي يسمح بإنشاء صور ذات تأثير تقليدي (قديم) وهذا مانجده مألوفاً ضمن مواقع الانترنت التي تعتمد صورة رئيسية مع عنوان باللون الأبيض كترويسة للصفحة وهو الأسلوب الذي انتشر على نطاق واسع خلال العام الماضي . ضمن مقال آخر كتبته -أي كاتبة المقال، سارة سويدان- منذ فترة وجيزة، قمت بإنشاء صفحة تفاعلية تسمح لك برفع صورك ومعانية التأثيرات المختلفة لنماذج المزج عليها. يمكنك من خلال التجربة وبعض المهارة الحصول على صور بتأثيرات غاية في الجمال، الصورة التالية تظهر نتيجة تطبيق نموذج المزج overlay على الصورة مع تدرج خطي من اللون الأخضر إلى الأحمر (من اليسار إلى اليمين)، أي تمت عملية الدمج بين التدرج اللوني مع الصورة الأصلية. يمكن مشاهدة هذا المثال عبر هذا الرابط. عموماً يمكن الحصول على تأثيرات رسومية عبر مزج العناصر مع بعضها البعض (وعدم الاكتفاء بعمليات المزج على الخلفية كما فعلنا حتى الآن). إن هذا الأمر مفيد عندما نرغب بعملية المزج على عنصر صورة <img> أي أنه ليس خلفية إنما عنصر ضمن الصفحة، وأيضاً لمزج النص مع صورة تتوضع خلفه، وفي هذه الحالات فإننا سنستخدم الخاصية الثانية وهي mix-blend-mode . مزج العناصر مع خلفياتها باستخدام الخاصية mix-blend-mode واحدة من الاستعمالات الأكثر شيوعً لخاصية مزج العناصر فوق بعضها mix-blend-mode، هي ضمن الصفحات التي تحتوي على ترويسة (عادة قائمة التنقل) ثابتة الظهور أعلى الصفحة حتى عند النزول بشريط التمرير لأسفل، في هذه الحالة يتم تركيب عنصر الترويسة فوق العناصر الأخرى التي تصبح خلفه، استخدام آخر لهذه الخاصية عند تركيب نص ما فوق صورة كخلفية له، بل وحتى تركيب نص فوق نص آخر. بشكل مشابه للتعامل مع الخاصية background-blend-mode فإن الخاصية mix-blend-mode أيضاً تتعامل مع نفس مجموعة نماذج المزج الست عشرة التي تعرفنا إليها مسبقاً. الصورة التالية تظهر نص متموضع فوق عنصر صورة ومن ثم التأثير الناتج عن تطبيق توابع المزج المختلفة عبر الخاصية mix-blend-mode: كمثال على تطبيق نماذج المزج بين العناصر، سنضع نص ما ضمن عنصر <h1> والذي بدوره يوجد ضمن فقرة <div> لها صورة كخلفية، ثم تطبيق نموذج المزج multiply حيث تكون الشيفرة البرمجية كالتالي : <div class=“wrapper”> <h1>This is a blended heading</h1> </div> .wrapper { background-image: url(path/to/image.jpg); background-size: cover; /* ... */ } h1 { mix-blend-mode: multiply; /* تنسيقات أخرى هنا */ } من الممكن أيضا كما ذكرنا مزج نص مع نص آخر، وهذا ماينتج عنه تأثير رائع بسبب الألوان الجديدة الناتجة، حيث يظهر في الصورة التالية نتائج عديدة تم الحصول عليها عبر تطبيق نماذج المزج المختلفة مع الخاصية mix-blend-mode. ضمن الصورة السابقة تم تحريك بعض العناصر عن مواضعها الأصلية لتتراكب فوق عناصر أخرى حتى يتاح لنا إمكانية تطبيق الخاصية mix-blend-mode. ملاحظات حول المزج في بعض الأحيان، قد لانرغب أن تتم عملية المزج مع المحتوى الذي يقع خلف العنصر، مثلا أن تتم عملية المزج بين مجموعة من العناصر ولكن دون أن تشمل المحتويات في الخلفية بهذا الأمر، في هذه الحالة نقوم باستخدام خاصية العزل والتي تدعى isolation، حيث يصبح بالإمكان عزل مجموعة من العناصر مع بعضها وتطبيق نماذج المزج دون أن يتأثر أي شي لاينتمي لهذه المجموعة ولاحتى العناصر التي تتموضع خلفها. عند استخدام الخاصية background-blend-mode فمن غير المجدي استخدام الخاصية isolation وذلك لأن الخلفية لن تتراكب أساسً مع عناصر أخرى تقع خلفها (حيث إنها لن تظهر) وبالتالي فإننا نستخدم خاصية العزل isolation فقط مع الخاصية mix-blend-mode . يمكن أن تتعلم المزيد عن خاصية العزل isolation. ملاحظة: تسمح الخاصية mix-blend-mode بمزج عناصر SVG. دعم متصفحات الويب يومًا بعد يوم تتجه متصفات الانترنت لدعم نماذج المزج بشكل أكبر، على العموم يمكن الاطلاع على المتصفحات التي تدعم الخاصية background-blend-mode والمتصفحات التي تدعم الخاصية mix-blend-mode. بشكل عام يمكن استخدام نماذج المزج مع تحديد سيناريو بديل للمتصفحات التي لاتوفر الدعم. تعديل الصور باستخدام الفلاتر ضمن CSS يقوم الفلتر بتطبيق تأثيرات محددة على الصورة عندما يتم عرضها على صفحة الويب، للتوضيح أكثر يمكن تصور الفلتر على أنه طبقة تتوضع أما عدسة الكاميرة وبالتالي مايتم مشاهدته عبر الكاميرة هي الصورة بعد تطبيق تأثير هذه الطبقة عليها، وبالتأكيد يتغير التأثير عندما يتغير الفلتر المستخدم. لتطبيق الفلتر ضمن CSS يتم استخدام الخاصية filter والتي يمكن معرفة المزيد عنها. تأثيرات الفلاتر تشمل تأثير الضباب، تأثير الظل، تأثير اللشفافية وغيره. حيث يتم تحديد دالّة الفلتر (filter function) المراد تطبيقها، يوجد 10 دوال فلتر وهي: ▪ blur() ▪ brightness() ▪ contrast() ▪ grayscale() ▪ hue-rotate() ▪ invert() ▪ opacity() ▪ saturate() ▪ sepia() ▪ drop-shadow() ▪ url() يتم تمرير قيمة ما إلى أحد الدوال السابقة لمعرفة درجة التأثير التي ستقوم هذه الدالة بتطبيقها، ضمن الفقرات التالية سنتعرف على جميع هذه الدوال وطريقة استخدامها والتأثير الناتج عنها. الدالة ()blur يستخدم هذا التابع لتطبيق تأثير الضباب على الصورة، حيث تظهر بشكل ضبابي. يقوم هذا التابع بعمله وفق خوارزمية غاوص (أي تطبيق Gaussian Blur). ويتم تمرير وسيط له يحدد درجة الضبابية المراد تطبيقها، هذه القيمة يجب أن تكون عدد موجب حصرً وليس عدد سالب أو نسبة مئوية. في حال تمرير القيمة صفر 0 فلن يكون لهذا التابع أي تأثير، وكلما زادت القيمة تزداد درجة الضبابية المطبقة. أما واحدة قياس هذه القيمة فيمكن تحديدها بإحدى القيم : px, em أو rem. مثال: blur(.5em); blur(7px); blur(0); filter: blur(); /* equivalent to blur(0); */ النتيجة التالية تظهر عند تطبيق التابع blur مع تمرير القيمة 10px: الدالة ()brightness يستخدم هذا التابع لتغيير درجة سطوع الصورة، إما زيادة أو نقصان، ويتم تمرير قيمة له لتحديد درجة السطوع المراد تطبيقه. هذه القيمة إما أن تكون نسبة مئوية أو رقم عشري (مثلاً الرقم 0.65 = 65%)، القيمة صفر 0 تؤدي إلى ظهور الصورة باللون الأسود تماماً. أما القيمة 100% فإنها تحافظ على الصورة بألوانها الطبيعية دون أي تغيير على درجة السطوع. وهكذا فكلما زادت القيمة الممررة للتابع brightness فستزداد درجة السطوع. يمكن تمرير قيمة أكبر من 100% للحصول على سطوع أكبر من الوضع الأصلي للصورة، وأي قيمة أصغر من 100% تؤدي إلى نقصان السطوع عن الوضع الأصلي. مثال: brightness(150%); brightness(0); brightness(0.7); brightness(0.01); brightness(200%); brightness(10%); النتيجة التالية تظهر عند تطبيق التابع brightness مع تمرير القيمة 200%: الدالة ()constract يستخدم هذا التابع لتغيير درجة التباين ضمن الصورة، حيث يقصد بالتباين زيادة الفروق اللونية بين المناطق الفاتحة والأخرى الغامقة في الصورة. بشكل مشابه للتابع brightness، يتم تمرير قيمة إلى تابع التباين constract (رقم أو نسبة مئوية) تحدد درجة التباين المراد تطبيقه. القيمة صفر 0 تؤدي إلى ظهور الصورة باللون الأسود تماماً، أما القيمة 100% فإنها تحافظ على الصورة بألوانها الطبيعية دون أي تغيير على درجة التباين. وهكذا فكلما زادت القيمة الممررة للتابع constract فستزداد درجة التباين. يمكن تمرير قيمة أكبر من 100% للحصول على تباين أكبر من الوضع الأصلي للصورة، وأي قيمة أصغر من 100% تؤدي إلى نقصان التباين عن الوضع الأصلي. مثال: contrast(150%); contrast(0); contrast(0.7); contrast(0.01); contrast(200%); contrast(10%); النتيجة التالية تظهر عند تطبيق التابع constract مع تمرير القيمة 200%: الدالة ()grayscale يستخدم هذا التابع لتحويل الصورة الملونة إلى صورة أبيض وأسود (وبشكل أدق تدرجات اللون الرمادي). يتم تمرير قيمة لهذا التابع على شكل نسبة مئوية أو رقم عشري، القيمة صفر 0 تحافظ على ألوان الصورة الأصلية دون أي تغيير، أما الفيمة 100% فإنها ستعطي صورة بتدرجات الرمادي دون أي ألوان أخرى، يتم اعتبار أي قيمة أكبر من 100% على أنها تساوي 100% ويتم تطبيق تأثيرها. عموماً إن تطبيق قيم ضمن المجال من 0 إلى 100% يؤدي إلى خسارة ألوان الصورة تدريجيً نحو تدرجات الرمادي كلما زادت القيمة المطبقة. مثال: #further-resources:target { animation: highlight .8s ease-out; } @keyframes highlight { 0% { background-color: #FFFF66; } 100% { background-color: #FFFFFF; } } النتيجة التالية تظهر عند تطبيق التابع grayscale مع تمرير القيمة 100%: الدالة ()hue-rotate يقوم هذا التابع بتدوير ألوان الصورة بمقدار زاوية تساوي القيمة الممررة له. أبسط طريقة لتوضيح مفهوم تدوير الألوان هي عبر عجلة الألوان. وهي عبارة عن قرص دائري الشكل يحتوي على جميع الألوان كل لون يقع ضمن درجة زاوية معينة على هذا القرص. فإن حددنا نقطة وهمية على القرص وقمنا بتدويره بدرجة ما، فسوف يتغير اللون عند النقطة المحددة. أسلوب عمل هذا التابع يكون عبر تحديد لون جميع النقاط ضمن الصورة الأصلية، ومن ثم تطبيق دوران على ألوان جميع هذه النقاط وبنفس الدرجة. وهذا ماينتج عنه صورة جديدة بألوان مختلفة كلياً عن الألوان الأصلية. القيمة الممررة لهذا التابع والتي تعبر عن درجة الدوران يجب أن تكون بين 0 و 360 , حيث إن القيمة صفر 0 لن تؤدي أي عملية دوران وبالتالي الحفاظ على الألوان كما هي، وهكذا كلما زادت القيمة تزداد معها درجة الدوران، وأي قيمة مغايرة للمجال من 0 إلى 360 يتم اعتبارها على أنها صفر 0. مثال النتيجة التالية تظهر عند تطبيق التابع hue-rotate مع تمرير القيمة 120deg: الدالة ()invert يقوم هذا التابع بعكس ألوان الصورة بشكل كامل، حيث تظهر بشكل مماثل للصور الملتقطة عبر كاميرة تصوير فوتوغرافي قبل إجراء عملية التحميض عليها (صور المصدر). يتم تمرير قيمة لهذا التابع تحدد درجة عكس الألوان المراد تطبيقه، بشكل افتارضي فإنه يأخذ القيمة 100% وهذا يعني عكس الألوان بصورة كاملة، أما إن تم تمرير القيمة صفر 0 فستبقى الصورة كما هي دون حدوث أي تعديل عليها، وهكذا يزداد تأثير هذا التابع كلما زادت القيمة المحددة له ضمن المجال من 0 إلى 100%، مع إمكانية تمرير رقم عشري له عوضً عن النسبة المئوية. مثال: invert(); /* equivalent to invert(100%) */ invert(0.24); invert(60%); النتيجة التالية تظهر عند تطبيق التابع invert مع تمرير القيمة 100%: الدالة ()opacity يعمل هذا التابع بشكل مشابه لعمل الخاصية opacity ضمن CSS، حيث يقوم هذا التابع بتغيير درجة شفافية الصورة وفقً للقيمة الممررة له، القيمة 100% تحافظ على الصورة في حالتها الأصلية دون أي تأثير شفافية، في حين أن القيمة صفر 0 تجعل الصورة شفافة تمامً وبالتالي غير مرئية، وهكذا تتراوح درجة الشفافية بحسب القيمة المحددة للتابع ضمن المجال من 0 إلى 100% مع إمكانية تمرير رقم عشري له عوضً عن النسبة المئوية. مثال النتيجة التالية تظهر عند تطبيق التابع opacity مع تمرير القيمة 0.5: الدالة ()saturate يقوم هذا التابع بتغيير درجة إشباع اللون، عندما تكون بعض الصور بألوان باهتة ونريد زيادة إشباع ألوانها لإضافة بعض الحيوية عليها فإننا نستخدم هذا التابع والذي يضيف رونقً خاصً يجعل الصور أكثر جمالية، درجة إشباع الألوان يتم تحديدها عبر القيمة الممررة لهذا التابع، القيمة 0 تجعل الألوان باهتة جداً (أضعف حالات الإشباع اللوني)، أما القيمة 100% في تحافظ على الصورة مثل وضعها الأصلي دون أي تعديل، وبالتالي لزيادة درجة الإشباع اللوني يجب تمرير قيمة أكبر من 100%. مثال النتيجة التالية تظهر عند تطبيق التابع saturate مع تمرير القيمة 250%: الدالة ()sepia يقوم هذا التابع بجعل الصورة تبدو معتّقة وكأنها صورة فوتوغرافية قديمة وبرونق جميل وجذاب، حيث يقوم بإضافة تأثير اللون البني الداكن عليها، وقد انتشر هذا التأثير مؤخرً بشكل واسع بسبب تأثيره الجذاب. يتم تمرير قيمة لهذا التابع تتراوح بين 0 إلى 100%، مع إمكانية تمرير رقم عشري، القيمة صفر 0 لاينتج عنها أي تأثير على الصورة، في حين أن القيمة 100% تؤدي إلى تطبيق هذا التأثير بأقصى درجة ممكنة. مع ملاحظة أن جميع القيم الأكبر من 100% يتم اعتبارها مساوية للقيمة 100%. مثال النتيجة التالية تظهر عند تطبيق التابع sepia مع تمرير القيمة 100%: الدالة ()drop-shadow تقوم الخاصية box-shadow ضمن CSS بتطبيق ظل على شكل صندوق يحيط بالعنصر المحدد، حتى إن لم يكن هذا العنصر له شكل مستطيل (صندوق) فإن الظل المطبق سيكون على شكل مستطيل، مما قد يؤدي إلى نتائج غير مرغوب بها. في حالة استعمال الصور ذات الصيغة PNG والتي غالباً تحتوي على أجزاء شفافة وأخرى مرئية فمن المرغوب فيه تطبيق تأثير الظل على الأجزاء المرئية وليس على شكل صندوقي. وفي هذه الحالة نستخدم التابع ()drop-shadow كما هو موضح في الصورة التالية: أما في حال تطبيق الخاصية box-shadow على نفس الصورة السابقة، عندها ستكون النتيجة كالتالي: يتم تمرير قيم للتابع ()drop-shadow بشكل مماثل لطريقة القيم التي تأخذها الخاصية box-shadow، في حال لم تكن على معرفة كاملة بأسلوب كتابة القيم الممررة للخاصية السابقة يمكنك قراءة هذه المقالة. http://tympanus.net/codrops/css_reference/box-shadow .png-img { filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3)); } الدالة ()url تسمح الدالة url باستخدام فلتر معرّف ضمن مستند SVG وتطبيقه على العنصر المطلوب، أي بالإمكان عدم التقيد بالفلاتر (التوابع) العشرة التي تحدثنا عنها ضمن الفقرات السابقة، إنما يمكن إنشاء فلاتر خاصة ضمن ملف SVG ومن ثم تمرير معرف هذا الفلتر إلى التابع url. مثال: /* filter from an external SVG file */ filter: url(myFilters.xml#effect); /* or filter defined in the main page */ url(#myFilter); المثال التالي يوضح كيفية عمل فلتر الضباب ضمن ملف SVG: <svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="8"/> </filter> </svg> إنشاء فلاتر SVG هو مجال واسع بحد ذاته، لذلك لن ندخل في تفاصيله ضمن هذه المقالة. تجربة مثال مباشر يمكن مشاهدة مثال مباشر عن جميع الفلاتر التي تم مناقشتها في هذه الدرس. مع ملاحظة أن الفلاتر المذكورة ماتزال غير مدعومة في بعض متصفحات الويب وقت كتابة هذه المقالة. تطبيق عدة فلاتر يمكن تطبيق أكثر من فلتر على الصورة، حيث يتم ذكر الفلاتر المطلوية ومن ثم تطبيقها بحسب الترتيب التي ذُكرت به. مثال: filter: sepia(1) brightness(150%) contrast(0.5); تحريك الفلاتر الفكرة تكون من خلال تطبيق أكثر من فلتر واحد على الصورة، ثم تطبيق خاصية الحركة animation على خاصية الفلتر ضمن CSS، مما يؤدي إلى ظهور صورة تتغير الفلاتر المطبقة عليها بأسلوب انسيابي مما يولد أكثر من تأثير عليها وبرونق غاية في الجمال. ترتيب العمليات الرسومية يوجد العديد من العمليات والتوابع الرسومية الأخرى التي يمكن تطبيقها على الصورة، مثل قص جزء من الصورة، قلبها، أو تركيب قناع ما عليها، وغير ذلك ... النقطة التي يجدر الإشارة لها هي أهمية ترتيب هذه التوابع والعمليات بالشكل الصحيح، حيث إن المتصفح سيقوم بتطبيقها وفقً لترتيب ذكرها ضمن CSS، وبالتأكيد فإن تغيير الترتيب سيؤدي إلى تغيير النتيجة النهائية التي ستظهر. التفكير خارج الصندوق (الإلهام) قام Dudley Story منذ فترة وجيزة بتطبيق مثال باستخدام نماذج المزج وتوابع القص لإنشاء صورة تعطي تأثير الرؤية بواسطة نظارات الرؤية ثلاثية الأبعاد. الخاتمة تعتبير نماذج المزج والفلاتر من الخصائص الرائعة التي تقدمها CSS لإنشاء التأثيرات الرسومية، كما يتم تطوير وتحديث هذه الخصائص وتوفير خصائص جديدة ضمن نفس المجال بغية سد الفجوة بين التصاميم المطبوعة وتصاميم صفحات الويب. وبالتالي فإننا نحن معشر مطوري ومصممي الويب تصبح لدينا القدرة للتحكم بشكل أكبر بالتأثيرات الرسومية دون الاستعانة برامج التحرير الرسومي. آمل أن تكون هذه المقالة قد حملت معلومات مفيدة، وشكراً للقراءة. ترجمة -وبشيءٍ من التصرّف- للمقال An Introduction To Graphical Effects in CSS لصاحبته: سارة سويدان.

في بعض الأحيان وعوضاً عن الانتقال إلى صفحة جديدة، فإن الروابط (الوسم <a>) تنقلنا إلى فقرة أو عنصر آخر موجود ضمن نفس الصفحة، هذا الأسلوب هو المستخدم للتنقل ضمن مواقع الانترنت ذات الصفحة الواحدة. يستخدم المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما. حيث يتم تطبيق هذه التنسيقات على الفقرة الهدف عند النقر على ذلك الرابط. على سبيل المثال، لو كان لدينا رابط يشير إلى فقرة لديها المعرّف "further-reading"، أي بشكل مشابه للشِفرة التالية: <a href="#further-reading" title="Further reading resources" /> <!– ... –> <section id="further-resources" > <!— ... —> </section> في هذه الحالة يمكن استخدام المحدد target: لإضاءة الفقرة المحددة عند الضغط على الرابط المعني بها. عموماً فإن تقنية الإضاءة نقصد بها تطبيق خلفية صفراء ومن ثم تلاشي اللون الأصفر تدريجيً إلى لون الخلفية الأساسي. #further-resources:target { animation: highlight .8s ease-out; } @keyframes highlight { 0% { background-color: #FFFF66; } 100% { background-color: #FFFFFF; } } نستخدم الخاصية animation ضمن CSS لتطبيق تنسيق ما بشكل متدرج، وبالتالي فإننا سنستعمل هذه الخاصية من أجل تطبيق فكرة الإضاءة وبالتالي تغيير لون الخلفية ضمن فترة زمنية كافية لملاحظتها من قبل القارئ. يمكن مشاهدة هذا المثال، يقوم المثال بتطبيق تنسيق معين على الفقرة المشار إليها عبر الرابط، يمكننا أيضاً تطبيق تأثيرات أخرى مثل زيادة حجم العناصر أو تغيير حالة ظهورها واختفائها والعديد غيره. مؤخراً قمت باستخدام هذه التقنية على موقعي الخاص، ضمن الترويسة الرئيسية في الصفحة، حيث أضفت رابط لعملية البحث وعند الضغط عليه يتم إظهار عنصر <div> كطبقة تغطي الصفحة بأكملها (تتراكب فوق محتوياتها) ويظهر ضمنها مربع البحث. <a href="#search">Search</a> <!– ... –> <div id="search"> <a href="#" class="overlay-close">Close</a> <h4>Search articles archive.</h4> <!– ... –> </div> عنصر التراكب <div> (طبقة البحث) بالبداية يكون غير ظاهر وذلك عبر إعطاء خاصية الشفافية opacity القيمة صفر 0، ولكي يبقى هذا العنصر ثابتاً في مكانه نقوم بإعطاء الخاصية position القيمة fixed. كما يجب أن لاتمنع هذه الطبقة المتراكبة عمل باقي المحتويات التي تغطيها ولذلك نعطي الخاصية pointer-events القيمة none. #search-overlay { position: fixed; top: 1em; bottom: 1em; right: 1em; left: 1em; /* ... */ opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; } عند الضغط على أيقونة البحث, يتم تطبيق الخصائص الموجودة ضمن المحدد target: للعنصر المشار إليه، وفي هذا المثال يتم إضهار طبقة البحث التي تغطي الصفحة وفيها مربع البحث، حيث تكون عملية الظهور بشكل انسيابي تدريجي عبر تطبيق الخاصية transition على خاصية الشفافية opacity. #search-overlay:target { opacity: 1; pointer-events: auto; } إلى هنا نكون قد انتهينا من نصف المهمة وهي إظهار طبقة البحث، وبقى لدينا تنفيذ آلية إخفاء هذه الطبقة عندما يرغب المستخدم بذلك. وبالتالي يجب أن تحتوي طبقة البحث على رابط إغلاق يعيد إظهار الصفحة كسابق عهدها، يمكن تطبيق هذا عبر إعطاء معرف ID إلى الوسم body أو html، ومن ثم نحدد هذا المعرف كقيمة للخاصية href التابعة لرابط إغلاق طبقة البحث. يمكن بأسلوب آخر إعطاء القيمة # للخاصية href السابقة ولكن هذا الأسلوب يؤدي إلى إضافة الرمز # على عنوان الصفحة URL. حالما يتم الضغط على رابط الإغلاق، نقوم بتغيير خصائص طبقة البحث لإخفائها عبر إعطاء الخاصية opacity القيمة صفر 0. وهنا أيضاً يمكن تطبيق الخاصية transition على الخاصية opacity وذلك لجعل طبقة البحث تختفي بشكل تدريجي. #search-overlay:target { opacity: 1; pointer-events: auto; transition: opacity .3s ease-in-out; } يمكن تجربة هذا المثال، عموماً يمكن الاستفادة من تأثير الخاصية animation على باقي الخصائص لتطبيقها بشكل متدرج، حيث نستطيع استخدامها لتغير حجم العنصر أثناء انبثاقه للحصول على تأثير الصندوق المنبثق، حيث يظهر في منتصف الصفحة بشكل واضح ومميز مع جعل باقي الصفحة تبدو بألوان باهتة. وبالتالي يمكن تطوير هذا الأمر أكثر للحصول على معرض صور كامل بأسلوب الصندوق المنبثق كما يظهر في هذا المثال (المثال من عمل Manoela Ilic). مقالة أخرى تتحدث عن كيفية عمل معرض صور بأسلوب الصندوق المنبثق وباستخدام المحدد target: من تأليف Christian Heilmann، كما يوجد معارض صور أخرى مطبقة أيضا بواسطة CSS عبر المحدد target:. إلى هنا نأتي إلى نهاية هذه المقالة، أرجو أن تكون قد اتضحت الصورة حول استخدام المحدد selector: مع بعض أشهر التطبيقات التي يتم استخدامه من أجلها. ترجمة -وبتصرّف- للمقال: Using The CSS :target Selector To Create JavaScript-less UI Effects لصاحبته: سارة سويدان.