() translation by (you can also view the original English article)
في هذا البرنامج التعليمي، سوف تتعلم كيفية بناء صفحة دعابة باستخدام فقط CSS، بدون صور أو حتى تصميم فوتوشوب. العديد من مواقع الويب و التطبيقات المتطورة تكسب دعاية كبيرة من صفحات الدعابة، لذلك هذا يعتبر مفهوم مفيد حتى تضيفه إلى اهتماماتك .استخدمه التطبيق او موقع شبكة الإنترنت الذي يحضر للانطلاق
الخطوة 1: علامة HTML
ال HTML لصفحة الدعابة بسيط للغاية. ولدينا حاوية بالنص الاستهلالي والمدخلات.
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>App is coming soon.</title> |
12 |
|
13 |
<!-- Mobile -->
|
14 |
|
15 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
16 |
|
17 |
<!-- CSS -->
|
18 |
|
19 |
<link rel="stylesheet" href="css/reset.css"> |
20 |
<link rel="stylesheet" href="css/animate.css"> |
21 |
<link rel="stylesheet" href="css/styles.css"> |
22 |
|
23 |
</head>
|
24 |
|
25 |
<!-- Main HTML -->
|
26 |
|
27 |
<body>
|
28 |
|
29 |
<!-- Begin Page Content -->
|
30 |
|
31 |
<div id="container"> |
32 |
|
33 |
<h1>App.</h1> |
34 |
|
35 |
<p>
|
36 |
This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a> |
37 |
</p>
|
38 |
|
39 |
<div id="subscribe"> |
40 |
|
41 |
<input type="email" placeholder="email address"> |
42 |
|
43 |
<input type="submit" value="submit"> |
44 |
|
45 |
</div>
|
46 |
|
47 |
</div>
|
48 |
|
49 |
|
50 |
<!-- End Page Content -->
|
51 |
|
52 |
</body>
|
53 |
|
54 |
</html>
|
الخطوة 2: تحديد المواقع و الحجوم لعناصرنا
دعونا نعطي صفحتنا بعض البناء . نبدء مع الأساسيات، ونضع الحاوية في وسط الصفحة. سوف نستخدم 50 ٪، والهوامش السلبية ل نرجع الهدف لنصف عرضه و طوله
1 |
|
2 |
|
3 |
html, body { |
4 |
width: 100%; |
5 |
height: 100%; |
6 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
7 |
color: #444; |
8 |
-webkit-font-smoothing: antialiased; |
9 |
}
|
10 |
|
11 |
|
12 |
}
|
13 |
|
14 |
#container { |
15 |
position: fixed; |
16 |
width: 500px; |
17 |
height: 300px; |
18 |
top: 50%; |
19 |
left: 50%; |
20 |
margin-top: -150px; |
21 |
margin-left: -250px; |
22 |
text-align: center; |
23 |
}
|
التالي ، نضع النص والمدخلات بمواقعها، باستخدام (محددات السمات ) لاستهداف البريد الإلكتروني وتقديم المدخلات بشكل منفصل.
1 |
|
2 |
|
3 |
h1 { |
4 |
font-size: 90px; |
5 |
}
|
6 |
|
7 |
p { |
8 |
width: 80%; |
9 |
font-size: 23px; |
10 |
line-height: 1.3em; |
11 |
margin: 1.1em auto; |
12 |
text-align: center; |
13 |
}
|
14 |
|
15 |
#subscribe { |
16 |
margin: 0 auto; |
17 |
text-align: center; |
18 |
}
|
19 |
|
20 |
input[type=email] { |
21 |
width: 90%; |
22 |
padding: 15px; |
23 |
margin: 0 auto; |
24 |
}
|
25 |
|
26 |
input[type=submit] { |
27 |
position: absolute; |
28 |
margin-left: -105px; |
29 |
margin-top: 5px; |
30 |
padding: 10px; |
31 |
width: 100px; |
32 |
height: 50px; |
33 |
}
|
الخطوة 3: تصميم النص
تصميم النص لهذه الصفحة بسيط جداً. نريد الاسم ان ينعكس مع الخلفية، لذا سنجعله ابيض النص مهم، ولكن نريد الزائرين يتذكرو اسم منتجنا ،لذا لن نجعله كما يلفظ ، يتم الرابط لتويتر سنضع تحته خط، للإشارة إلى انه رابط .
أولاً، النص الأساسي:
1 |
|
2 |
h1 { |
3 |
font-size: 90px; |
4 |
font-weight: bold; |
5 |
color: #fff; |
6 |
text-shadow: 0 1px 4px #000; |
7 |
margin-top: 20px; |
8 |
}
|
9 |
|
10 |
p { |
11 |
width: 80%; |
12 |
font-size: 23px; |
13 |
line-height: 1.3em; |
14 |
color: #fff; |
15 |
margin: 1.1em auto; |
16 |
text-align: center; |
17 |
text-shadow: 0 0 2px rgba(0, 0, 0, 0.9); |
18 |
}
|
ثم رابط تويتر:
1 |
|
2 |
p a { |
3 |
color: #fff; |
4 |
border-bottom: 2px solid #2da1ec; |
5 |
}
|
الخطوة 4: تصميم الخلفية
الآن لجزء المتعة :إعطاء الاشياء على صفحتنا ذاك الشيء الاضافي ( je ne sais quoi ).سوف نبدأ بإنشاء خلفية متدرجة لطيفة. إذا كنت مستخدم ماك يمكنك أن تعتمد على (برنامج جريدينت ) للقيام بالعمل الشاق نيابة عنك. وبدلاً من ذلك،توجه ل CSS3 لو سمحت !للحصول على فكرة عن بناء الجملة.
1 |
|
2 |
html, body { |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
6 |
color: #444; |
7 |
-webkit-font-smoothing: antialiased; |
8 |
background: #000222; |
9 |
background: -moz-linear-gradient(top, #000222 0%, #4b637c 100%); |
10 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c)); |
11 |
background: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%); |
12 |
background: -o-linear-gradient(top, #000222 0%,#4b637c 100%); |
13 |
background: -ms-linear-gradient(top, #000222 0%,#4b637c 100%); |
14 |
background: linear-gradient(top, #000222 0%,#4b637c 100%); |
15 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 ); |
16 |
}
|
الخطوة 5: تصميم نموذج الاشتراك
نموذج الاشتراك هو محور التركيز لصفحتنا، نظراً لأننا نريد الزائرين لتعرف عندما يتم إصدار منتجنا المزهل . نريده أن يكون التركيز في الصفحة، بعد الاسم أو الشعار.
نبدأ بتصميم ماسك المكان (موزيلا و أنماط نت محددة)، وتحديد حجم خط:
1 |
|
2 |
::-webkit-input-placeholder { |
3 |
color: rgba(255, 255, 255, 0.4); |
4 |
}
|
5 |
|
6 |
::-moz-input-placeholder { |
7 |
color: rgba(255, 255, 255, 0.4); |
8 |
}
|
9 |
|
10 |
input { |
11 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
12 |
font-size: 25px; |
13 |
}
|
الآن دعونا نعطي هذه الصفحة والايقونات بعض اللون والعمق:
1 |
|
2 |
input[type=email] { |
3 |
outline: none; |
4 |
width: 90%; |
5 |
padding: 15px; |
6 |
margin: 0 auto; |
7 |
color: #fff; |
8 |
border: none; |
9 |
-webkit-border-radius: 6px; |
10 |
-moz-border-radius: 6px; |
11 |
border-radius: 6px; |
12 |
background: rgba(0, 0, 0, 0.3); |
13 |
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
14 |
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
15 |
-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
16 |
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
17 |
}
|
18 |
|
19 |
input[type=submit] { |
20 |
position: absolute; |
21 |
margin-left: -105px; |
22 |
margin-top: 5px; |
23 |
font-size: 25px; |
24 |
color: #222; |
25 |
text-shadow: 0 1px 0 #fff; |
26 |
padding: 10px; |
27 |
width: 100px; |
28 |
height: 50px; |
29 |
border: none; |
30 |
background: #f0f0f0; |
31 |
background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); |
32 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); |
33 |
background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
34 |
background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
35 |
background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
36 |
background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
37 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); |
38 |
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
39 |
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
40 |
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
41 |
box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
42 |
-webkit-border-radius: 3px; |
43 |
-moz-border-radius: 3px; |
44 |
border-radius: 3px; |
45 |
cursor: pointer; |
46 |
}
|
خطوة 6: إضافة انتقالات CSS
دعونا نضيف بعض انتقالات CSS اللطيفة للمساعدة في جذب انتباه الزوار.
أولاً، سنقوم بإضافة تحوم و حالة نشطة لرابط (تويتر )والمدخلات:
1 |
|
2 |
p a { |
3 |
color: #fff; |
4 |
border-bottom: 2px solid #2da1ec; |
5 |
}
|
6 |
|
7 |
p a:hover { |
8 |
color: #2da1ec; |
9 |
border-bottom: 2px solid #fff; |
10 |
}
|
1 |
|
2 |
input[type=email] { |
3 |
outline: none; |
4 |
width: 90%; |
5 |
padding: 15px; |
6 |
margin: 0 auto; |
7 |
color: #fff; |
8 |
border: none; |
9 |
-webkit-border-radius: 6px; |
10 |
-moz-border-radius: 6px; |
11 |
border-radius: 6px; |
12 |
background: rgba(0, 0, 0, 0.3); |
13 |
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
14 |
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
15 |
-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
16 |
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
17 |
}
|
18 |
|
19 |
input[type=email]:hover { |
20 |
background: rgba(0, 0, 0, 0.5); |
21 |
}
|
22 |
|
23 |
input[type=email]:focus { |
24 |
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
25 |
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
26 |
-o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
27 |
box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
28 |
background: rgba(0, 0, 0, 0.6); |
29 |
}
|
30 |
|
31 |
input[type=submit] { |
32 |
position: absolute; |
33 |
margin-left: -105px; |
34 |
margin-top: 5px; |
35 |
font-size: 25px; |
36 |
color: #222; |
37 |
text-shadow: 0 1px 0 #fff; |
38 |
padding: 10px; |
39 |
width: 100px; |
40 |
height: 50px; |
41 |
border: none; |
42 |
background: #f0f0f0; |
43 |
background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); |
44 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); |
45 |
background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
46 |
background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
47 |
background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
48 |
background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
49 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); |
50 |
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
51 |
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
52 |
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
53 |
box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
54 |
-webkit-border-radius: 3px; |
55 |
-moz-border-radius: 3px; |
56 |
border-radius: 3px; |
57 |
cursor: pointer; |
58 |
}
|
59 |
|
60 |
input[type=submit]:hover { |
61 |
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
62 |
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
63 |
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
64 |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
65 |
width: 125px; |
66 |
margin-left: -130px; |
67 |
|
68 |
}
|
69 |
|
70 |
input[type=submit]:active { |
71 |
background: #c3d7ff; |
72 |
background: -moz-linear-gradient(top, #c3d7ff 0%, #f0f0f0 100%); |
73 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0)); |
74 |
background: -webkit-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
75 |
background: -o-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
76 |
background: -ms-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
77 |
background: linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
78 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 ); |
79 |
|
80 |
}
|
سوف نضيف قواعد الانتقال:
1 |
|
2 |
|
3 |
p a { |
4 |
color: #fff; |
5 |
border-bottom: 2px solid #2da1ec; |
6 |
-webkit-transition: all .4s ease; |
7 |
-moz-transition: all .4s ease; |
8 |
-o-transition: all .4s ease; |
9 |
transition: all .4s ease; |
10 |
}
|
و
1 |
|
2 |
|
3 |
input { |
4 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
5 |
font-size: 25px; |
6 |
-webkit-transition: all .4s ease; |
7 |
-moz-transition: all .4s ease; |
8 |
-o-transition: all .4s ease; |
9 |
transition: all .4s ease; |
10 |
}
|
الخطوة 7: رسوم CSS المتحركة
كما يمكننا أن نضيف بعض حركات CSS3 اللطيفة لتأثير مضاف عند تحميل الصفحة. فمن المستحسن أن تستخدم CSS لاضافة جمال لتصميمك ؛ وليس كجزء منه. الدعم للرسوم المتحركة لايزال ضئيل ويجب أن تكون حذراً من الإفراط في تعقيد التصميم الخاص بك من أجل ذلك.
كما قال دان عدن ان مكتبة الرسوم المتحركة ل Animate.css مفيدة حقاً. يمكنك إضافتها كما هو مبين في الملف الأصلي في بداية البرنامج التعليمي، أو استيرادها إلى ورقة الأنماط الخاصة بك، إذا كنت تفضل:
1 |
|
2 |
|
3 |
@import url(animate.css); |
وهناك مجموعة متنوعة من الحركات الجميلة للاختيار من بينها، ولكن أنا ذاهب لإضافة الرسوم المتحركة (bounceInDown ).نحن نطبقه لدى عنصرنا(في هذه الحالة المحتوى) كالتالي:
1 |
|
2 |
|
3 |
#container { |
4 |
position: fixed; |
5 |
width: 500px; |
6 |
height: 300px; |
7 |
top: 50%; |
8 |
left: 50%; |
9 |
margin-top: -150px; |
10 |
margin-left: -250px; |
11 |
text-align: center; |
12 |
-webkit-animation-name: bounceInDown; |
13 |
-webkit-animation-fill-mode: both; |
14 |
-webkit-animation-duration: 1.5s; |
15 |
-webkit-animation-iteration-count: 1; |
16 |
-webkit-animation-timing-function: linear; |
17 |
-moz-animation-name: bounceInDown; |
18 |
-moz-animation-fill-mode: both; |
19 |
-moz-animation-duration: 1.5s; |
20 |
-moz-animation-iteration-count: 1; |
21 |
-moz-animation-timing-function: linear; |
22 |
animation-name: bounceInDown; |
23 |
animation-fill-mode: both; |
24 |
animation-duration: 1.5s; |
25 |
animation-iteration-count: 1; |
26 |
animation-timing-function: linear; |
27 |
}
|
إذا كنت ترغب في تغيير الرسوم المتحركة، يمكنك فقط تغيير animation-name- إلى اسم الحركة التي ترغبها.
خطوة 8: اتخاذ المزيد من الأشياء
هذا ليس تصميم مستجيب، على العكس من ذلك، ولكن قد ترغب في إضافة بضع استفسارات وسائط الإعلام إلى الجزء السفلي من CSS الخاص بك لتلبية احتياجات الأجهزة الأصغر حجماً. التفكير في جعل عنصر الحاوية أضيق لشاشات أصغر حجماً، وتغيير العرض أو تغيير المواقع للمدخلات.
للسماح لاستمارة التسجيل لدينا لإضافة عناوين بريد الكتروني إلى قائمة، يمكن أن نفعل ذلك مع ربطها بخدمة رسائل إخبارية للبريد الإلكتروني، مثل MailChimp. لن افسر هذا بالتفصيل، حيث يوضح بهذا المقال تماما.
إذا كنت ترغب في إضافة الصلاحية إلى النموذج، يمكنك التحقق من هذا البرنامج التعليمي.
الاستنتاج
بناء صفحة دعابة سريعة مثل هذه مهم للدعاية قبل إطلاق موقع أو منتج. لا يلزم أن يكون معقداً، كما يوضح حل CSS النقي هذا.
أرجو أن تكون تعلمت شيئا من هذا البرنامج التعليمي، ومشكور للقراءة!
