نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی

ساخت دکمه های شیک. نحوه ایجاد دکمه های شیک با استفاده از CSS خالص

30.07.2019 اینترنت، وای فای، شبکه های محلی

سلام خدمت دوستان عزیز. امروز در مورد دو روش به شما خواهم گفت که به شما کمک می کند یک دکمه متحرک برای وب سایت خود ایجاد کنید. احتمالاً تعداد زیادی از این دکمه ها را دیده اید و روی آنها کلیک کرده اید. بنابراین، در وبلاگم دوره ها و آموزش های وابسته را به صورت دوره ای توصیه می کنم، فقط آنهایی را که خودم امتحان کرده ام. و البته من به آمار علاقه مند هستم و آمار می گوید مردم روی دکمه های جذاب 48 درصد بیشتر از لینک های معمولی کلیک می کنند.

اصل ایجاد دکمه های متحرک با استفاده از CSS به شرح زیر است. 1 - اولیه، 2 - هنگام نگه داشتن مکان نما و 3 - هنگام فشار دادن دکمه ماوس. برخی از خدمات هر سه مورد را دارند، در حالی که برخی دیگر فقط دو مورد را دارند. اما نکته اصلی این است که شما از نتیجه نهایی راضی هستید.

آموزش تصویری روش دوم ساخت دکمه های متحرک:

به عنوان مثال، اجازه دهید به سرویس CSS3 ButtonGenerator نگاهی بیندازیم که فقط دو شرط دارد. اما جلوه ها بسیار خوب به نظر می رسند. کسانی که از فقدان زبان روسی گیج شده اند، از آخرین ژنراتور ارائه شده در لیست استفاده کنند.

پس بیایید شروع کنیم.

صفحه اصلی سرویس را باز کنید. در ابتدا، یک نمای اولیه از دکمه و ابزارهایی خواهید دید که به شما امکان می دهد انواع تنظیمات را انجام دهید.

بخش اول، Text&Font، مسئولیت متن، اندازه فونت، رنگ فونت، سایه فونت را بر عهده دارد. اینجا جایی است که برچسب را روی دکمه می نویسید، اندازه، رنگ و سایه آن را تنظیم می کنید.

بخش بعدی، Background، به پس زمینه اشاره دارد. در اینجا می توانید رنگ دکمه، گرادیان دکمه، اندازه دکمه و ترکیب پس زمینه را مشخص کنید.

قسمت Border وظیفه تنظیم سایه و مرزهای دکمه را بر عهده دارد. به راحتی می توانید ضخامت حاشیه، گرد شدن گوشه ها و سایه دکمه را تنظیم کنید.

بخش بعدی، تبدیل، مسئول تبدیل دکمه - چرخش، جابجایی، اعوجاج است.

بخش بعدی Transition وظیفه روان بودن انیمیشن را بر عهده دارد. شما این تنظیمات را مطابق با دکمه خود تنظیم می کنید. اقدامات را می توان برای کل دکمه یا لایه های جداگانه اعمال کرد.

پس از چندین بار تلاش، آزمایش با تنظیمات و خواهید فهمید که چیست.

پس از پیکربندی ظاهر اولیه دکمه، می توانید به مرحله بعدی بروید. این یک تغییر دکمه هنگام نگه داشتن مکان نما ماوس است. برای انجام این کار، روی چک باکس مشخص شده در تصویر کلیک کنید.

گزینه های ماوس اور

اکنون تمام تغییرات تنظیماتی که انجام می دهید مربوط به دکمه ای است که با قرار دادن ماوس روی آن نمایش داده می شود. و این تنظیمات به صورت جداگانه به هر دکمه بستگی دارد. به عنوان مثال، من تنظیمات چرخش، گرادیان و رنگ سایه را تغییر دادم.

هنگامی که دکمه آماده شد، می توانید به نصب دکمه در مقاله ادامه دهید. برای انجام این کار، کد را در محل مورد نیاز در مقاله نصب کنید:

در اینجا مثال ما است:

خوب، اکنون می دانید که چگونه به راحتی و به سرعت یک دکمه متحرک برای یک وب سایت یا وبلاگ بسازید. امتحان کنید و اجرا کنید، ارزشش را دارد. اگر سوالی دارید، در نظرات بنویسید، من سعی خواهم کرد کمک کنم.

