تحدي 10 لكن تقنيات CSS رهيبة

() translation by (you can also view the original English article)

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

في هذا المنصب نحن ذاهبون إلى مخطط 10 تقنيات CSS رهيبة لمطوري الويب الذين يعرفون هذه الأشياء.

هناك الكثير من تقنيات CSS والمأجورون هناك لتبدأ المصممين. يعرف الجميع عن الحيل الروتينية مثل:

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

1-التركيز وعدم وضوح عناصر القائمة

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

في جوهر هذا التأثير هو التمديد بسيط ، وذلك باستخدام صورة لكل من الروابط. تبلغ كل صورة 600 بكسل ، مع 3 حالات مختلفة: ثابتة ونشطة وملفوفة.

صورة مثال في عنصر القائمة

سيؤدي هذا إلى جعل كل زر تنقل 200 بكسل عريضًا ، بحيث عندما يتم تدوير زر ما ، سيزول كل عنصر تنقل آخر -200 بكسل لتغيير صورة الخلفية. إنه تأثير أنيق مختلف تمامًا عن معظم قوائم التنقل القائمة على التمرير.

2-توضح القائمة الانقلاب

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

يحتوي WebDesignerWall على برنامج تعليمي ممتاز لا يعرض لك فقط كيفية إضافة الحركة إلى التنقل ، ولكن أيضًا كيفية إنشاء نظام التنقل بأكمله في Photoshop. المنتج النهائي هو نظام ملاحة مليء بالحيوية والنشاط ، مما يجعل التصميم أكثر جاذبية وجاذبية. لا يعمل الجزء الصعب المتعلق باتباع المثال مع CSS ، ولكن إجراء التغييرات في Photoshop لظهور عمليات التمرير مترابطة.

3-المتقدم بتعديل أسلوب الطباعة مع CSS

في بعض الأحيان يتم التغاضي عن الطباعة في CSS. ومع ذلك، يمكنك القيام به الكثير من الأمور الإبداعية للنص فقط عن طريق إضافة بعض المغلق. على سبيل المثال:

تأملات

يمكنك تخطي جافا سكريبت والانتقال مباشرة إلى CSS لعمل انعكاسات داخل النص. من المؤكد أنه لا يبدو أنيقًا تمامًا مثل حل جافا سكريبت ، ولكن من المحتمل أن يكون لطيفًا جدًا.

عناوين المتدفقة

يمكنك إنشاء عناوين أنيقة تتدفق معًا باستخدام تباعد منخفض للحرف الأول داخل الامتداد. ملاحظة: ليست كل مجموعات الأحرف تبدو رائعة.

إسقاط الأحرف

يمكنك حتى إنشاء إسقاط الأحرف (انظر "g"؟) بالاستفادة من ارتفاع خط منخفض وحد السفلي.

يمكنك رؤية العديد من تقنيات CSS المتقدمة الأخرى للنص في مدونة 3.7Crea.tv.

4-بشكل حيوي وأبرز الأعمدة في الجداول

Crazy Egg لديه تصميم بديهي بشكل لا يصدق لصفحة الاشتراك الخاصة بهم. بدلاً من جعل المستخدم ينقر على صفحة أخرى لبدء عملية الاشتراك ، يستخدم Crazy Egg CSS ولمسة javascript لجعل عمود الجدول ينزلق بشكل أنيق إلى اليسار بينما يظهر نموذج الاشتراك بدلاً من الأعمدة الأخرى. سهل للغاية إذا كنت تريد من الزائر بدء عملية الاشتراك على الفور ، وكل ذلك في مساحة صغيرة جدًا.

بينما الجداول هي أن مصممي الحديثة مثل عادة لتجنب شيء، يمكن أن تكون مثالية لتنظيم الكثير من البيانات. جداول التسعير مكان عظيم الاستفادة من الجداول، وجعلها أكثر إثارة للاهتمام يساعد بالتأكيد تجربة المستخدم.

اطلب من شخص CSS لديه برنامج تعليمي ممتاز يكرر الرمز ، مع مثال حي ومصدر قابل للتنزيل.

5-ديناميكية المتغيرات في CSS

