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

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

HTML

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

اشتراک در

CSS

همچنین تمام دکمه ها خواهد بود تنظیمات عمومیبرای متن زیرنویس و لغو انتخاب پیوندها:

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

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

کد اصلی CSS

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

#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.5s 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؛ ارتفاع : 58 پیکسل؛ عرض: 155 پیکسل؛ حاشیه: 50 پیکسل 0 0 50 پیکسل؛ سرریز: پنهان؛ نمایش: بلوک؛ تراز نوشتاری: مرکز؛ ارتفاع خط: 58 پیکسل؛ )

جلوه های 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 over 50px; ؛ نمایش: بلوک؛ تراز متن: مرکز؛ ارتفاع خط: 58 پیکسل؛ )

جلوه های CSS3

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

/*گوشه های گرد*/ -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؛ box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8)؛ /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس‌زمینه: -moz-linear-gradient (پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4 ))؛ تصویر پس‌زمینه: -o-خطی-gradient(پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس‌زمینه: -ms-linear-gradient( پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس‌زمینه: گرادیان خطی (پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4)))

بدون شک CSS یکی از مهم ترین زبان های نشانه گذاری است که ما استفاده می کنیم. و اگرچه HTML ساختار یک سند را توصیف می کند، بسته به نسخه مرورگر، رفتار آن می تواند غیرقابل پیش بینی باشد. CSS ابزاری است که به ما امکان می دهد تمام ناهماهنگی ها را در نمایش صفحه اصلاح کنیم و همچنین ظاهر آن را طراحی کنیم.

مخفی کردن متن با استفاده از یک پاراگراف

این تکنیک برای لوگوی شرکت بسیار مفید خواهد بود. اغلب از یک عکس به عنوان لوگو استفاده می شود، اما برای SEO، نمایش نام شرکت در تگ های h1 خوب است. این مثال- اکثر بهترین راهاین را اجرا کنید در واقع، ما به سادگی متن را در خارج از صفحه پنهان می کنیم و به جای آن تخصیص می دهیم تصویر پس زمینه.

H1 (تورفتگی نوشتاری:-9999 پیکسل؛ حاشیه: 0 خودکار؛ عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: آدرس اینترنتی شفاف ("images/logo.jpg") اسکرول بدون تکرار؛ )

سبک کردن پیوندها بسته به فرمت فایل

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

/* پیوند خارجی */ a( padding-right: 20px; پس زمینه: url(external.gif) بدون تکرار در مرکز سمت راست؛ ) /* ایمیل */ a( padding-right: 20px; background: url(email.png ) بدون تکرار وسط سمت راست؛ ) /* فایل های pdf */ a( padding-right: 20px؛ پس زمینه: url(pdf.png) بدون تکرار وسط سمت راست؛ )

حذف نوارهای اسکرول از یک فیلد چند خطی در IE

اینترنت اکسپلورر عادت آزاردهنده ای برای اضافه کردن نوارهای اسکرول به یک فیلد چند خطی دارد، حتی زمانی که محتوای آن در اندازه مشخص شده باشد. این نقص را می توان به راحتی با خط کد زیر اصلاح کرد:

Textarea (سرریز: خودکار؛ )

نامه اولیه

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

