النماذج المصممة باستخدام CSS3

#subscribe، #login (الموقف: مطلق؛ أعلى: 0px؛ العرض: 88٪؛ الحشو: 18px 6٪ 60px 6٪؛ الهامش: 0 0 35px 0؛ خلفية: RGB (247، 247، 247)؛ الحدود: 1PX الصلبة RGBA (147، 184، 189.0.8)؛ مربع-الظل: 0PT 2PX 5PX RGBA (105، 108، 109، 0.7)، 0PX 0PX 8PX 5PX RGBA (208، 223، 226، 0.4) inset؛ الحدود نصف قطرها: 5 بكسل ؛) #login (z- الفهرس: 22؛)

هنا سنقوم بتعيين خصائص للرأس:

/ **** النص **** / #WRapper H1 (font-size: 48px؛ اللون: RGB (6، 106، 117)؛ الحشو: 2PX 0 10 بكسل 0؛ font-face: "franchiseregular"، "Arial Narrow "، أريال، Sans-serif؛ font-wink: غامق؛ نص المحاذاة: المركز؛ الحشو أسفل: 30px؛) / ** في اللحظة السفلية، يدعم Webkit فقط النصية النصية؛ ** / #WRAPPER H1 (خلفية: -Webkit-Treming-Tradeient (-45DEG، RGB (18، 83، 93)، RGB (18، 83، 93) 20px، RGB (64، 111، 118) 20px، RGB (64، 111، 118) 40PX، RGB (18، 83، 93) 40 بكسل)؛ -أبكيت-النص الكامل اللون: شفافة؛ -Webkit-الخلفية القصاصة :) #WRAPPER H1: بعد (المحتوى: ""؛ عرض: كتلة؛ العرض: 100٪؛ الارتفاع: 2px؛ الهامش الأعلى: 10 بكسل؛ خلفية: خطي تدرج (يسار، RGBA (147،184،189،0) 0٪، RGBA (147،184،189،0،8) 20٪، RGBA (147،184،189،1) 53٪، RGBA (147،184،189،0،8) 79٪، RGBA (147،184،189،0) 100٪)؛

أشير إلى أن اليوم فقط المتصفحات مع دعم WebKit خلفية مقطع: نصلذلك سنصنع خلفية مخططة فقط ل WebKit وربطها إلى رأس H1. منذ المعلمة خلفية مقطع: نص إنه يعمل فقط في متصفحات Webkit، قررت العمل فقط مع خصائص WebKit. هذا هو السبب في أنني قمت بتقسيم CSS إلى جزأين واستخدمت فقط التدرج WebKit. ومع ذلك، يجب عدم استخدام WebKit فقط على مواقع الويب الخاصة بك! لذلك، على سبيل المثال، المعلمة -Webkit-Text-fill-color: شفافة يتيح لنا أن يكون لديك خلفية شفافة، ولكن فقط من أجل متصفحات WebKit، تتجاهل جميع المتصفحات الأخرى هذه الخاصية.

لقد أنشأنا أيضا خطا رفيعا أسفل العنوان باستخدام عنصر: بعد فئة PSEDO. استخدمنا التدرج 2px للارتفاع وتقليل الشفافية في الحواف إلى الصفر.

الآن دعونا نهتم بحقول المدخلات ومنحهم رؤية لطيفة.

/ **** التصميم المتقدمة الإدخال **** / / * العنصر النائب * / :: - العنصر النائب WebKit-INPUT (اللون: RGB (190، 188، 188)؛ نمط الخط: مائل؛) المدخلات: -moz- العنصر النائب، Textarea: -moz-holdorder (اللون: RGB (190، 188، 188)؛ نمط الخط: مائل؛) المدخلات (الخطوط العريضة: لا شيء؛)

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

/ * جميع الحقول استبعاد الإرسال وحدد الاختيار * / #WRWAPPER المدخلات: غير () (العرض: 92٪؛ الهامش الأعلى: 4px؛ الحشو: 10px 5px 10px 32px؛ الحدود: 1px الصلبة RGB (178، 178، 178)؛ مربع الحجم: مربع المحتوى؛ الحد الأدنى، دائرة نصف قطرها: 3px؛ Box-Shadow: 0PX 1PX 4PX 0PX RGBA (168، 168، 168، 0.6) Inset؛ الانتقال: جميع الخطوط الخطية 0.2S؛) # Interpper المدخلات: غير (): نشط ، # المدخلات الكتابة: غير (): التركيز (الحدود: 1PX الصلبة RGBA (91، 90، 90، 0.7)؛ خلفية: RGBA (238، 236، 240، 0.2) مربع-الظل: 0px 1PX 4PX 0PX RGBA (168 ، 168، 168، 0.9) inset؛)

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