CSS ليست حقا قوية من لغة في حد ذاتها. بالتأكيد ، يمكنك القيام بأطنان من الحيل الرائعة معها ، ولكنها لا تزال فقط لغة الأسلوبية. لا يمكنك تخزين المتغيرات أو القيام بأشياء أخرى يمكن أن تقوم بها اللغات الديناميكية مثل PHP. ومع ذلك ، يمكنك استخدام اللغات الديناميكية لإخراج CSS ، مما يمنحها متغيرات ديناميكية.

باستخدام الدالة header() في بي، من الممكن أن يكون بي إتش بي طباعة المغلق. يمكنك استخدام صفائف مختلفة لإظهار أجزاء مختلفة من أنماط CSS. على سبيل المثال، هنا نظام ألوان افتراضي في CSS، الإخراج في بي إتش بي:

$persistent = array(
'bgmast' => 'bbd9ee',
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',
'fgmenu' => '444',
'bgcont' => 'fff',
'fgcont' => '444' );

وهنا نظام ألوان بديلة:

$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
);

إذا أردت إظهار مخطط لون بديل فسيكون ببساطة التبديل بين $persistent و $alternate1 لمبادلة الأنماط.

تحقق من البرنامج التعليمي الكامل في Digital Web Magazine للحصول على شرح أكثر تفصيلاً لتبديل النمط الديناميكي باستخدام CSS و PHP.

6-اقتباسات مع CSS

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

مانولي

يمكن للمصمم يدويًا إنشاء قسم إضافي يبدو كالتالي:

1	<div class="quote">
2	This is the quoted text, floated right with some padding.
3	</div>

بأسلوب يشبه:

1	.quote {
2	float:right;
3	padding-left:15px;
4	....

مع أي أنماط أخرى قد تكون مطلوبة. إن إنشاء قسم إضافي بشكل يدوي ليس فكرة رائعة لأنه يستغرق وقتًا أطول ويضيف محتوى مكررًا إلى المصدر.

جافا سكريبت

يمكنك أيضًا استخدام جافا سكريبت لسحب علامات الاقتباس من النص. على الرغم من أن هذا يحل مشكلة المحتوى المكررة ولا يتطلب منك قسمة div أخرى ، فلا يزال يتعين عليك تضمين جزء صغير من javascript.

وقد ديسيجنميمي تعليمي ممتاز على كيفية سحب عروض الأسعار إلا قليلاً من 2 المغلق والمغلق باستخدام: قبل العنصر الزائفة لإظهار عرض أسعار.

<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’</p>

هنا هي فئة pullquote:

.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}

جنبا إلى جنب مع: قبل طبقة زائفة:


.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}

الآن في كل مرة يكون لديك فقرة مع "اقتباس" الفئة ، سيظهر أي نص تضعه في سمة العنوان في مربع اقتباس (مع علامات اقتباس متعرجة).

يمكنك أن تقرأ بقية دروس اقتباسات سحب المغلق ممتازة في ديسيجنميمي.

7-تغيير الأنماط التي تستند إلى الوقت من اليوم

تغيير مظهر موقع الويب الخاص بك يستند إلى الوقت من اليوم ليس فقط متعة طريقة لإضافة عمق للتصميم الخاص بك، كما أنها وسيلة لتخصيص تجربة الزائر. وحتى الآن هناك طريقتين لتحقيق ذلك مع CSS: جافا سكريبت أو بي (أو بعض اللغة الحيوية الأخرى).

كلا النهجين أساسا تفعل الشيء نفسه، مع بعض الاختلافات الصغيرة. باستخدام javascript يمكنك استخدام الوقت للزائر لعرض ورقة الأنماط المناسبة. (إذا كنت ترغب في استخدام وقت الخادم الخاص بك، استخدم إصدار بي إتش بي).

إليك شفرة جافا سكريبت من katgal التي تغير ورقة الأنماط كل 3-4 ساعات ، استنادًا إلى وقت المستخدم.


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

باستخدام هذا الأسلوب يمكنك إظهار الأنماط المختلفة

من 05:00 ص إلى 08:00 ص
من 08:00 ص إلى 12:00 م
من 12:00 م إلى 03:00 م
من 03:00 م إلى 06:00 م
من 06:00 م إلى 09:00 م
من 09:00 م إلى 05:00 ص