P: حرف اول (نمایش: بلوک؛ حاشیه: 5 پیکسل 0 0 5 پیکسل؛ شناور: چپ؛ رنگ: #FF3366؛ اندازه قلم: 60 پیکسل؛ فونت-خانواده: گرجستان؛ )

شفافیت CSS

شفافیت یک ویژگی است که به طور متفاوتی به مرورگرهای مختلف اختصاص داده می شود. با قطعه کد زیر می توانید شفافیت را به یکباره به همه مرورگرها اختصاص دهید.

شفاف (فیلتر:آلفا(مادرمانی=50)؛ -moz-opacity:0.5؛ -khtml-opacity: 0.5؛ opacity: 0.5؛ )

بازنشانی CSS توسط اریک مایر

در واقع، css-reset که توسط اریک مایر پیشنهاد شده است، در حال حاضر به یک استاندارد استفاده گسترده تبدیل شده است. از آنجایی که توسط بسیاری از توسعه دهندگان معروف اقتباس شده است، می توانید از کیفیت آن مطمئن باشید.

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, big, cite, code, del, dfn, em، فونت، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، زیر، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلد، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td ( حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ طرح کلی: 0؛ اندازه قلم: 100٪؛ تراز عمودی : خط مبنا؛ پس‌زمینه: شفاف؛ ) بدن (ارتفاع خط: 1؛ ) ol، ul (لیست-سبک: هیچکدام؛) نقل قول بلوک، q ( نقل قول: هیچ‌کدام؛ ) نقل قول:قبل، بلوک:بعد، q:قبل، q :after ( محتوا: ""؛ محتوا: هیچ؛ ) /* به یاد داشته باشید که سبک های فوکوس را تعریف کنید! */ :focus ( طرح کلی: 0; ) /* به یاد داشته باشید که درج ها را به نحوی برجسته کنید! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* جداول همچنان به "cellspacing="0"" در نشانه گذاری */ جدول نیاز دارند ( border-collapse: collapse; border-spacing : 0;)

پیش بارگذاری کننده تصویر

گاهی اوقات مفید است که تصاویر خود را از قبل بارگذاری کنید تا در هنگام دسترسی به عنصر مورد نظر، تاخیر و سوسو زدن از بین برود.

Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat؛ حاشیه سمت چپ: -10000 پیکسل؛ )

css sprite ساده برای یک دکمه

در دسترس بودن یک دکمه یا پیوند با تصویر پس زمینه- یک چیز رایج، علاوه بر این، چنین عناصری اغلب اعمال می شوند اثرات اضافی، بهبود رابط کاربری. یکی از این افکت ها نشانگر ماوس روی دکمه است. با استفاده از sprite، می‌توانیم این افکت را با تغییر خاصیت background-positon به یک مقدار مشخص، پیاده‌سازی کنیم تا زمانی که ماوس روی دکمه قرار می‌گیرد، تصویر پس‌زمینه نمایش داده شود. یک راه حل ساده اما موثر.

A (نمایش: بلوک؛ پس‌زمینه: url (sprite.png) بدون تکرار؛ ارتفاع: 30 پیکسل؛ عرض: 250 پیکسل؛ ) a: شناور (موقعیت پس‌زمینه: 0 -30 پیکسل؛ )

Google Font API

چندی پیش، گوگل منبع فوق العاده ای را برای توسعه دهندگان وب پیاده سازی کرد که به آنها اجازه می دهد فونت های جدید و غیر استاندارد را دانلود کرده و در صفحه استفاده کنند. حتی گزینه های مختلف فونت برای دانلود وجود دارد، بولد، ایتالیک و غیره. اگرچه مجموعه گوگل هنوز محدود است، اما تعداد نسبتا زیادی فونت در دسترس است. ابتدا یک فایل CSS تولید شده به صورت پویا با نام فونت ها و تغییرات مورد نیاز خود اضافه کنید و سپس طبق معمول از نام فونت ها در CSS استفاده کنید. اطلاعات تکمیلیمی توانید آن را با استفاده از Google Font API بخوانید.

Inconsolata:italic|Droid+Sans"> بدنه (فونت-خانواده: "Tangerine"، "Inconsolata"، "Droid Sans"، سریف؛ اندازه فونت: 48px؛ )

هک برای مرورگرهای مختلف

گاهی اوقات رفع اشکال در یک مرورگر خاص مفید است و نظرات مشروط همیشه اینطور نیستند بهترین راه حلبرای این. این لیست از هک‌های مرورگر کریس کویر به شما کمک می‌کند تا با استفاده از css ساده، ویژگی‌ها را به مرورگرهای خاص اختصاص دهید.

/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 و مرورگرهای مدرن */ html>body .yourclass ( ) /* مرورگرهای مدرن (نه IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 و پایین تر */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+، Opera 9+، Fx 3.5+ */ body:nth-of-type(1).yourclass ( ) /* Safari 3+، Chrome 1+، Opera 9+، Fx 3.5+ */ body:first -of-type .yourclass ( ) /* Safari 3+، Chrome 1+ */ @media screen و (-webkit-min-device-pixel-ratio:0) (.yourclass ( ))