این همه برای امروز است، برای شما آرزوی موفقیت دارم. و من همیشه خوشحالم که شما را در صفحات وبلاگم می بینم.

P.S. و در اینجا نمونه ای از یک دکمه متحرک برای آموزش دنیس گراسیموف "تنظیم ترافیک سرد برای ترویج پیوندهای وابسته" است. من این آموزش را تکمیل کردم و آن را به همه توصیه کردم - بدون اغراق غیر ضروری، این یک راه واقعی برای کسب درآمد در برنامه های وابسته است. که اساساً کاری است که من انجام می دهم.

قبل از اینکه به دکمه ها نگاه کنیم، اجازه دهید تنظیمات مشترک همه آنها را بررسی کنیم.

HTML

دکمه ها از کد HTML بسیار ساده استفاده می کنند:

اشتراک در

CSS

همچنین، همه دکمه‌ها تنظیمات مشترکی برای متن شرح و لغو انتخاب پیوندها خواهند داشت:

ButtonText ( فونت: 18px/1.5 Helvetica، Arial، sans-serif؛ رنگ: #fff; ) a (رنگ: #fff؛ متن-تزیین: هیچکدام؛ )

به طور معمول، زمانی که ماوس را روی یک پیوند یا دکمه قرار می‌دهد، کاربر انتظار یک اثر نسبتاً ملایم را دارد. و در مورد ما، دکمه اندازه را تغییر می دهد - افزایش می یابد و یک پیام اضافی نشان می دهد.

کد اصلی CSS

برای شروع، فقط باید به دکمه شکل و رنگ بدهیم. ارتفاع 28 پیکسل و عرض 115 پیکسل را تعریف کنید، حاشیه ها و بالشتک ها را اضافه کنید و همچنین به دکمه یک حاشیه روشن بدهید.

#button1 (پس‌زمینه: #6292c2؛ حاشیه: 2px توپر #eee؛ ارتفاع: 28px؛ عرض: 115px؛ حاشیه: 50px 0 0 0 50px؛ بالشتک: 0 0 0 7px؛ سرریز: پنهان؛ نمایش: بلوک؛ )

جلوه های CSS3

برخی از مردم آن را دوست دارند که یک دکمه ساده با مقدار زیادی کد CSS همراه باشد. این بخش استایل های اضافی CSS3 را برای دکمه ما ارائه می دهد. شما می توانید بدون آنها کار کنید، اما آنها ظاهر مدرن تری به دکمه می دهند.

گوشه های قاب را گرد کنید و یک گرادیان اضافه کنید. این از یک ترفند کوچک با یک گرادیان تیره استفاده می کند که با هر رنگ پس زمینه تعامل دارد.

/*گوشه های گرد*/ -webkit-border-radius: 15px; -moz-border-radius: 15px. شعاع مرزی: 15 پیکسل. /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

انیمیشن CSS

اکنون اجازه دهید انتقال CSS را تنظیم کنیم. این انیمیشن برای هر گونه تغییر ویژگی استفاده می شود و نیم ثانیه طول می کشد.

ماوس بر

تنها چیزی که باقی می‌ماند این است که وقتی ماوس را روی آن قرار می‌دهید، یک سبک برای گسترش دکمه اضافه کنید. دکمه باید 230 پیکسل عرض داشته باشد تا کل پیام نمایش داده شود.

#button1: شناور (عرض: 230 پیکسل؛ )

تغییر ساده تن رنگ

یک افکت CSS بسیار ساده و محبوب برای یک دکمه. وقتی نشانگر ماوس را نگه می‌دارید، لحن رنگ پس‌زمینه به آرامی تغییر می‌کند.

کد اصلی CSS

کد CSS بسیار شبیه به مثال قبلی است. رنگ زمینه متفاوتی استفاده شده و شکل کمی تغییر کرده است. همچنین متن را در مرکز قرار می دهد و ارتفاع خط را برای دکمه تنظیم می کند تا مرکز عمودی رخ دهد.

#button2 ( پس‌زمینه: #d11717؛ حاشیه: 2 پیکسل توپر #eee؛ ارتفاع: 38 پیکسل؛ عرض: 125 پیکسل؛ حاشیه: 50 پیکسل 0 0 50 پیکسل؛ سرریز: پنهان؛ نمایش: بلوک؛ تراز نوشتار: مرکز؛ ارتفاع خط: 38 پیکسل. )

جلوه های CSS3

گرد کردن گوشه ها، یک گرادیان برای پس زمینه و یک سایه اضافی را تنظیم کنید. با استفاده از rgba سایه را سیاه و شفاف می کنیم.

/*گوشه های گرد*/ -webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع مرزی: 10 پیکسل. /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)). /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن عملا هیچ تفاوتی با مثال قبلی ندارد.