8. تغيير أنماط CSS استنادًا إلى الطقس

إن تغيير مظهر موقعك على الويب استنادًا إلى الوقت من اليوم هو الفول السوداني مقارنةً بالقدرة على تغيير مظهر موقعك استنادًا إلى الطقس. يحتوي CSS-Tricks على برنامج تعليمي مذهل يوضح كيفية تشكيل تصميم استنادًا إلى الظروف الجوية الحالية من Yahoo! طقس.

باستخدام قليلاً من الخداع CSS و PHP، يظهر البرنامج التعليمي كيفية تبديل فئات تخطيط يستند إلى الطقس. فقط قم بإنشاء نمط (سبيل المثال يظهر صورة رأس) الذي يرتبط بالظروف الجوية المناسبة. فإنه يستخدم ورقة أنماط مثل هذا

.header {
width: 782px; height: 150px;
/* DEFAULTS TO SUNNY */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}

وبمجرد أن تسحب حالة الطقس عبر PHP / XMl. يستخدم هذا المقتطف من PHP في التخطيط لإظهار درجة الطقس المناسبة.

1	<div class="header header-<?php echo $weather_class; ?>">
2	</div>

9. طباعة صفحة الكمال مع CSS

هناك ميزة تم تجاهلها على الموقع الإلكتروني وهي رابط "اطبع هذه المقالة". هناك العديد من الناس الذين يستخدمون الإنترنت الذين لا يزالون يرغبون في طباعة المقالات المفيدة وتخزينها في شكل ورقي. من أجل إزالة هذا ، تحتاج إلى استخدام فواصل صفحات CSS / XHTML.

ديفيد وولش قد بعض التعليمات البرمجية ممتاز يوضح المغلق ما هو مطلوب لجعل فواصل الصفحات الفعلية في طباعة الصفحات.

@media all
{
.page-break    { display:none; }
}

@media print
{
.page-break    { display:block; page-break-before:always; }
}

ثم استخدم الرمز ، فقط أضف<div class="page-break"></div> تقسيم الصفحة ، مثل:

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

ديفيد يعطي أيضا بعض أمثلة رائعة من الأماكن لإضافة فواصل الطباعة في الصفحة.

بين أقسام صفحة (h2 أو h3 العلامات، اعتماداً على تنسيق الموقع الخاص بك)
بين نهاية مقالة وتعليقات لاحقة/تركبكس
بين كتل يحن للمحتوى

ذات الصلة

راجع بعض مقالات ديفيد حول كيفية جعل موقعك أكثر ملاءمة للطابعة.

10. CSS شريط الرسومات البيانية

تعمل الرسوم البيانية الشريطية على إنشاء مجموعة مرئية رائعة لمجموعة من الإحصاءات المملة. وجد Apple to Oranges طريقة لعرض الرسوم البيانية الشريطية بدقة باستخدام CSS فقط. إنه حل أنيق لما قد يتعين عليه خلاف ذلك أو ضمه بجافا سكريبت.

الفكرة الأساسية وراء البرنامج التعليمي أن تقوم بإنشاء فئة مثل.graph

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

وعرضها على الصفحة كالتالي:

1	<div class="graph">
2	<strong class="bar" style="width: 24%;">24%</strong>
3	</div>

قطعة فقط "السوائل" على سبيل المثال هو إضافة النمط = "24%" لبيان <strong>. أي نسبة مئوية لأن قد أظهرت بشكل صحيح الرسم البياني السليم. بسيطة وأنيقة.</strong>

هناك العديد من الأمثلة الأكثر تعقيدًا لإنشاء الرسوم البيانية الشريطية من CSS في مدونة Apple إلى Oranges ، إذا كنت تشعر بالمغامرة.

الاشتراك في موجز ويب ل RSS NETTUTS لمزيد من دروس تطوير ويب اليومية والمقالات.

غلين ستانسبيري هو مطور ويب ومدون عانى أكثر من مرة مما يريد أن يعترف به مع CSS. يمكنك قراءة المزيد من النصائح حول تطوير الويب على مدونته Web Jackalope.