زیرزمین ثابت

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

#footer ( موقعیت: ثابت؛ چپ: 0 پیکسل؛ پایین: 0 پیکسل؛ ارتفاع: 30 پیکسل؛ عرض: 100 درصد؛ پس‌زمینه: # 999؛ ) /* IE 6 */ * html #footer ( موقعیت: مطلق؛ بالا: بیان (( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop) +"px"))

یک تصویر را بچرخانید

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

Img.flip ( -moz-transform: scaleX(-1)؛ -o-transform: scaleX(-1)؛ -webkit-transform: scaleX(-1); transform: scaleX(-1); فیلتر: FlipH؛ - ms-filter: "FlipH"؛ )

روشن کنید

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

Clearfix:after ( مشاهده: پنهان؛ نمایش: بلوک؛ اندازه فونت: 0؛ محتوا: " "؛ پاک: هر دو؛ ارتفاع: 0؛ ) .clearfix (نمایش: inline-block;) /* شروع هک بک اسلش نظر داده شده */ * html .clearfix ( ارتفاع: 1%; ) .clearfix (نمایش: بلوک؛) /* بستن هک بک اسلش نظر داده شده */

گوشه های گرد

با پذیرش تدریجی CSS3 در مرورگرهای مدرن، ایجاد گوشه های گردخیلی ساده شد متأسفانه هنوز در IE از جمله نسخه 8 از CSS3 پشتیبانی نمی شود، اما در IE9 اضافه خواهد شد.

Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* تصحیح آینده */ -khtml-border-radius: 10px; /* برای مرورگرهای قدیمی Konqueror */ )

سبک های برتر

افرادی که در مورد !important در CSS نمی دانند همچنان مرا شگفت زده می کنند، زیرا این ابزار بسیار قدرتمند و آسان برای استفاده است. خیلی ساده، هر قانون با !important در پایان، همان قانون اعمال شده بر آن عنصر را در هر نقطه از فایل CSS یا در سبک های خط لغو می کند.

P (اندازه قلم: 20 پیکسل !مهم؛ )

صورت قلم

Font-face تا سال گذشته به طور گسترده مورد استفاده قرار نمی گرفت، اگرچه از روزهایی که IE6 یک مرورگر مدرن به حساب می آمد، وجود داشت. این ویژگی اکنون به خوبی توسط مرورگرهای مدرن پشتیبانی می شود و راه بسیار خوبی برای استفاده از فونت های ناامن در پروژه های شما ارائه می دهد. برای صرفه جویی در زمان، می توانید از یک Font Squirrel Font Face generator مخصوص استفاده کنید.

@font-face ( font-family: "Graublau Web"؛ src: url("GraublauWeb.eot")؛ src: local("☺")، url("GraublauWeb.woff") قالب ("woff") url ("GraublauWeb.ttf") قالب ("truetype")؛ )

مرکز کردن سایت

یک تکنیک رایج طراحی، مرکز افقی سایت است. این بسیار آسان برای پیاده سازی است.

حداقل ارتفاع در IE

این مثال یک باگ ساده اما آزاردهنده در IE را هنگام تنظیم حداقل ارتفاع برطرف می کند. به طور کلی، IE ارتفاع را به عنوان حداقل ارتفاع تفسیر می کند، بنابراین اگر IE ارتفاع را روی خودکار تنظیم نکرده باشد، ترفند زیر این اشکال را برطرف می کند.

جعبه ( حداقل ارتفاع: 500 پیکسل؛ ارتفاع: خودکار !مهم؛ ارتفاع: 500 پیکسل؛ )

در حال آپلود یک عکس

این افکت بارگذاری تصویر بارگذاری ajax را با نمایش یک پیش بارگذاری تا زمانی که تمام محتوا بارگذاری شود شبیه سازی می کند. این راه حل برای تصاویر بزرگ و کم بارگذاری عالی است.

Img ( پس زمینه: url(loader.gif) بدون تکرار 50% 50%؛ )

مرکز عمودی

این قطعه کوچک کد به شما این امکان را می دهد که محتویات یک کانتینر را به صورت عمودی وسط قرار دهید، بدون استفاده از هیچ نشانه گذاری اضافی. تنها کاری که باید انجام دهید این است که کانتینر را به عنوان سلول جدول رندر کنید و سپس ویژگی vertical-align را روی یک مقدار تنظیم کنید.

کانتینر ( ارتفاع حداقل: 10 میلی متر؛ نمایشگر: سلول جدول؛ تراز عمودی: وسط؛ )

ایجاد برش

ابتدا بیایید بفهمیم که کات در چیست؟ ستون‌های کناری معمولاً در منابع خبری و سایت‌های مجلات، به شکل یک بلوک متنی کوچک در داخل مقاله یافت می‌شوند، گاهی اوقات حاوی نظرات یا نقل قول‌های افراد هستند. خوشحال می شوید که بدانید آنها بسیار آسان ساخته می شوند و ... استفاده صحیح، جاسازی ها می توانند تجربه کاربری یک مقاله را به میزان قابل توجهی بهبود بخشند.

نقل قول (عرض: 300 پیکسل؛ شناور: راست؛ حاشیه: 5 پیکسل؛ فونت خانواده: جورجیا، " بار جدید Roman"، Times، سریف؛ فونت: پررنگ #ff0000 ;)

انتخاب متن

همه نمی دانند که امکان تغییر رنگ متن انتخاب شده در مرورگر وجود دارد. این فقط به دو انتخابگر نیاز دارد.

::انتخاب ( رنگ: #000000; پس‌زمینه رنگ: #FF0000؛ ) ::-moz-selection ( رنگ: #000000؛ پس‌زمینه: #FF0000؛ )

اضافه کردن یک صفحه شکست

این مثال مجدداً با هدف بهبود رابط کاربری هنگام چاپ است. به عنوان مثال، هنگام چاپ یک مقاله، ممکن است مفید باشد که نظرات را از متن مقاله جدا کرده و به صفحه جداگانه منتقل کنید. اگر class.page-break را به یک بلوک نظرات اضافه کنید، پس از چاپ، همه نظرات در صفحه نمایش داده می شوند. صفحه جداگانه. به طور کلی این کلاس در هر جای سایت شما قابل استفاده است.

صفحه شکست ( صفحه-شکستن-قبل از: همیشه؛ )

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

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

نسخه کاری در وبلاگ آزمایشی در نوار کناری در پایین

چه خبر است

1. عکس پروفایل شما
2. طراحی زیباخود کارت که به راحتی قابل تنظیم است
3. نام مستعار، نام یا نام خانوادگی شما
4 می توانید شغل، سرگرمی خود را نشان دهید
5.افزودن 2 دکمه به صفحات مورد نیاز. اینها می توانند پیوندهایی به صفحه کامل نویسنده شما، به صفحه نخست، نقشه، کلاس های کارشناسی ارشد، صفحات عمومی در شبکه های اجتماعی. هر چیزی.
6. کارت کاملاً در نوار کناری وبلاگ قرار می گیرد.

کد زیر را کپی کنید تا کارت نمایه شما را بیشتر بسازیم.

" alt="profile" class="profile" />!}
ویکا باراد بلاگر
گروه وبلاگ من در VK

.snip1 (
font-family: "Roboto", Arial, sans-serif;
رنگ: #fff;
موقعیت: نسبی;
سرریز: پنهان;
حاشیه: 10 پیکسل؛
حداقل عرض: 230 پیکسل؛
حداکثر عرض: 315 پیکسل؛
عرض: 100%؛
رنگ: #ffffff;
text-align: left;
ارتفاع خط: 1.4em;
پس زمینه رنگ: #141414;
}
.snip1 * (
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: همه 0.25 ثانیه سهولت.
انتقال: همه 0.25 ثانیه سهولت.
}
.snip1 img (
حداکثر عرض: 100%؛
vertical-align: top;
Opacity: 0.85;
}
.snip1 figcaption (
عرض: 100%؛
پس زمینه رنگ: #141414;
padding: 25px;
موقعیت: نسبی;
}
.snip1 figcaption:before (
موقعیت: مطلق;
محتوا: ""؛
پایین: 100%؛
سمت چپ: 0;
عرض: 0;
ارتفاع: 0;
حاشیه به سبک: جامد;
عرض حاشیه: 55px 0 0 400px;
رنگ حاشیه: شفاف شفاف شفاف #141414;
}
.snip1 figcaption a (
padding: 5px;
حاشیه: 1px جامد #ffffff;
رنگ: #ffffff;
اندازه فونت: 0.7em;
تبدیل متن: بزرگ;
حاشیه: 10 پیکسل 0;
صفحه نمایش: inline-block;
Opacity: 0.65;
عرض: 47%;
text-align: center;
فونت-وزن: 600;
فاصله حروف: 1px;
text-decoration: هیچ;
}
.snip1 figcaption a:hover (
کدورت: 1;
}
.snip1 .profile (
شعاع مرزی: 50%;
موقعیت: مطلق;
پایین: 100%؛
سمت چپ: 25 پیکسل؛
z-index: 1;
حداکثر عرض: 90 پیکسل؛
کدورت: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow (
حاشیه-راست: 6%;
حاشیه-رنگ: #2980b9;
رنگ: #2980b9;
}
.snip1 h2 (
حاشیه: 0 0 5px;
فونت-وزن: 300;
}
.snip1 h2 span (
نمایش: بلوک؛
اندازه فونت: 0.5em;
رنگ: #2980b9;
}
.snip1 p (
حاشیه: 0 0 10 پیکسل؛
اندازه فونت: 0.8em;
فاصله حروف: 1px;
Opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before (
پایین: 0;
box-shadow: 0 0 0px سفید؛
-webkit-transition-delay: 0s;
انتقال-تاخیر: 0 ثانیه;
}

$(.hover").mouseleave(
تابع()(
$(this).removeClass("sover");
}
);

https://w-dog.ru/wallpapers/10/19/38092326977589.jpg - این آدرس عکس است - پس زمینه در بالا

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - آدرس تصویر کوچک شما. می‌توانید آن را در نمایه Google خود کپی کنید یا آواتار دیگری تنظیم کنید.

در خطوطی که با رنگ صورتی مشخص شده اند، نام مستعار، نام، شغل و متن توضیحی خود را بنویسید.

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

بک گراند اصلی کارت پروفایل رو هم چند جا با رنگ مشخص کردم #141414;

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

کد ویجت تمام شده را در قسمت نصب می کنیم DESIGN - ابزار HTML/JavaScriptدر نوار کناری وبلاگ به هر حال، من فکر می کنم زمانی که کاربر این فرصت را داشته باشد که فورا نویسنده را بشناسد، در بالای صفحه بد به نظر نمی رسد. پس زمینه و تصویر را می توان به راحتی بسته به حال و هوا یا زمان سال تغییر داد. همیشه جدید خواهد بود. خوب، این به شما بستگی دارد.

بهترین ها را آرزو می کنیم و موفق باشید.

این اولین بار نیست که متوجه می شوم هنگام استفاده از تبدیل های CSS، برخی از عناصر در یک صفحه در سافاری به طور مرموزی ویژگی های خود را تغییر می دهند. این اتفاق در سایر مرورگرها بسیار کمتر است.

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

Btn (transition: all .2s ease-in-out; ) .btn:hover (transform: scale(1.1);)

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

ترجمه سه بعدی

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

Webkit-transform: translate3d(0,0,0);

همین است، اما عصا است.

تغییر خواهد کرد

یک ویژگی نسبتاً جدید و هنوز کمتر شناخته شده در CSS به نام will-change وجود دارد که اطلاعاتی را از قبل در مورد تغییر احتمالی در یک عنصر به مرورگر ارائه می دهد. به عنوان مثال، اگر عنصری قرار است تبدیل شود، می توانید به مرورگر در این مورد هشدار دهید تا همانطور که می گویند در انرژی آن صرفه جویی شود. در مورد دکمه بالا، به صورت زیر است:

Btn (انتقال: همه .2s ease-in-out; will-change: transform;)

اگر قصد دارید چندین پارامتر را تغییر دهید، می توان آنها را به صورت متوالی و با کاما از هم جدا کرد. به عنوان مثال، برای یک تحول با تغییر شفافیت:

تغییر اراده: تبدیل، کدورت.

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

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