/*Transition*/ -webkit-transition: همه 0.5 ثانیه ease. -moz-transition: همه 0.5s ease. -o-transition: همه 0.5s ease. -ms-transition: همه 0.5s ease. انتقال: همه 0.5s سهولت.

ماوس بر

هنگامی که نشانگر ماوس را نگه می دارید، رنگ پس زمینه متفاوتی تنظیم می شود. برای جلوه ی عالی، گزینه رنگ روشن تری را در فتوشاپ انتخاب کنید.

#button2:hover (رنگ پس‌زمینه: #ff3434؛ )

این افکت بسته به انتخاب تصویر پس زمینه می تواند کاملاً چشمگیر باشد. نسخه ی نمایشی از پس زمینه ی غیر توصیفی استفاده می کند و افکت غیر توصیفی به نظر می رسد. سعی کنید از یک تصویر متفاوت استفاده کنید و اثر ممکن است خیره کننده باشد.

کد اصلی CSS

قسمت اصلی کد مانند نمونه های قبلی است. لطفا توجه داشته باشید که ما از یک تصویر پس زمینه استفاده می کنیم. موقعیت پس زمینه اولیه روی "0 0" تنظیم شده است. وقتی مکان نما را نگه می دارید، موقعیت به صورت عمودی تغییر می کند.

#button3 ( پس‌زمینه: #d11717 url("bkg-1.jpg")؛ موقعیت پس‌زمینه: 0 0؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع : 58px عرض: 0 0 50px;

جلوه های CSS3

هیچ چیز خاصی در این مثال وجود ندارد - گوشه ها و سایه های گرد.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; حاشیه-شعاع: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن این کیس برای ایجاد جلوه ای روان و جالب بیشتر دوام می آورد.

/*Transition*/ -webkit-transition: همه 0.8s ease. -moz-transition: همه 0.8s ease. -o-transition: همه 0.8s ease. -ms-transition: همه 0.8s ease. انتقال: همه 0.8s سهولت.

ماوس بر

اکنون زمان انتقال تصویر پس زمینه است. موقعیت شروع "0 0" بود. پارامتر دوم را روی 150px قرار دهید. برای جابجایی افقی، باید پارامتر اول را تغییر دهید.

#button3: شناور (موقعیت پس‌زمینه: 0px 150px؛ )

شبیه سازی فشار دکمه سه بعدی

آخرین مثال در درس ما در مورد روش رایج سه بعدی شبیه سازی فشار دادن دکمه هنگام قرار دادن نشانگر ماوس بر روی آن است. انیمیشن این مورد آنقدر ساده است که حتی نیازی به انتقال CSS ندارد. اما نتیجه نهایی کاملاً چشمگیر است.

کد اصلی CSS

کد CSS برای دکمه ما.

#button4 ( پس‌زمینه: #5c5c5c؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع: 58px؛ عرض: 155px؛ حاشیه: 50px 0 0 overflow 50px; نمایشگر: بلاک کردن متن: ارتفاع خط: 58 پیکسل;

جلوه های CSS3

در این مورد، CSS3 دیگر گزینه خوبی نیست. برای رسیدن به اثر، سایه ها و گرادیان مورد نیاز است. یک سایه تیز ظاهر یک دکمه سه بعدی را ایجاد می کند.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; حاشیه-شعاع: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8)؛ box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

ماوس بر

در این مورد ما بزرگترین بخش شناور را داریم. طول سایه کاهش می یابد و از حاشیه ها برای ایجاد ترکیبی از ناحیه تاریک استفاده می شود. همه با هم باعث ایجاد توهم فشار دادن یک دکمه می شود. چرخاندن گرادیان جلوه را افزایش می دهد.