الوقت الآن هو متعة: الخط مع الرموز. نظرا لأننا لا نستطيع استخدام الطبقات الزائفة: قبل وبعد ذلك، سنضيف أيقونة في المعلمة التسمية، ثم ضع في الحقل. سوف أستخدم مكتبة Fontomas. يمكنك مطابقة الرموز بنفسك بالحرف المناسب. تذكر السمة أيقونة البيانات؟ هو في ذلك يحتاج إلى إدراجها. إستعملت أيقونة البيانات \u003d 'U' لتسجيل الدخول، "E" للبريد الإلكتروني، 'p' كلمة المرور. بمجرد اختارت الحروف، قمت بتنزيل الخط واستخدام مولد الخط FontSquirrel للتحويل إلى تنسيق مناسب ل Font-font.

@ Font-face (Font-face: "Fontomascustomgulary"؛ SRC: URL ("الخطوط / Fontomas-WebFont.eot")؛ SRC: عنوان URL ("الخطوط / Fontomas-WebFont.eot؟ تنسيق #iefix") ("مضمن- OpenType ")، عنوان URL (" الخطوط / fontomas-webfont.woff ") تنسيق (" Woff ")، عنوان URL (" الخطوط / Fontomas-WebFont.ttf ") تنسيق (" Truetype ")، URL (" الخطوط / Fontomas-WebFONT .svg # fontomascustomgulary ") تنسيق (" SVG ")؛ خط الوزن: عادي؛ نمط الخط: عادي؛) / ** خدعة سحرية! ** /: aftert: Attret: font-font-face: "fontomascustomgulary"؛ اللون: RGB (106، 159، 171)؛ الموقف: مطلق؛ اليسار: 10 بكسل؛ أعلى: 35 بكسل؛ العرض: 30 بكسل؛)

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

الآن تعيين قواعد زر الإرسال.

/ * أنيلز كلا الأزرار * / #Wrapper p.button المدخلات (العرض: 30٪؛ المؤشر: مؤشر؛ خلفية: RGB (61، 157، 179)؛ الحشو: 8px 5px؛ font-face: "bebasneueregular"، "Arial Narrow "، Arial، Sans-serif؛ اللون: #FFF؛ font-size: 24px؛ الحدود: 1PX الصلبة RGB (28، 108، 122)؛ الهامش أسفل: 10 بكسل؛ نص الظل: 0 1PX 1PX RGBA (0، 0 0، 0.5)؛ حدود نصف قطرها: 3px؛ Box-Shadow: 0PX 1PX 6PX 4PX RGBA (0، 0، 0.07) INSET، 0PX 0PX 0PX RGB (254، 254، 254)، 0px 5px 3px 3px RGB (210، 210، 210)؛ الانتقال: كل 0.2s خطي؛) #wput p.button المدخلات: تحوم (الخلفية: RGB (74، 179، 198)؛) # Wronapper p.button المدخلات: نشط، #WRWAPPER P. زر الإدخال: التركيز (خلفية: RGB (40، 137، 154)؛ الوظيفة: قريب؛ أعلى: 1PX؛ الحدود: 1PX الصلبة RGB (12، 76، 87)؛ مربع الظل: 0PX 1PX 6PX 4PX RGBA (0، 0، 0، 0.2) inset؛) p.login.button، p.signin.button (text-chiews: يمين؛ الهامش: 5px 0؛)

الحيلة هي استخدام مربع الظل لإنشاء عدة إطارات. بطبيعة الحال، يمكنك استخدام إطار واحد فقط، ولكن يمكنك أيضا أن تكون عدة. سوف نستخدم المعلمة الطول لإنشاء إطار أبيض "مزيف"، وعرض 3Px، دون طمس.

الآن STYLIZE NECKBOX، هنا لن نكون غير عادي:

/ * stylize chekbox "حفظ البيانات" * / .keepplogin (هامش العلوي: -5 بكسل؛). explogin المدخلات، .keeplogin التسمية (العرض: 12px؛ نمط الخط: مائل؛). Eyplogin إدخال الإدخال (الهامش الأيمن: 5 بكسل؛). التسمية .keeplogin (العرض: 80٪؛)

نحن نستعمل النماذج الطابقية باستخدام تدرجات خطية متعددة لإنشاء تدرج مخطط.

