لوحة المتصدرين

إن الخلاف حول طريقة حساب السّعر بين المستقلين وعملائهم قديم قِدَم المجال نفسه، ويعلو ضجيج هذا الخلاف على ما سواه من المسائل التي يمكن التطرق إليها في العمل الحر، من أخطاء التسعير وصولًا إلى أمر مثل التسويق. ويغلب على المستقلين في هذا الخلاف أن يتخذوا أحد جانبين، فإما أن يقدِّروا أعمالهم حسب عدد الساعات التي قضوها في هذا العمل فيكون أجرهم بالساعة، وإما أن يتفقوا على سعر ثابت للمشروع بالكامل فيكون أجرهم حسب طبيعة المشروع. ونناقش اليوم مناظرة حول هاتين الطريقتين في حساب التّسعير، لم يخلص الطرفان فيها إلى نهايةٍ قاطعةٍ لأحدهم على صاحبه، وإني أود سماع وجهة نظرك أنت أيضًا في الأمر بعد عرض بيِّنة كلِّ فريق وحجته. وسيمثِّل كل جانب من المناظرة أحدَ المستقلِّين البارزين، لنرى نقاط القوة والضعف في هاتين الطريقتين في حساب الأجر في سوق العمل الحر. تحديد سعر لكامل المشروع يطرح توم إيوَر، وهو كاتب مستقلّ ومؤسس لمدونة Leaving Work Behind نقاشًا حول تنظيمك لمعدل أسعارك وفقًا للأجر الثابت لكل عمل أو مشروع، فهو يرى أن قبضك لأجرك على كامل العمل أفضلُ من تأخذ أجرك على عدد الساعات التي عملتها. يقول إيوَر: يبدو بيان إيوَر جريئًا بعض الشيء، لكنه بأي حال يقول إنّ هذا الأسلوب يؤتي أُكلَه معه هو شخصيًا (لاحظ أنه كاتب مستقل يعمل أساسًا على مشاريع تدوين وتخطيط محتوى). فمن منظور توم إيوَر، إذا كنت تستطيع إنهاء عمل قيمته 500 دولار في ساعتين، فهذا يعني أن أجرك في الساعة الواحدة كان 250 دولار، هذا إن كنت تحدد أجرك حسب طبيعة كل مشروع. أما إذا اتبعت نظام الأجر بالساعة، فستجاهد كثيرًا لكي تصل إلى هذا المعدل (250 دولار في الساعة)، خاصة إن كنت لا تزال جديدًا في السوق ولا تملك الكثير من الأعمال التي تستطيع المساومة بها. ثم يحتج إيوَر على سوء نظام الأجر بالساعة بالنسبة حتى للعميل (برغم ما يظهر من خلاف ذلك)، بأنه يشوِّش رؤيتهم لقيمة العمل، كما ترى من كلامه هنا: إني أتفق مع إيوَر في مجمل هذه النقطة الثانية بشأن مدى إدراك العميل لقيمة عملك، وقد رأيت هذا بنفسي حين قيَّمت أحد المقالات التي طلبتها من أحد المُستقلّين، إذ أن أهمية المساومة على قيمة العمل ككل تتعدى أي شيء آخر حقَّا. وإن رجعنا إلى المثال الذي ذكرتُه بالأعلى (إنهاء مشروع قيمته 500 دولار في ساعتين)، فإن العميل سيرفض فكرة دفع 250 دولار في الساعة (ليس كل العملاء، لكن فئة منهم على أي حال). ويجعلك هذا تتساءل كمستقل عن سبب غضبهم إذا كانوا سيحصلون على قيمةٍ -ممثلةٍ في المشروع- ثمنها 500 دولار في كلا الحالتين، فلماذا يغضبون إذًا في حالة تقديم العرض بالصورة الثانية التي ذكرها إيوَر قبل قليل؟ بكلمة أخرى، لماذا يريدونك أن تعمل أكثر إذا كنت تستطيع أن تنهي العمل في وقت أقل؟ هل يستكثرون عليك أجرك؟ إن وجهة نظر توم في هذا الأمر تبين أن العامل المستقل سيستفيد من التسعير الثابت لكل مشروع عبر إنهاء المزيد من المشاريع بسرعة أكبر، في حين أن طريقة الأجر بالساعة ستقيدك وتشغل وقتك أن تعمل على مشاريع جديدة. حالة الأجر بالساعة إن الطرف الذي يمثل هذا الجانب في مناظرتنا هو برينن دون، مؤسس Planscope -برنامج لإدارة المشاريع-، ومؤلف Double Your Freelancing Rate ، وهي دورة لزيادة أرباحك كعامل مستقل، بناءً على ما تطلبه كأجر لك. وهو يرى أن نظام الأجر بالساعة يقدم مزايا لا يمكن لنظام الأجر الثابت أن يقدمها، حيث أن كل ساعة تعملها ستصب مالًا في حسابك البنكي، ويفصل وجهة نظره قائلًا: إن برينن لا يقدم هنا وجهة نظره الشخصية فقط، بل إن هناك أوراقًا بحثية نشرتها مدرسة كيلوج Kellogg، تقول في مجملها أننا سيئون جدًا في توقع أمور مثل معدل إنتاجنا المستقبلي. إذًا، حين قلت لنفسك قبل ثلاثة أسابيع أن هذا المشروع سيستغرق أسبوعين فقط، فإنك بالغت في تقدير كفاءة إنتاجك. بل إن الأهم من ذلك هو أن قوة تحكُّمك بشأن بعض طلبات العملاء الغريبة في منتصف المشروع ستكون أقل بالتأكيد، لأنك فقدت أحد أوراق قوتك في المفاوضة أثناء المشروع على الأجر أو التعديلات أو غير ذلك. لعلك تحظى ببعض العملاء المميزين الذين يريحونك من هذه الطلبات الغريبة، لكن هؤلاء ليسوا قاعدة ولا يقاس عليهم، فإن شخصيات العملاء وتوقعاتهم تختلف في كل مرة. إن معظم المستقلين الذين يتبعون هذا النظام منذ زمن لديهم حتمًا بعض العملاء ذوي الطلبات العجيبة. لهذا السبب تحديدًا فإني أتفق مع برينن عوضًا عن توم إيوَر. من الملاحظ أيضًا أن برينن يستشهد بصناعة مثل تصميم الويب، وهذا ما يجعل نصيحة توم إيوَر مفصّلةً بحيث تناسب عمله في الكتابة فقط. فقد وجدت بسبب عملي في تخطيط المحتوى أن العملاء لا يدققون في التفاصيل إذا كان العمل متعلقا بالتسويق، وإنما يركزون على النتائج، وهذا مفيد لإيوَر حيث أنه كاتب بارع، ولا يقابل الكثير من العملاء الذي يطلبون آلاف التعديلات على ما يكتب، إذ أنهم يركزون على النتائج كما قلت. لكن من الناحية الأخرى، فإن برينن دون يعرف جيدًا حال أناس مثل مصممي الويب، حيث يمكن بسهولة أن يتحول مشروع بسيط إلى جحيم كلما طلب العملاء مزيدًا من المواصفات التي تتجاوز الحد، فيكمل قائلًا: إنني أتفق مع برينن هنا أيضًا، لكن بشكل أقل من النقطة السابقة. إذ أني أشعر أن العملاء يطلبون أكثر من اللازم إذا تعرضوا لمشكلة ما أثناء تنفيذ المشروع (رغم أن ذلك لا يحدث بكثرة)، وبالتالي فإنهم يدفعون المستقل دفعًا إلى قول "هذا خارج نطاق الاتفاق". لكن إذا حدثت مشاكل في فترة تنفيذ المشروع فإن الأمر في الغالب يكون سوءُ تقدير من العميل لحجم المشروع. ماذا عنك أنت؟ لقد اطلعنا الآن على أدلة الفريقين، وقد رأينا بعض النقاشات المقنعة من كلا المعسكرين، وقد حان الوقت لنعرف وجهة نظرك في الأمر. وبما أن تلك المناظرة قد تحمل دائمًا هذين الجانبين المختلفين، فإني لا أملك سوى سؤال واحد لك: ما هو نظام الدفع الذي تفضله كمستقل، نظام الأجر بالساعة أم الأجر المرتبط بالمشروع؟ لعلنا نستفيد من تجربتك في الأمر. ترجمة -وبتصرّف- للمقال (The Great Freelance Debate: Hourly vs. Fixed Rates (Which is Better لصاحبه Gregory Ciotti.

أكاد أجزم أنك سمعت ورأيت تأثير parallax في عالم تصميم وتطوير المواقع، فقد أصبح هذا التأثير أحد أجمل التأثيرات وأكثرها استخدامًا، فهو يعطي للزائر تجربة مميزة وفريدة عندما يقوم بتصفح الموقع نزولًا وصعودًا (scroll up and down). في هذا الدرس سوف نستخدم عدد من إضافات jQuery الجاهزة لإنشاء هذا التأثير. سنقوم في هذا الدرس بإنشاء موقع يحتوي على ستة أقسام، وكل قسم من هذه الأقسام يتمدد على كامل الصفحة، وسوف يحتوي كل قسم على موقع ما ومعلومات مبسطة عن الموقع. تصفح النتيجة النهائية من هنا. تصميم الموقع قبل أن نبدأ بتكويد الموقع يجب علينا تصميمه باستخدام الفوتوشوب. يمكنك في الصورة بالأعلى رؤية محتويات كل قسم من الأقسام الستة، وبما أن تأثير parallex يعمل بشكل أفضل في التصاميم التي تغطي كامل الصفحة فسوف نستخدم صور صغيرة ونستخدمها كنمط متكرر (repeating pattern) في بعض الأقسام والبعض الآخر سوف يحتوي على خلفية بصورة كبيرة. وسوف يحتوي كل قسم على عنوان، شرح، صورة وزر. ابدأ الآن باستخراج جميع الصور التي سوف تحتاجها لتصميم الموقع. وبما أنّ التصميم الذي نعمل عليه سيحتوي على الكثير من الصور فسوف نحاول الحصول على أقل حجم ممكن للصور، فبدلًا من استخدام الصيغة PNG-24 فسوف نستخدم صيغة PNG-8 للحصول على حجم أقل. ذكرنا سابقًا بأننا سوف نستخدم صور صغيرة كنمط متكرر (repeating pattern) في بعض أقسام الموقع وذلك لأن هذه هي أسهلة طريقة للحصول على خلفية جميلة باستخدام صور ذات حجم صغير. أمّا في الأقسام الأخرى من الموقع فسوف نستخدم صور كبيرة كخلفية. حاول أن تضغط الصور لتقليل حجمها ولكن احرص على أن تكون جودتها جيدة بعد ضغطها. قم الآن بوضع كل الصور داخل مجلد ووضع الصور الخاصة بكل قسم في مجلد خاص بها وتسمية المجلدات بأسماء مناسبة. بنية ملف HTMLيمكننا أن نبدأ الآن بتكويد الموقع وسوف نبدأ أولًا بكتابة أكواد HTML. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Sites</title> <link href="style.css" rel="stylesheet" /> </head> <body> <ul class="curtains"> <li> <section id="intro"> <h1>My homes on the web</h1> <p>How’s it going? I'm Chris Spooner. I'm a creative Designer, avid Blogger and I'm generally crazy about pretty colours and shapes.</p> <p>Like most people who spend a lot of time on the Interwebs, […] a portal to all the places you can find my content on the web.</p> <p>Fancy visiting my homes on the net? Here you’ll find info and links to my best stuff.</p> </section> </li> </ul> </body> </html>سوف ننشئ ملف HTML بسيط ونضيف له وسم <ul>، وسوف نستخدم لاحقًا في هذا الدرس إضافة اسمها curtains.js وهذه الإضافة تتطلب أن نعطي العنصر الأب (وسم <ul> في حالتنا هذه) class باسم curtains. لاحظ أيضًا أننا وضعنا جميع العناصر التي سوف تظهر في الصفحة داخل وسم <li>. <li> <section id="spoon"> <h2>Blog.SpoonGraphics</h2> <a href="http://blog.spoongraphics.co.uk" id="spoon-photo"><img src="images/spoon-photo.png" alt="Visit Blog.SpoonGraphics" /></a> <p>Blog.SpoonGraphics is my main design blog, […] head over there and have a browse. </p> <p class="btn"><a href="http://blog.spoongraphics.co.uk">Visit Blog.SpoonGraphics</a></p> </section> </li>قم الآن بإضافة عناصر كل قسم داخل عنصر <li> خاص به (ذكرنا سابقًا أن الموقع سيحتوي على ستة أقسام وبالتالي فسوف نحتاج إلى ستة عناصر من نوع <li>). ستكون إضافة IDs إلى بعض العناصر أمرًا جيدًا لأنّ ذلك سيسهل علينا تحديد تلك العناصر باستخدام jQuery وبالتالي إنشاء التأثير المطلوب. <section id="cs"> <h2>ChrisSpooner.com</h2> <p>I also post random content over on my ChrisSpooner.com personal blog. […] this is the place to go!</p> <ul> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-1.jpg" alt="" /></a></li> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-2.jpg" alt="" /></a></li> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-3.jpg" alt="" /></a></li> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-4.jpg" alt="" /></a></li> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-5.jpg" alt="" /></a></li> <li><a href="http://www.chrisspooner.com"><img src="images/cs-vid-6.jpg" alt="" /></a></li> </ul> </section>كل العناصر التي ترغب بأن تكون جزءًا من التأثير ستحتاج إلى إضافتها على شكل عناصر منفردة بذاتها. فإذا نظرت إلى القسم الخامس ستلاحظ في أسفل الصفحة أن هناك ستة صور لمقاطع فيديو وكل صورة من هذه الصور موجودة في عنصر `<li>` لوحده (أنظر إلى الكود في الأعلى). إضافة تنسيقات CSSيمكننا الآن إضافة تنسيقات CSS إلى الموقع. body { font: 18px/30px Sans-serif; color: #fff; } section { overflow: hidden; height: 993px; }سنبدأ أولًا بإضافة تنسيقات CSS تخص الخطوط (نوع الخط المستعمل وحجمه وهكذا) ليتم تطبيقها على الموقع، وسوف نعطي الخاصية overflow: hidden للعناصر <section> وذلك حتى لا يظهر أي أشرطة تمرير أفقية (horizontal scrollbars) في المتصفح. لاحظ أيضًا أننا أعطينا ارتفاع ثابت بقيمة 993px لجميع عناصر <section> حتى يتساوى ارتفاع جميع الأقسام. #intro { background: #c3c2c1 url(images/intro-bg.jpg) left no-repeat; } #intro h1 { width: 858px; height: 161px; background: url(images/intro-title.png); text-indent: -9999px; position: relative; top: 145px; left: 0; } #intro p { position: relative; top: 200px; left: 350px; width: 508px; margin: 0 0 30px 0; } #intro p:nth-child(2) { font-weight: bold; }لاحظ أننا أعطينا خاصية background لعناصر h1 لاستبدال النصوص بالصور لتتناسب مع تصميم الموقع، كما أننا استعملنا الخصائص `position: relative`، `top` و`left` لموضعة النصوص في أماكنها الصحيحة. #gaming { background: #28323c url(images/gaming-bg.jpg); background-size: cover; } #gaming h2 { width: 740px; height: 324px; background: url(images/gaming-title.png); text-indent: -9999px; position: relative; top: 87px; left: 90px; } #gaming p { position: relative; top: 110px; left: 100px; } #gaming .btn a { display: block; width: 728px; height: 176px; background: url(images/gaming-link.png); text-indent: -9999px; position: relative; top: 70px; }يمكننا القول أنّ هناك تشابه في تنسيقات CSS لجميع العناصر مع وجود بعض الاختلافات في أماكن وجود العناصر. ففي الأقسام السابقة استعملنا صورة خلفية مكررة، أمّا في الأقسام التالية فقد استعملنا صورة خلفية كبيرة واستخدمنا أيضًا الخاصية `background-size: cover` حتى نجعل الخلفية تتجاوب مع الأبعاد المختلفة للمتصفحات. cs ul li { float: left; box-shadow: 0 0 20px rgba(0,0,0,0.5); line-height: 0; position: absolute; list-style: none; } #cs ul li:nth-child(1) { top: 640px; left: 100px; transform: rotate(10deg); -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); z-index: 1; } #cs ul li:nth-child(2) { top: 600px; left: 420px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); z-index: 3; } #cs ul li:nth-child(3) { top: 680px; left: 570px; transform: rotate(-2deg); -moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); z-index: 2; }بالنسبة لصور مقاطع الفيديو الموجودة في القسم الخامس، فقد قمنا باستخدام ()transform: rotate وz-index حتى نُظهرها بالشكل الذي تراه. كما أننا استعملنا المحدد ()nth-child: لتسهيل عميلة تحديد العناصر المتتابعة من دون الحاجة إلى إعطاء class لكل عنصر. انتهينا الآن من إضافة تنسيقات CSS وبقي علينا استخدام إضافات jQuery ليعمل كل شيء كما هو مطلوب. إضافة بعض أكواد jQueryحتى نحصل على التأثير المطلوب فإننا سنقوم باستخدام إضافتين جاهزتين وهما Curtain.js وScrollorama. <link href="js/curtain.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="js/curtain.js"></script> <script src="js/jquery.scrollorama.js"></script> <script src="js/scripts.js"></script>سنحتاج في البداية إلى ربط مكتبة jQuery وهاتين الإضافتين بملف HTML الخاص بالموقع. قم بتحميل الإضافتين ووضعهما داخل وسم `<script>`، قم أيضًا بإنشاء ملف باسم scripts.js وقم بوضعه داخل وسم `<script>` لأننا سنحتاج هذا الملف في إضافة التأثيرات الخاصة بالإضافتين. لا تنسى أيضًا إضافة تنسيقات CSS التي تأتي مع إضافة Curtain.js. $(document).ready(function(){ $('.curtains').curtain(); });أول سطر برمجي عليك أن تضعه في ملف scripts.js هو المسؤول عن تشغيل إضافة Curtain.js. سنقوم بتحديد العنصر curtains. (وهو نفس الوسم `<ul>` الذي أضفناه في ملف HTML). ستقوم عندها الإضافة بإظهار القسم المناسب عندما يقوم المستخدم بالتمرير إلى أسفل الصفحة (scroll down). $(document).ready(function(){ $('.curtains').curtain(); var scrollorama = $.scrollorama({ blocks:'.curtains' }); scrollorama.animate('#intro h1',{ duration:200, property:'left', end:-860 }); });وبالنسبة للإضافة الثانية (Scrollorama)، فإنها توفر تأثيرات تمرير أكثر. تحتاج اولًا إلى تطبيق الإضافة على نفس العنصر كما فعلنا مع الإضافة السابقة، يمكنك بعد ذلك أن تستخدمها لإنشاء تأثيرات التمرير لكل عنصر على حدة. وأول هذه العناصر هو `#intro h1`، بحيث نختار الخاصية التي نريدها (`left` في هذه الحالة) ومن ثم تغيير قيمة بداية أو نهاية التأثير الحركي. لاحظ أننا قمنا بإزاحة العنوان (h1) بقيمة 890 pixels إلى اليسار عند التمرير بمقدار 200 pixels. scrollorama.animate('#spoon-photo',{ delay:993, duration:993, property:'top', start:100, end:-300 });المثال التالي يخص القسم الثاني من الموقع وبالأخص الصورة الموجودة على اليمين، بحيث نقوم بتحديد هذه الصورة وتحركيها بشكل مستقل عن محتوى الصفحة مما يخلق تأثير parallax جميل. وحتى نضمن أن التأثير لن يبدأ إلا عندما يصل الزائر إلى القسم الثاني فسوف نقوم بتأخير العملية بمقدار 993 pixles وهو الارتفاع الخاص بكل قسم، وبهذا فإن التأثير سوف يبدأ عندما يختفي القسم الأول بالكامل. scrollorama.animate('#line25-photo',{ delay:993, duration:1986, property:'rotate', start:-10, end:10 }); scrollorama.animate('#gaming .btn',{ delay:2000, duration:993, property:'left', start:-800, easing:'easeOutBounce' });أي خاصية CSS ذات قيمة عددية يمكن إعطاؤها تأثيرات حركية. ففي هذين المثال تمّ تدوير الصورة الموجودة في القسم الثالث وتحريك الزر الموجود في القسم الرابع. بالنسبة لقيمة `duration: 1986` فهي ضعف الارتفاع الخاص بالاقسام (993px) ولقد استخدمت حتى يعمل التأثير الحركي حتى بعد أن يختفي القسم الثالث عن الأنظار، بينما استعملنا القيمة `duration: 993` لأننا نريد أن يتوقف التأثير عندما يختفي القسم الرابع عن الأنظار ويبدأ القسم الخامس. scrollorama.animate('#cs ul li:nth-child(1)',{ delay:2979, duration:993, property:'top', start:840, end: 640 }); scrollorama.animate('#cs ul li:nth-child(2)',{ delay:2979, duration:993, property:'top', start:800, end: 640 }); scrollorama.animate('#cs ul li:nth-child(3)',{ delay:2979, duration:993, property:'top', start:920, end: 580 }); scrollorama.animate('#cs ul li:nth-child(4)',{ delay:2979, duration:993, property:'top', start:880, end: 620 }); scrollorama.animate('#cs ul li:nth-child(5)',{ delay:2979, duration:993, property:'top', start:830, end: 660 }); scrollorama.animate('#cs ul li:nth-child(6)',{ delay:2979, duration:993, property:'top', start:960, end: 600 });قمنا بإعطاء جميع صور الفيديو في القسم الخامس تأثيرًا حركيًا للخاصية `top` وبتأخير (delay) مقداره 2979px (3*993=2979 وهو ارتفاع ثلاثة أقسام لأننا نحتاج إلى تمرير ثلاثة أقسام قبل أن يظهر هذا القسم). ومع استعمال قيم `start` و`end` مختلفة يمكننا إنشاء تأثير parallax جميل بحيث تتحرك بعض الصور أسرع من الأخرى، وكل هذا يحدث في حين تقوم إضافة Curtain.js بإظهار القسم. جعل الموقع يعمل عندما تكون الجافاسكربت معطلةإذا كنت تريد أن يعمل الموقع في حالة وجود الجافاسكربت معطل فإنك سوف تحتاج إلى الدخول على ملف curtain.css والبحث عن السطر التالي: .curtains > li{ position: fixed; }واجعله كالتالي: .curtains > li{ /*position: fixed;*/ }سوف يسمح هذا للموقع أن يعمل حتى لو كان الجافاسكربت معطل. وبما أنّ غالبية الزوار لديهم الجافاسكربت مفعّل، فسوف تحتاج إلى الكود التالي حتى نستعيد التأثير لهؤلاء الزوار: $('.curtains>li').css('position', 'fixed'); خاتمةكما رأيت فتصميم موقع بتأثيرات scrolling وparallax ليس بالأمر الصعب، فيمكن لإضافة Curtain.js لوحدها أن تعطينا تأثيرًا جميلًا ولكن إضافة التأثيرات الحركية واستخدام إضافة Scrollorama جعل الأمر أكثر جمالًا. تصفّح النتيجة النهائية من هنا. ترجمة -وبتصرّف- للمقال Create a Cool Website with Fancy Scrolling Effects لصاحبه Iggy. حقوق الصورة البارزة: Designed by Freepik.

إنّ مواضيع التصاميم المتعلقة بمشاهد من الفضاء الخارجي شائعة جدًّا، فهي مليئة بالألوان ونابضة بالحياة، وهذه مكونات أساسية لتصميم رائع. دعونا نتوه في الفضاء وننشئ تصميمًا لملصق كوني تجريدي باستخدام أنماط المزج ودمج الخامات والفراشي في برنامج الفوتوشوب. افتح برنامج الفوتوشوب وأنشئ ملفًّا جديدًا. قد ترغب في تحديد حجم ملصق للطباعة بناءً على أفكارك الخاصة ولكنني سأستخدم دقة 72dpi للاستخدام على الشاشة وليس للطباعة. لوّن الخلفية بالرمادي الداكن. اختر صورتين لبعض الغيوم الدخانية مثل هذه الصور من موقع Shutterstock 1 2. ألصق الصورتين داخل المستند وضعهما مائلتين بشكل قطري عبر التصميم. غيّر خصائص المزج إلى Screen وخفّف التعتيم Opacity إلى 15%. قم برسم ثلاث بقع كبيرة ملونة بألوان زاهية باستخدام فرشاة كبيرة ناعمة على طبقة جديدة. إن ألوان الوردي، الفيروزي والأرجواني ستعمل بشكل جيد معًا. غيّر خصائص مزج طبقة الألوان إلى Overlay للسماح للألوان بالتفاعل مع الخامات التي تحتها. قم بإعادة ألوان حامل الألوان الأساسي إلى الألوان الأساسية الأبيض والأسود على طبقة جديدة بالضغط على مفتاح D. ثم اذهب إلى القائمة: Filter > Render > Clouds غيّر خصائص مزج هذه الطبقة إلى Overlay وخفّف مستوى التعتيم Opacity إلى 65%. لوّن الطبقة الجديدة بالأسود ثم اذهب إلى القائمة: Filter > Noise > Add Noise ضع قيمة Amount عند 10% مع تحديد الخيار Gaussian وتفعيل ميزة Monochromatic. غيّر خصائص مزج هذه الطبقة إلى Screen واضبط المستويات Levels التي تظهر عبر الضغط على CMD+L النقاط البيضاء والسوداء لإنشاء حقل من النجوم المشعة. أنشئ قناعًا للطبقة وارسم مناطق باستخدام فرشاة كبيرة ناعمة لإظهار التباين على كثافتها ما يجعل بعض النجوم أكثر إشراقًا من غيرها. حمّل هذه المجموعة المفيدة من فراشي النجوم ثم نصّبها ضمن برنامج الفوتوشوب كما يلي. اخترت فرشاة نجمة من المجموعة وصغّر الحجم واضبط المسافة عند 1000%. وضمن قائمة الأشكال الديناميكية Shape Dynamics اجعل حجم Jitter كاملًا وخفّف القطر Diameter إلى 0%. وضمن قائمة الانتشار Scattering اجعل الانتشار Scatter كاملًا. ارسم العديد من النجوم المتنوعة لملء مشهد الفضاء واضبط حجم الفرشاة بين الحدود للحصول على مجموعة واسعة من الأحجام. أضف ضمن أنماط الطبقة لطبقة النجوم نمط التوهج الخارجي Outer Glow باللون الأزرق الفاتح ثم أضف قناعًا للطبقة لضبط كثافة النجوم. استخدم أداة كتابة النص لكتابة نمط تيبوغرافي بسيط. أنا استخدمت عبارة Chemical Imbalance. واستخدمت خط fat slab-serif ضمن مجموعة خطوط Geometric Slab-Serif. الهدف هو إبراز الشدة والقوة والتعبير الواضح. أضف قناعًا لطبقة النص ثم اذهب إلى القائمة: Filter > Render > Clouds لمسح مساحات عشوائية من النص. ضاعف الطبقة ثم أضف تمويهًا ضبابيًّا Gaussian Blur بقيمة 6px. غيّر خصائص المزج إلى Overlay. أضف تأثير غيوم آخر إلى قناع لهذه الطبقة لمسح مساحات مختلفة من النص. استخدم فرشاة ناعمة عادية لمسح مساحات محدّدة يدويًّا من طبقات النص. على طبقة جديدة، ارسم مجموعة من البقع البيضاء باستخدام أداة الفرشاة. غيّر خصائص المزج إلى Overlay لمنحها تأثيرًا حادًّا. استمر في رسم المزيد من الألوان، هذه المرة بعض البقع الصفراء حول النص. أضف قناعًا لطبقة البقع الصفراء ثم أضف تأثير الغيوم لمنحها مظهر خامة جميلة. غيّر خصائص المزج إلى Color Dodge لدمج بقع الألوان مع التصميم لتظهر نابضة بالحياة. ارسم بقعة وردية وغيّر خصائص المزج إلى Dissolve. أضف تمويهًا قطريًّا Radial Blur لنحو 60% مستخدمًا أداوت التكبير. أدمج هذه البقعة الوردية مع طبقة جديدة فارغة بالضغط على CMD+E لجعل خصائص المزج تعود إلى الوضع الطبيعي Normal ثم غيّرها إلى Color Dodge. غيّر التعتيم Opacity إلى 60% لتخفيف التأثير. على طبقة جديدة ارسم بقعة بيضاء باستخدام فرشاة ناعمة. استخدم أداة التحديد لحذف نصف دائرة البقعة. اضغط CMD+T لتحويل شكل نصف الدائرة ثم مدّد واضغط الشكل حتى يبدو كالضوء. دوّره بزاوية 45 درجة (مع الضغط على Shift) ثم حرّكه داخل التصميم. اضغط على مفتاح Alt لسحب نسخ من الشكل إلى أماكن متنوعة ضمن التصميم. داخل بين بعض هذه الأشكال لمنحها انطباع الأشعة عبر كامل التصميم. غيّر خصائص المزج إلى Overlay للسماح للون الأبيض بالتفاعل مع بقية الألوان. تفحّص التصميم بشكل عام، وقم ببعض التعديلات على التعتيم للطبقات وغيرها من التعديلات لجعل التصميم أكثر روعة. ترجمة -وبتصرّف- للمقال: Create a Trendy Galactic Poster Design in Photoshop لصاحبه: Chris Spooner.

قبل عدة سنوات لم يكن من الممكن إنشاء قائمة منسدلة بدون الاستعانة بالجافاسكربت، أمّا الآن فيمكننا وبمساعدة بعض الخصائص والمُحدّدات (selectors) المتقدمة الخاصة بلغة CSS3 القيام بذلك وبكل سهولة. فإذا أردت إنشاء قائمة منسدلة خاصة بك فعليك بتتبع هذا الدرس. سوف تحتوي القائمة التي سنقوم بإنشائها على قائمتين فرعيتين تظهران عندما يقوم المستخدم بوضع مؤشر الفأرة (hover) فوق الرابط/العنصر الأب (parent link). ألقِ نظرة على ما سنقوم بإنشائه في هذا الدرس. هيكلة ملف HTMLسنقوم في البداية بإنشاء ملف HTML يحتوي على الوسوم (tags) الخاصة بالقائمة. سوف نستعمل وسم <nav> الذي ظهر في HTML5، ثم نضيف روابط القائمة الرئيسية داخل وسم <ul>. <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Inspiration</a></li> </ul> </nav>بعد ذلك سوف نضيف القوائم الفرعية (قوائم فرعية درجة أولى) أسفل رابطي "Tutorials" و"Articles"، وكل واحدة من هاتين القائمتين ستكون عبارة عن وسم <ul> موجود داخل وسم <li>. أنظر الشفرة البرمجية في الأعلى. <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>أمّا روابط القائمة الفرعية الثانية (قائمة فرعية درجة ثانية) فسوف تكون موجودة داخل الخيار "Web Design" من القائمة الفرعية الأولى ذات الدرجة الأولى. أي أنّ هذه الروابط ستكون موجودة داخل وسم <ul> وهذا الوسم سيكون موجودًا داخل الوسم: <li><a href="#">Web Design</a></li> (يمكنك النظر إلى الشفرة البرمجية التالية حتى تتوضح الصورة بشكل أفضل). <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav> لقد حصلنا إلى الآن على قائمة منسدلة بقوائم فرعية واضحة المعالم وسنقوم في الخطوة التالية بإضافة تنسيقات CSS. إضافة تنسيقات CSSلنبدأ الآن بإضافة بعض تنسيقات CSS الأساسية لنجعل القائمة المنسدلة تعمل. يمكننا باستخدام بعض المحددات المتقدمة أن نستهدف عناصر موجودة بشكل عميق داخل بنية HTML من دون استعمال أي ids أو classes، ففي البداية سنقوم بإخفاء العناصر الفرعية وذلك عن طريق استخدام الخاصية display:none على عناصر <ul> الموجودة داخل عناصر <ul> أخرى. وحتى نجعل هذه القوائم تظهر مرة أخرى عند وضع مؤشر الفأرة فوقها فإننا سنحتاج إلى إضافة الخاصية display: block. وبالنسبة للمحدد > فسوف نستخدمه حتى نتأكد بأنّ يظهر فقط العنصر الإبن <ul> الموجود داخل <li> الذي وضع فوقه مؤشر الفأرة بدلًا من أن تظهر جميع القوائم الفرعية بنفس اللحظة وهو ما لا نريده بكل تأكيد. nav ul ul { display: none; } nav ul li:hover > ul { display: block; }يمكننا الآن تنسيق القائمة الرئيسية وذلك باستخدام بعض خصائص CSS3 مثل gradients ،box shadows وborder-radius. استخدمنا position:relative حتى نتمكن من موضعة القوائم الفرعية بالنسبة للقائمة الرئيسية (بعبارة أخرى، حتى نستطيع إعطاء الخاصية position: absloute للقوائم الفرعية)، واستخدمنا الخاصية display: inline-table حتى نمنع القائمة من التمدد على كامل الصفحة. أمّا بالنسبة للسطرين الأخيرين في الكود الموجود في الأعلى فهذا ما يسمى Clearfix وهو يستخدم لحل مشكلة الـfloats الشائعة وحتى لا نضطر إلى استعمال overflow: hidden لأن ذلك سيؤدي إلى إخفاء القوائم الفرعية ويمنعها من الظهور. nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } قمنا بعد ذلك بتنسيق عناصر القائمة <li> وما تحتويه من عناصر <a>. وعندما يقوم المستخدم بوضع مؤشر الفأرة فوق العنصر سيتحول لون الخلفية إلى إحدى تدرجات اللون الأزرق وسوف يتغير لون الخط إلى الأبيض. nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } أصبحت القائمة الرئيسية جاهزة الآن ولكن القوائم الفرعية تحتاج إلى بعض العمل الإضافي، فبعض التنسيقات في عناصر القوائم الفرعية سوف ترث تنسيقات العنصر الأب، لذلك سوف نحتاج إلى تغيير لون الخلفية (background) وإزالة border-radius وتعديل قيم padding حتى يظهر كل شيء بأفضل شكل. وحتى نضمن أن تظهر هذه القوائم أسفل القائمة الرئيسية فقد استعملنا الخاصيتين position: absolute و top: 100%. إنّ عناصر <li> الموجودة داخل <ul> في القوائم الفرعية لن تحتاج إلى أن تكون بجانب بعضها بشكل أفقي (أي لن نحتاج إلى استعمال خاصية float) وإنما ستكون فوق بعضها البعض بشكل عمودي مع وجود حدود (borders) صغيرة تفصل بينها. وفي الأخير هناك تأثير hover الذي سوف يُغيّر لون الخلفية إلى شيء أدكن. nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } نأتي الآن للخطوة الأخيرة وهي موضعة القوائم الفرعية من الدرجة الثانية. سوف ترث هذه القوائم التنسيقات الخاصة بالقائمة الفرعية من الدرجة الأولى وبذلك فكل ما سنحتاجه هو موضعة هذه القوائم باستخدام position: absolute و left: 100% نسبة إلى العنصر الأب <li> الذي يحتوي على الخاصية position: relative. nav ul ul ul { position: absolute; left: 100%; top:0; } وإلى هنا نصل إلى نهاية هذا الدرس ونكون قد حصلنا على قائمة منسدلة جميلة وأنيقة. يمكنك تصفح النتيجة النهائية من هنا. ترجمة -وبتصرف- للمقال How To Create a Pure CSS Dropdown Menu لصاحبه Iggy.