#button4: شناور ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8)؛ -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); 0، 0)، rgba(0، 0، 0، 0.4)؛ تصویر پس زمینه: -moz-linear-gradient(پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4) ) تصویر پس زمینه: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4) 0، 0، 0.4))؛

قبل از اینکه به دکمه ها نگاه کنیم، اجازه دهید تنظیمات مشترک همه آنها را بررسی کنیم.

HTML

دکمه ها از کد HTML بسیار ساده استفاده می کنند:

اشتراک در

CSS

همچنین، همه دکمه‌ها تنظیمات مشترکی برای متن شرح و لغو انتخاب پیوندها خواهند داشت:

ButtonText ( فونت: 18px/1.5 Helvetica، Arial، sans-serif؛ رنگ: #fff; ) a (رنگ: #fff؛ متن-تزیین: هیچکدام؛ )

به طور معمول، زمانی که ماوس را روی یک پیوند یا دکمه قرار می‌دهد، کاربر انتظار یک اثر نسبتاً ملایم را دارد. و در مورد ما، دکمه اندازه را تغییر می دهد - افزایش می یابد و یک پیام اضافی نشان می دهد.

کد اصلی CSS

برای شروع، فقط باید به دکمه شکل و رنگ بدهیم. ارتفاع 28 پیکسل و عرض 115 پیکسل را تعریف کنید، حاشیه ها و بالشتک ها را اضافه کنید و همچنین به دکمه یک حاشیه روشن بدهید.

#button1 (پس‌زمینه: #6292c2؛ حاشیه: 2px توپر #eee؛ ارتفاع: 28px؛ عرض: 115px؛ حاشیه: 50px 0 0 0 50px؛ بالشتک: 0 0 0 7px؛ سرریز: پنهان؛ نمایش: بلوک؛ )

جلوه های CSS3

برخی از مردم آن را دوست دارند که یک دکمه ساده با مقدار زیادی کد CSS همراه باشد. این بخش استایل های اضافی CSS3 را برای دکمه ما ارائه می دهد. شما می توانید بدون آنها کار کنید، اما آنها ظاهر مدرن تری به دکمه می دهند.

گوشه های قاب را گرد کنید و یک گرادیان اضافه کنید. این از یک ترفند کوچک با یک گرادیان تیره استفاده می کند که با هر رنگ پس زمینه تعامل دارد.

/*گوشه های گرد*/ -webkit-border-radius: 15px; -moz-border-radius: 15px. شعاع مرزی: 15 پیکسل. /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

انیمیشن CSS

اکنون اجازه دهید انتقال CSS را تنظیم کنیم. این انیمیشن برای هر گونه تغییر ویژگی استفاده می شود و نیم ثانیه طول می کشد.

ماوس بر

تنها چیزی که باقی می‌ماند این است که وقتی ماوس را روی آن قرار می‌دهید، یک سبک برای گسترش دکمه اضافه کنید. دکمه باید 230 پیکسل عرض داشته باشد تا کل پیام نمایش داده شود.

#button1: شناور (عرض: 230 پیکسل؛ )

تغییر ساده تن رنگ

یک افکت CSS بسیار ساده و محبوب برای یک دکمه. وقتی نشانگر ماوس را نگه می‌دارید، لحن رنگ پس‌زمینه به آرامی تغییر می‌کند.

کد اصلی CSS

کد CSS بسیار شبیه به مثال قبلی است. رنگ زمینه متفاوتی استفاده شده و شکل کمی تغییر کرده است. همچنین متن را در مرکز قرار می دهد و ارتفاع خط را برای دکمه تنظیم می کند تا مرکز عمودی رخ دهد.

#button2 ( پس‌زمینه: #d11717؛ حاشیه: 2 پیکسل توپر #eee؛ ارتفاع: 38 پیکسل؛ عرض: 125 پیکسل؛ حاشیه: 50 پیکسل 0 0 50 پیکسل؛ سرریز: پنهان؛ نمایش: بلوک؛ تراز نوشتار: مرکز؛ ارتفاع خط: 38 پیکسل. )

جلوه های CSS3

گرد کردن گوشه ها، یک گرادیان برای پس زمینه و یک سایه اضافی را تنظیم کنید. با استفاده از rgba سایه را سیاه و شفاف می کنیم.

/*گوشه های گرد*/ -webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع مرزی: 10 پیکسل. /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)). /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن عملا هیچ تفاوتی با مثال قبلی ندارد.