P.Change_link (الموقف: المطلق؛ اللون: RGB (127، 124، 124)؛ اليسار: 0px؛ الارتفاع: 20px؛ العرض: 440px؛ الحشو: 17px 30px 20px 30px؛ font-size: 16px؛ نص محاذاة: الحق؛ الحدود الأعلى: 1px الصلبة RGB (219، 229، 232)؛ الحدود نصف قطرها: 0 0 5 بكسل 5px؛ خلفية: RGB (225، 234، 235)؛ خلفية: تكرار الخطي التدرج (-45DEG، RGB (247، 247، 247)، RGB (247، 247، 247) 15 بكسل، RGB (225، 234، 235) 15 بكسل، RGB (225، 234، 235) 30PX، RGB (247، 247، 247) 30 بكسل)؛ # ... .change_link a (العرض: bld؛ font-wink: جريئة؛ خلفية: RGB (247، 248، 241)؛ الحشو: 2PX 6PX؛ اللون: RGB (29، 162، 193)؛ الهامش يسارا: 10 بكسل؛ نص -DECORAGE لا شيء؛ الحدود-دائرة نصف قطرها: 4PX؛ الحدود: 1PX الصلبة RGB (203، 213، 214)؛ الانتقال: جميع 0.4s الخطي؛) #wropper p.change_link ج: تحوم (اللون: RGB (57، 191، 215)؛ خلفية: RGB (247، 247، 247)؛ الحدود: 1PX الصلبة RGB (74، 179، 198)؛) # الكتابة p.change_link a: نشط (الموضع: قريب؛ أعلى: 1PX؛)

الآن ترى أن لدينا نماذج ممتعة، لكننا نريد عرض واحد منهم فقط. جاء وقت الرسوم المتحركة!

إنشاء الرسوم المتحركة

#REGISTER (Z- الفهرس: 21؛ العتامة: 0؛)

تذكر أن نموذج الإدخال يحتوي على معلمة Z-Index: 22؟ النموذج الثاني الذي نقوم بتعيين هذه المعلمة إلى 21 لوضعه "ضمن" نموذج الإدخال.

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

#toregister: الهدف ~ #Wrelagister #relagister، #tologin: الهدف ~ #WRAPPER #LOGIN (Z- الفهرس: 22؛ الرسوم المتحركة - الاسم: fadeinleft؛ الرسوم المتحركة تأخير: .1S؛)

هذا ما يحدث: عند النقر فوق الزر انضمنحن نتجه إلى #toregister. ثم تحدث الرسوم المتحركة وانتقل فقط إلى عنصر #relaster. نحن نستخدم الرسوم المتحركة يسمى fadeinleft.وبعد نظرا لأننا "إخفاء" باستخدام شفافية صفر، فسنقوم بتطبيق الرسوم المتحركة التي ستظهر تدريجيا. لقد غيرنا أيضا Z-Index حتى يظهر أعلى نموذج آخر. الشيء نفسه يحدث لشكل آخر نفسه يحدث للنموذج الآخر.
هنا هو رمز الرسوم المتحركة. استخدمنا إطار الرسوم المتحركة CSS3 من دان عدن وتكييف هذا الإطار تحت برنامجنا التعليمي.

تحريك (الرسوم المتحركة المدة: 0.5s؛ وظيفة توقيت الرسوم المتحركة: سهولة؛ وضع تعبئة الرسوم المتحركة: كلاهما؛ : 1؛ تحويل: translatex (0)؛))

سيكون النموذج الذي "يختفي" رسم متحرك يعتم إلى اليسار:

#toregister: الهدف ~ #Wropper #login، #tologin: الهدف ~ #WRAPPER #REJister (الرسوم المتحركة الاسم: fadeoutleftbig؛) @ fadeoutleftbig؛) @ fadeoutleftbig؛) @ fadeoutleftbig؛) fadeoutleftbig؛) : 0؛ تحويل: translatex (-20px)؛))

الآن يمكنك استخدام الرسوم المتحركة الأخرى من Dan Eden "باستخدام ملف Animate.css: ما عليك سوى تغيير الفصل. من فئة الفصل الدراسي وأسماء الرسوم المتحركة. ستجد أيضا العديد من الرسوم المتحركة الأخرى في نهاية ملف ملف revices.css.

هذا كل شيء، الأصدقاء. أتمنى أن تحب هذا البرنامج التعليمي!

لاحظ أنه في بعض المتصفحات المعلمة خلفية مقطع: نص غير مدعوم. Internet Explorer 9 الرسوم المتحركة لا تعمل. في Internet Explorer 8 وتحت الطبقة الزائفة: الهدف من الطبقة الزائفة غير مدعومة، لذلك لن يكون هناك هذا التأثير هناك على الإطلاق.

ملاحظة. جميع التعليقات على الترجمة بالسرور سأقبل في PM. شكرا لك!

العلامات: إضافة العلامات

يتكون نص كتابة الماكينة من علامات مطبوعة - رموز رسومية.
الأحرف الرسومية هي أحرف تحتوي على عرض مرئي في النص.
يتم جمع جميع الأحرف الرسومية في مجموعة من نظام Unicode العالمي العالمي.
أدخل رمز الرسومات Unicode إلى مستند HTML
- الغرض الرئيسي والوحيد لهذا الجدول.

إدراج رمز في مستند HTML يمكن أن يكون واحدا من الطرق:

1. انسخ صورة الرمز من نافذة المتصفح إلى نافذة محرر HTML Visual
2. انسخ رمز رمز HTML مباشرة في رمز مستند HTML

1. إدراج البصرية المرئية
2. إدراج رمز في التعليمات البرمجية.

يمكن تعيين الخط للرمز، وحجمه ولونه في HTML بواسطة الرمز:
code_simvol.
أين،
أريال - الخط،
10 بكسل - حجم الخط في بكسل،
# FF0000 - رمز لون الخط (أحمر)

على سبيل المثال:
☎ - حجم الخط رمز 30px،
☎ - حجم الخط رمز 30PX، اللون - الأحمر
☎ - حجم الخط 20 بكسل رمز،
☎ - حجم الخط 10px رمز.
تقريبا. الخطوط الموصى بها لإدراج رموز خاصة - أريال، فردانا و تاهوما. تعرض هذه الخطوط أحرف Unicode بشكل صحيح وأنفسها بدورها بدعم من تطبيقات الويب بشكل صحيح.

1. "رمز"
   (عرض رمز مرئي)
   من هذا الرسم البياني، يمكنك نسخ صورة الرمز والصقه في نافذة محرر HTML النص. يتم نسخ الشخصية بحجم خط 20px. بعد النسخ، يمكن أن يطلب حجم حجم الخط الفردي مباشرة عن علامة نسخ.
2. "اسم"
   (فقط للحصول على أحرف مهمة أو غير مفهومة)
   شرح وصف رمز، نطاقه، أمثلة ...
3. "أنجبين"
   Mnemonica هو تصميم طريقة عرض للكلفة "، يدل على رمز الرسالة في HTML. تم إدراجه مباشرة في كود HTML - كود HTML مستند HTML. يتم شائعة المنظفات بشعبية كبيرة بين الآيات المهنية. يتم تذكرهم جيدا من قبل شخص ودعمهم جميع تطبيقات HTML. يحتوي على اسم الأبجدية (تعيين) رمز الرمز الخاص بك وعلامة الخدمة (&)، والذي يعمل كإشارة لقراءة رمز المستعرض ولا يتم عرضه على شاشة الشاشة. اسم كل مذكرات فريدة من نوعها وقراءةها بسهولة، لأنه يتم تشكيله من كلمة اللغة الإنجليزية التي تميز الحرف.

   Mnemonica (اليونانية) - فن أحفظ أي شيء. يستخدم Mnemotechnics لتسهيل تصور المعلومات الصعبة عندما يتم توفير كائن الحفظ في حالة تعليق مع شيء ما.

4. "الرمز"
   رمز - رمز رمز رقمي رقمي في HTML، واكتب و. إدراجها مباشرة إلى مستند HTML HTML. يتكون الرمز العشري الرقمي من رقم يشير إلى رقم التسلسل للحرف في نظام Unicode وعدة علامات الخدمة (& #)، والتي تعمل كإشارة لقراءة التعليمات البرمجية للمتصفح ولا يتم عرضها على شاشة الشاشة. يحتوي الرمز العددي العددي على نطاق واسع واستخدامه، بسبب براعة واسعة التصور.

رموز إدارة HTML (XHTML)

رموز إدارة HTML في HTML (XHTML) هي أحرف خدمة لغات HTML المستخدمة في صفحات الويب HTML-Clash. يجب أن تدعم هذه الأحرف أي متصفح، نظرا لأنها من المستحيل عرض نص HTML بشكل صحيح. لا يتم عرض رموز التحكم في النص، مع الإدارة المباشرة من لوحة المفاتيح، يتم تفسير المتصفح على أنه علامات الترقيم التي تتصل بأي إجراء عند رسم الصفحة على الشاشة.

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

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

بناء الجملة وعلامات الترقيم

العلامات التجارية والعملة