15 مولدات HTML5 و CSS3 رائعة
HTML5 و CSS3 هي لغات رائعة لبدء التعلم ، وأعتقد دائمًا أن إحدى أفضل الطرق لبدء التعلم هي الغوص في التعليمة البرمجية والتعامل معها فقط. كما يمكنك أن تقول ، هذا هو المكان الذي تتدخل فيه المولدات. إنها طريقة رائعة لتوليد بعض التعليمات البرمجية واللعب بها والتعلم.
ليس هذا فقط ، فهي مفيدة بشكل لا يصدق لأنه في كثير من الأحيان كمطور أو مصمم نجد أننا نفعل الأشياء مرارا وتكرارا. حسنًا ، يمكن للمولدات أن تخلع هذه الحافة وأن تفعل تلك الأشياء الصغيرة في كل مرة.
على سبيل المثال ، لدي مقتطف نصي-موسع يقوم بإنشاء قالب HTML5 كتبته عنه هنا . الآن ، نص الموسعة رائع لكنه لا يحل كل حاجة ، وفي هذه الحالة هناك حاجة كبيرة للمولدات لذا أخذت الوقت للعثور على 20 من المفضلة لدي و وصف لماذا أحبهم.
سأقول أن معظم هذه القائمة سوف تركز على مولدات CSS3 ، ببساطة لأنها مطلوبة أكثر من مولدات HTML5 ، وسوف نتعلم لماذا. ملاحظة: انقر على الصور لفتح مواقع الويب.
مولدات CSS3
هناك دلالة سلبية إلى حد ما عندما يتعلق الأمر بهذه المولدات ، ويجب أن أقول أنه كمصمم ومطور لا يوجد شيء سلبي حول استخدام واحد. إنه توفير كبير للوقت ، وبكل أمانة ، أعرف ثلاثة مطورين يقومون بكتابة المولدات الخاصة بهم لمجرد أنهم يريدون مساعدة المجتمع. لذا ضع في اعتبارك أنه ليس كما لو كنت تستخدم شيء من المحرمات التي أعدتها AOL. هذه هي المولدات الطبيعية والعضوية التي جاءت كما احتجناها. فلماذا لا نشارك في بعض الثروة؟ دعونا نذهب من خلال بعض المفضلة لدي ، ولماذا قد تستمتع بها.
المولدات العامة
سيركز هذا القسم على المولدات التي تهتم بالاحتياجات والاستخدامات الواسعة للطيف. ستغطي هذه الأمور كل ما قد تحتاجه أو تريده في المولد ، ولكن بطبيعته قد تكون أسوأ في التفاصيل. هذا هو السبب في أنني سأقدم الكثير من الخيارات لاحقًا في هذه المقالة لأنواع معينة.
CSS3.me
هذا واحد من المولدات الدقيقة التي كنت أشير إليها فقط. تم إنشاء هذا واحد من قبل أحد المصممين المفضلين لدي ، اريك هوفمان وهو أمر رائع. بسيطة جدا ، الحد الأدنى ، وأنيقة ، ولكن في نفس الوقت وظيفية للغاية. مما يتيح لك القدرة على تغيير وتعيين نصف قطر الحدود ، الظل المسقط ، التدرج ، و العتامة - إنها وظيفية تمامًا.
ملاحظة: ألق نظرة على موقع Eric. إنه مثال رائع على التصميم الأول للجوّال. وهو أيضا مصمم في Zendesk ، لذلك أرسل له بعض الحب إذا كنت قد استمتعت بهذا المنتج.
صانع CSS3
في كثير من الأحيان سيجد الناس المولدات التي يحبونها ويلتزمون بها. وهذا هو بالضبط ما حدث مع عميل كنت قد عملت معه فيما يتعلق بهذا المولد. لقد كان مغرمًا بها تمامًا ، ويمكنني أن أرى السبب - إنها وظيفية بالتأكيد. قد لا يكون أجمل شيء على الإطلاق لكنه يبدو أنه يحتوي على جميع الأجراس والصفارات.
يمكنك عمل @ font-face work و animation work و box shadows و text shadows و rot text و transitions و gradients و border radius و more much. إنه عادة ما أحفظه بشكل مرجعي ، ولكن نادراً ما يستخدم ببساطة بسبب مدى كفاءة المولدات الأصغر في كل فئة من فئاتها. ولكن من المؤكد أنه مولد جيد لمحاولة إذا كنت بحاجة إلى واحد ولا ترغب في القفز إلى حفنة من مختلف منها.
مولد CSS3
هذا هو عام جيد آخر يوفر الكثير من الوظائف. يعجبني هذا لأنه يحتوي على قوائم منسدلة سهلة و سهلة الاستخدام. التصميم هو أيضا لطيف جدا. كما يوفر وظيفة حجم مربع لطيف. هذا واحد يوفر قدرة كبيرة على القيام بما يلي: نصف قطر الحدود ، الظل مربع ، الظل النص ، RGBA ، أعمدة متعددة ، حجم مربع ، الخطوط العريضة ، التحولات ، التحولات ، التدرجات محددات. أعتقد أن هذا أحد المفضلة لدي ، لأن التصميم وواجهة المستخدم نظيفة للغاية. أنا عادة ما تستخدم هذا واحد عندما ننسى cssmaker.
مولدات زر
CSS3-Tricks Button Maker
واحدة من أول صانعي الأزرار التي رأيتها في اليوم جعلني أرتدي حقا. لقد كان خطيًا جدًا ، ولم يكن يحتوي على واجهة مستخدم لها (بشكل مثير للسخرية) وكان بشكل عام منتجًا مُصممًا بشكل فظيع. كملاحظة جانبية ، سوف أتحدث عن شيء مماثل في المرة القادمة ، ولكن في الوقت الحالي سأعرض واحدة وجدتها في css3tricks ، وهي حقا واحدة لطيفة.
واحدة من النقاط الرئيسية للإشارة هنا هي حقيقة أنه يمكن السيطرة عليها بالكامل تقريبا من خلال السحب والإسقاط المنزلق ، وهو أمر جيد حقا. فقط انتظر حتى تضطر إلى إدخال كل شيء يدويًا باستخدام لوحة المفاتيح وسوف تتمنى لو كان لديك شريط سحب جميل. كملاحظة جانبية أخيرة ، يعد CSS3 Tricks موقعًا رائعًا يحتوي على الكثير من المحتوى المنظم جيدًا والمدروس والذي ستحبه جميعًا لتسجيل الخروج.
CSS3 Button.net
والآن نأتي إلى المولد الذي كنت أشير إليه للتو. قد يكون التصميم مفقودًا ، لكنه يوفر خيارات أكثر بكثير من السابق ، وهو أمر مثير للسخرية في أغلب الأحيان. قد ترغب في بعض الأحيان في سهولة الاستخدام ، وفي بعض الأحيان تحتاج إلى بعض الاختيار الجاد عندما يتعلق الأمر بالمولدات ، وقد تكون هاتان النقطتان الأخيرتان حقًا في هاتين النقطتين.
هذا واحد يوفر القدرة على إضافة ظلال النص متعددة ، والظلال الداخلية ، والحدود ، وألوان الخط في حين أن آخر واحد حقا لم تصل إلى هذا القدر من التفصيل. قد يكون من الصعب اكتشافه في البداية ولكنك ستحصل عليه إذا كنت تلعب معه لبضع دقائق. أجد أن هذا هو الأكثر فائدة إذا كنت معتادًا على واجهة مستخدم Windows ، ونتيجة لذلك ، كان لدي عملاء أخبروني أن هذا هو المفضل لديهم لأنهم كانوا عالقين على XP لسنوات ولا يعرفون أي شيء أفضل. والآن أنا متأكد من أن بعضكم يتساءلون ، ولكن بصراحة كيف تسير الأمور - بعض العملاء يريدون روابط للمولدات ليتعلموا لأنفسهم بعد أن يثير إعجابهم. أنا عادة ربط لهم ليندا ، TeamTreehouse ، وعدد قليل من هذه المولدات لحسن التدبير.
CSS3 زر مولد
هذا هو حقا متعة واحدة. فهو يمنحك زرًا كبيرًا للتلاعب ، وهو باللون الأحمر الجذري أيضًا. يمكنك بعد ذلك التلاعب بالظل ، والحدود ، واللون ، وفوق ذلك يمنحك القدرة على تحرير التمرير. يعجبني هذا الأمر لأنه وجده منذ فترة وجيزة عندما دخلت إلى CSS ، وأعطاني فكرة عن ما يمكن فعله. تعتبر أشرطة التمرير بالسحب والإفلات رائعة بالنسبة للأشخاص الجدد على اللغات ، لأنك تستطيع أن ترى ما يمكنك فعله على الفور. الآن ، سأقول ، أنا لا أستعمل هذا خاصة بعد الآن - في ضوء تلك التي ظهرت ، لكنها ذاكرة عظيمة.
صورة الحدود ومولدات الشعاع
الحدود بين صورة
لا شيء يتفوق على border-image.com عندما يتعلق الأمر بالتقاط صورة معينة ثم تكرارها للعثور على نمط الحدود الصحيح. تأكد من أنك لا تنتهك حقوق الطبع والنشر ، واستخدم صورة شخص آخر بدون الإسناد.
ولكن لنفترض أنك رسمت سهمًا أو مثلثًا وتريد العثور على مولد يكرره عبر حدود موقعك أو حتى حد العنصر. حسنا ، لا شيء أفضل من هذا الموقع عندما يتعلق الأمر بتلك الحاجة. يمكنك التعامل مع الإزاحة والحجم والتكرار الذي تحتوي عليه الصورة.
بمجرد وصولك إلى الموقع ، سترى مثالاً على الصورة التي قاموا بتحميلها ، لكنها بالفعل أكثر فائدة من تلك التي تظهرها الصورة. غالباً ما سأستخدمها للتصاميم في الخلفيات التي أريد أن أكررها و / أو انظر كيف تبدو حقيقية بسرعة ، قبل أن تقوم بتكرار كامل الخلفية في Photoshop. يمكنك استخدامه لأي شيء متعلق بالصور المتكررة ، حقًا.
الحدود بين الشعاع
هذه أداة صغيرة ورائعة ، أجدها عمليًا كثيرًا. مع ذلك ، كل ما عليك فعله هو تحديد مقدار الحافة المستديرة التي تريدها في كل زاوية. عملي جدا ، بسيط جدا. وبعد ذلك يمكنك التحقق من نوع بادئة المتصفح التي تريد تضمينها ، والازدهار الذي تم إجراؤه. إنها واجهة مستخدم جميلة بكل أمانة. يجب أن تكون هناك اختبارات في دورات علوم الكمبيوتر حيث أن كل ما تفعله هو محاولة التوصل إلى شيء بسيط وعملي كما هو.
مولدات التدرج CSS3
لون محرر Zilla Gradient
تتم فوترة هذا كمحرر التدرج CSS3 النهائي ، ولحسن اليمين. في الواقع ، من الرائع أن يكون هذا هو محرر التدرج الوحيد الذي سأدرجه هنا. لديها الكثير من الميزات ، وهي سهلة الاستخدام وسهلة للبدء. ببساطة سحب حول الأقلام السوداء والزرقاء قليلا ، وسوف نرى ما يفعلونه بسرعة. كما أنها تجعل محرر المتصفح في كروم أو ثعلب النار وهذا مفيد حقًا للمصممين الذين يعملون على الويب. تأكد أيضا من اللعب مع الإعدادات المسبقة في هذا واحد ، لأنه في كثير من الأحيان تلك جيدة بما فيه الكفاية - أيا كان اختيارهم قام بعمل عظيم.
المولدات الطباعة / المحررين
مولد
هذا هو منتج مثير للاهتمام حقا. ما يفعله هو السماح لك بتحميل الخطوط التي اخترتها من الويب أو قد تكون موجودة على الكمبيوتر ، ومن ثم يمنحك ملفًا إخراجًا جاهزًا للعمل على الويب. تحصل على أكثر من شيء واحد ، تحصل على بعض الأشياء. يمكنك الحصول على CSS لخصائص @ font-face بالنظر إلى الخط الذي اخترته ، وملف HTML الذي يعرض الخط واستخداماته المتعددة. إنها حقًا أداة رائعة لاستكشاف إمكانات الخط بالكامل إذا لم تكن متأكدًا من ذلك ، وخاصة إذا لم يكن لديك الوقت الكافي لإنشاء موقع ويب كامل بهذا الخط قبل اتخاذ القرار.
عكس CSS3 المولد
CSS3 من فضلك
هذا هو منتج رائع حقا. أساسا ما يفعله هو أنه يعطيك مجموعة مربع ، وجميع CSS لذلك ، ومن ثم يمنحك القدرة على تشغيل المقاطع وخارجها لمعرفة ما يفعلونه. لذا يمكنك بشكل أساسي عكس هندسة CSS3 لمعرفة ما تفعله ، ومن ثم يمكنك رؤية ما تقوم به. هذه طريقة رائعة لتعلم CSS3 إذا كنت مهتمًا ، ولكنك تعتقد أن المولدات معقدة بعض الشيء.
CSS3 إسقاط الظل المولدات
Webestools مولد الظل
أنا أحب هذا المولد الظل كثيرا ، لأنه يذهب إلى التفصيل والعمق فيما يتعلق الظلال التي لا المولدات الأخرى فقط. قد لا يبدو أفضل منتج مصمم على الإطلاق ، ولكنه بالتأكيد رائع. لديها ظلال أقحم ، ظلال لأول مرة والقدرة على التعامل مع الإزاحات ، تعيين الألوان ، والقيام بأي شيء يمكن القيام به مع رمز إلى حد كبير - ولكن بدلا من ذلك مع شريط سحب لطيفة. كيف أحب شريط السحب تحقق من هذا الأمر إذا كنت بحاجة إلى رؤية ما قد تبدو عليه فكرة الظل الخاصة بك قبل أن تقوم بتلوينها.
مولدات HTML5
المولدات HTML5 هي نوع من الصعب الحصول عليها ، والسبب في ذلك ربما بسبب مدى عظيم HTML5 Boilerplate هو. لن نتحدث عن ذلك ، لأنه ليس مولدًا على وجه التحديد ، لذلك سألخصه هنا: إنه نموذج HTML5 تم ملؤه بالفعل وجاهزًا لك للعمل معه ، لذا عليك التحقق من ذلك إذا لم تره. انها جميلة جدا في الواقع. يستخدمه الكثيرون كقالب مبدئي لمواقعهم ولسبب وجيه. عاد الآن إلى المولدات. إن العثور على الجودة في الواقع أمر صعب جدًا ، لكنني تمكنت من العثور على القليل هنا الذي سأعرضه - ثم بعد ذلك لدي عدد قليل من التعميمات التي تتناول جميع الموضوعات الواردة في هذه المقالة.
Shikiryu HTML5 مولد
مولد HTML Shikiryu هو أكثر تعقيدا بكثير. يمكنك إضافة ميزات تسمح لك بالقيام بأشياء داخل مخطط (mixins ، الخ) ، ونوع خيالي - لذلك فهي مفيدة للغاية. أنا أحب ذلك لأنه أكثر دلاليًا من الخيارات الأخرى ، وفي الوقت نفسه يسمح لك بإضافة تطبيقات تابعة لجهات خارجية تحظى بشعبية كبيرة والتي يحب الناس استخدامها.
قم بالتبديل إلى مولد HTML5
هذا هو مولد مثير للاهتمام. ما يفعله هو أنه يسمح لك بإنشاء إطار عمل سريع وسهل لبناء المواقع ، ولكن على عكس HTML5 Boilerplate ، فإنه يتيح لنا اختيار المحددات التي نفضل رؤيتها في إطار العمل الخاص بنا. لقد قمت بالفعل باستخدام هذا لإنشاء رمز بدلاً من HTML5 Boilerplate عندما أحتاج إلى بعض المحددات أو العناصر أكثر مما تقدم. الآن ، لا يتبع بالضبط كل المبادئ المصممة بشكل جميل للترميز الدلالي - مثل HTML5 Boilerplate - ولكنه يقوم بعمل جيد بما فيه الكفاية ، ويمكنك الذهاب والقيام بالباقي إذا كنت حقا بحاجة إلى استخدامه.
Quackit HTML5 مولد
هذا واحد يأخذ خطوة إلى الوراء ، وبدلا من مجرد إعطاء مجموعة من التعليمات البرمجية التي هي عامة بسيطة وأساسية ، يسمح لك بإدخال جميع المعلومات الخاصة بك. هذا مفيد حقًا ، ولقد وجدت أن آخرين ممن هم أحدث في مواقع الويب يحبونه حقًا. إنهم يحبونها بشكل خاص ، لقد وجدت ، من حيث أنه يولد HTML الأساسي القياسي لك ثم ننظر مع ما تريد مع CSS. إذا كنت تتعلم CSS ، ولا تزال غامضة بعض الشيء على HTML (على الرغم من عدم التأكد من سبب ذلك) ، فيمكنك القيام بذلك بهذه الطريقة.
وهذا عن التفاف عليه. هذه المولدات مدهشة فقط للعمل بطريقة سريعة ورشيقة ، ولكن بدلا من رواد الأعمال هم للمصممين. وهذا رائع حقا في رأيي. هل لديك فكرة سريعة عن دائرة نصف قطرها الحد (tab'd ربما؟) ، أو الظل ، أو التدرج اللوني ، أو قالب html5 مع مخطط مدرج - حسنا هذه يتم فقط لك. يرجى ملاحظة أن هذه ليست قائمة شاملة ، ولكنها كانت عددًا قليلًا من المفضلة والأخرى التي استخدمها زملائي في الماضي. أنا أستمتع حقا باستخدام الكثير من هذه ، ونأمل أن تفعل أيضا.