/*Transition*/ -webkit-transition: همه 0.5 ثانیه ease. -moz-transition: همه 0.5s ease. -o-transition: همه 0.5s ease. -ms-transition: همه 0.5s ease. انتقال: همه 0.5s سهولت.

ماوس بر

هنگامی که نشانگر ماوس را نگه می دارید، رنگ پس زمینه متفاوتی تنظیم می شود. برای جلوه ی عالی، گزینه رنگ روشن تری را در فتوشاپ انتخاب کنید.

#button2:hover (رنگ پس‌زمینه: #ff3434؛ )

این افکت بسته به انتخاب تصویر پس زمینه می تواند کاملاً چشمگیر باشد. نسخه ی نمایشی از پس زمینه ی غیر توصیفی استفاده می کند و افکت غیر توصیفی به نظر می رسد. سعی کنید از یک تصویر متفاوت استفاده کنید و اثر ممکن است خیره کننده باشد.

کد اصلی CSS

قسمت اصلی کد مانند نمونه های قبلی است. لطفا توجه داشته باشید که ما از یک تصویر پس زمینه استفاده می کنیم. موقعیت پس زمینه اولیه روی "0 0" تنظیم شده است. وقتی مکان نما را نگه می دارید، موقعیت به صورت عمودی تغییر می کند.

#button3 ( پس‌زمینه: #d11717 url("bkg-1.jpg")؛ موقعیت پس‌زمینه: 0 0؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع : 58px عرض: 0 0 50px;

جلوه های CSS3

هیچ چیز خاصی در این مثال وجود ندارد - گوشه ها و سایه های گرد.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; حاشیه-شعاع: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن این کیس برای ایجاد جلوه ای روان و جالب بیشتر دوام می آورد.

/*Transition*/ -webkit-transition: همه 0.8s ease. -moz-transition: همه 0.8s ease. -o-transition: همه 0.8s ease. -ms-transition: همه 0.8s ease. انتقال: همه 0.8s سهولت.

ماوس بر

اکنون زمان انتقال تصویر پس زمینه است. موقعیت شروع "0 0" بود. پارامتر دوم را روی 150px قرار دهید. برای جابجایی افقی، باید پارامتر اول را تغییر دهید.

#button3: شناور (موقعیت پس‌زمینه: 0px 150px؛ )

شبیه سازی فشار دکمه سه بعدی

آخرین مثال در درس ما در مورد روش رایج سه بعدی شبیه سازی فشار دادن دکمه هنگام قرار دادن نشانگر ماوس بر روی آن است. انیمیشن این مورد آنقدر ساده است که حتی نیازی به انتقال CSS ندارد. اما نتیجه نهایی کاملاً چشمگیر است.

کد اصلی CSS

کد CSS برای دکمه ما.

#button4 ( پس‌زمینه: #5c5c5c؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع: 58px؛ عرض: 155px؛ حاشیه: 50px 0 0 overflow 50px; نمایشگر: بلاک کردن متن: ارتفاع خط: 58 پیکسل;

جلوه های CSS3

در این مورد، CSS3 دیگر گزینه خوبی نیست. برای رسیدن به اثر، سایه ها و گرادیان مورد نیاز است. یک سایه تیز ظاهر یک دکمه سه بعدی را ایجاد می کند.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; حاشیه-شعاع: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8)؛ box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

ماوس بر

در این مورد ما بزرگترین بخش شناور را داریم. طول سایه کاهش می یابد و از حاشیه ها برای ایجاد ترکیبی از ناحیه تاریک استفاده می شود. همه با هم باعث ایجاد توهم فشار دادن یک دکمه می شود. چرخاندن گرادیان جلوه را افزایش می دهد.

#button4: شناور ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8)؛ -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); 0، 0)، rgba(0، 0، 0، 0.4)؛ تصویر پس زمینه: -moz-linear-gradient(پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4) ) تصویر پس زمینه: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4) 0، 0، 0.4))؛

ولاد مرژویچ

دکمه های استاندارد ایجاد شده از طریق برچسب

خیلی خوب به نظر می رسد (شکل 3)، اما تفاوت های آشکاری نیز با دکمه اصلی وجود دارد - به نظر صاف، مانند یک تخته است.

برنج. 3. نمای دکمه با گرادیان

می توانید دوباره با استفاده از یک گرادیان دکمه ای به شکل دلخواه بسازید و با رنگ ها "بازی" کنید. خوشبختانه دو مقدار گرادیان دیگر کافی نیست، فایرفاکس و سافاری راه حلی ارائه می دهند.

پس زمینه: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

به جای دو مقدار، تعداد مورد نظر رنگ را وارد کنید، گرادیان به آرامی از یک رنگ به رنگ دیگر منتقل می شود.

کروم، سافاری

پس زمینه: -webkit-gradient(خطی، 0 0، 0 100٪، از(#D0ECF4)، به (#D0ECF4)، توقف رنگ (0.5، #5BC9E1));

پارامتر color-stop نقطه ای را که رنگ جدید اعمال می شود را مشخص می کند. مقدار از 0 تا 1 متغیر است.

مثال 2: دکمه هایی با گرادیان افزایش یافته

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

دکمه ها

نتیجه مثال در شکل نشان داده شده است. 4.

برنج. 4. گرادیان، چه نوع گرادیان مورد نیاز است

به طور مشابه، می توانید هر شیب دیگری را روی یک دکمه یا عنصر دیگر ایجاد کنید (شکل 5). اما این کار را خودتان انجام دهید، به همین دلیل آن را به کارگاه اضافه کردم.

برنج. 5. چنین دکمه های مختلف

بگذارید خلاصه کنم. می توانید دکمه ای با شیب و گوشه های گرد بدون تصویر بسازید. با این حال، سردرگمی و نوسانی در مورد مرورگرها وجود دارد. اپرا به هیچ وجه نمی تواند با شیب ها کار کند در IE 9 یک اشکال ناخوشایند هنگام ترکیب یک گرادیان با گوشه ها وجود دارد (شکل 6).

برنج. 6. پس زمینه روی گوشه ها در IE 9 قرار دهید

خوب، در حال حاضر ما برای مرورگرهای فایرفاکس، سافاری و کروم "زیبایی" ایجاد خواهیم کرد.

درود به همه کسانی که این نشریه را می خوانند! در مقاله امروز به یکی از سوالات متداول پاسخ خواهم داد: "چگونه یک دکمه سه بعدی با استفاده از ابزارهای CSS ایجاد می شود؟" این موضوع آسان نیست، بنابراین به شما توصیه می کنم مطالب نظری و عملی ارائه شده در زیر را با دقت مطالعه کنید.

پس از خواندن مقاله، نه تنها یاد خواهید گرفت که از چه برچسب ها و ویژگی های زبان های وب برای ایجاد دکمه در یک صفحه آنلاین استفاده کنید، بلکه در بخش های عمیق تر CSS نیز فرو خواهید رفت. منظور من شبه کلاس ها و افکت های دینامیکی مختلف است. علاوه بر این، شما می توانید برنامه های خود را بر اساس مثال های من ایجاد کنید. پس بیایید شروع کنیم!

ابزارهای اصلی ایجاد دکمه

دو تگ در زبان نشانه گذاری وجود دارد که می توان از آنها برای ایجاد دکمه در یک وب سایت استفاده کرد. این < دکمه>و برای شما آشنا < ورودی>.

مشترکین من که نشریات قبلی را مطالعه کردند و همچنین کسانی که کمی با عنصر کار کردند < ورودی>، آنها می دانند که این ابزار به شما امکان می دهد نه تنها دکمه ها، بلکه سایر اشیاء سفارشی را نیز ایجاد کنید. به عنوان مثال، فیلدهای متنی، لیست ها، دکمه های رادیویی و غیره. همه اینها به لطف ویژگی اتفاق می افتد نوع.

تگ دوم است < دکمه>. اساساً به همان روشی که عنصر توضیح داده شده در بالا کار می کند. پسندیدن < ورودی>, < دکمه>باید داخل ظرف قرار گیرد < فرم>. دکمه ای که در این دکمه ایجاد نشده است به درستی نمایش داده می شود، اما اطلاعات را به سرور منتقل نمی کند.

با این حال، این برچسب تفاوت هایی دارد. بنابراین، < دکمه>به توسعه دهندگان گزینه های بیشتری برای قالب بندی و استایل دادن به دکمه هایی که ایجاد می کنند ارائه می دهد.

برای وضوح، در زیر نمونه‌ای از اجرای نرم‌افزار عناصر توصیف‌شده را پیوست کرده‌ام:

مثال 1

این "شبه طبقات" چیست؟

هنگام اجرای مثال اول، دکمه‌های صورتی کاملاً یکسان در پنجره نمایش داده می‌شوند که تنها تفاوت آن در یک کلمه بود. مرحله اول و مهم به پایان رسیده است. شما یاد گرفته اید که چگونه دکمه ها را در صفحات وب سایت قرار دهید.

با این حال، باید اعتراف کنید که در این شکل جالب نیستند و خیلی معمولی هستند. به همین دلیل است که ما شروع به تسلط بر شبه کلاس ها خواهیم کرد.

شبه طبقاتمسئول رفتار پویا اشیاء تعریف شده در منابع وب هستند. فکر می کنم هر یک از شما متوجه شده اید که چگونه وقتی مکان نما را روی یک پیوند یا قسمتی نگه می دارید، آنها تغییر می کنند. پس این عمل شبه طبقات است.

برای تعریف این نوع رفتار، از ":" و سپس نام وضعیت شی استفاده کنید.

به ظاهر کلی تبلیغ توجه کنید:

انتخابگر (به عنوان مثال عنصر): شبه کلاس (تعریف ویژگی های سبک)

مکانیسم توصیف شده را می توان اعمال کرد:

  • به شناسه های استاندارد: الف: شناور( text-shadow: 0 -1px 9px blue;);
  • به انتخابگرهایی که مقداردهی اولیه کردید: #aa:تمرکز( رنگ آبی؛).

تمام شبه کلاس‌های موجود به 3 گروه تقسیم می‌شوند که هر کدام مسئول زیر هستند:

  • وضعیت اشیاء (بازدید شده، شناور، پیوند، تمرکز، فعال)؛
  • عناصر کودک (فرزند اول)؛
  • زبان محتوای متن (زبان).

از آنجایی که انتشار مربوط به دکمه های پویا حجمی است، من در مورد برخی از عناصر گروه مسئول وضعیت اشیا صحبت خواهم کرد.

نمونه هایی از دکمه های غیر معمول

من هر آنچه را که در تئوری نیاز دارید به شما گفته ام و حالا بیایید به تمرین بپردازیم. من می خواهم 2 راه حل جالب برای ارائه دکمه ها را نشان دهم.

این برنامه یک دکمه متحرک سه بعدی ایجاد می کند که با کلیک بر روی آن دکمه دوم به دلیل خاصیت "فشرده" می شود. تبدیل.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 مثال 2

مثال 2

من می خواهم به این نکته توجه کنم < دکمه>همچنین از نمایش تصویر پشتیبانی می کند. بنابراین مثال زیر را بر اساس مثال قبلی با اضافه کردن چند نکته نوشتم.

  1. اعلان دکمه به رشته تغییر کرده است ;
  2. موارد زیر به نشانه گذاری سبک اضافه شده است:
    1 2 3 4 5 6 7 8 9 img (نمایش: بلوک؛ عرض: 200 پیکسل؛ ارتفاع: 70 پیکسل؛ شناور: سمت چپ؛ ) p ( padding-top: 10px؛ );

    img (نمایش: بلوک؛ عرض: 200 پیکسل؛ ارتفاع: 70 پیکسل؛ شناور: سمت چپ؛ ) p ( padding-top: 10px؛ );

بهترین مقالات در این زمینه

یک دستور چگونه به نظر می رسد رویه درخواست تجدید نظر برای دستورات
یک دستور چگونه به نظر می رسد رویه درخواست تجدید نظر برای دستورات
کار در خانه با کامپیوتر: بررسی ها
کار در خانه با کامپیوتر: بررسی ها
ما به دنبال راه ایده آل برای تبلیغ یک گروه در تماس هستیم
ما به دنبال راه ایده آل برای تبلیغ یک گروه در تماس هستیم
دسته بندی ها:
© 2024 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی