سلام و احترام خدمت تمامی دوستان گل
اسکینکی
بعضی از دوستانم در رابطه با ساخت
بکگراند شیشه ای یا ساخت گرادینت از من سوال کردن و منم تصمیم گرفتم که این پست رو بذارم تا شاید مشکلشون حل شد
در این پست ما به شما عزیزان
آموزش میدیم که چطوری به ساده ترین شکل و بدون نیاز به عکس یک
بکگراند شیشه ای یا گرادینت در css ایجاد کنید
خوب میپردازیم به
آموزشمون
اول از همه نیاز به یک ادیتور برای تست
کد داریم میتونید از ادیتور زیر استفاده کنید
www.tools.skinak.ir/tools/HTML-editor
خوب اول از همه چیزی که میخوایم همراه هم بسازیم رو
کدش رو قرار میدم و تستش کنید ببینید چطوری هست تا
آموزش رو ادامه بدیم
خوب میبینید که ما در
کد ها یک
داریم که در اون
استایلمون رو قرار میدیم
از خط یک تا سه برای پس زمینه body صفحه
رنگی رو مشخص کردیم
خوب حالا میرسیم به
استایل کلاس ddfd
ما در اینجا برای این کلاس یک عرض که برابر با 200 پیکسل هست رو قرار دادیم به همراه ارتفاع 200 پیکسل و همچنین براش یک
padding
50 پیکسلی قرار دادیم
خوب تا اینجاش مربوط به آموزش ما نمیشد در بخش
استایل ها چهار خط
کد هست که برای مشخص کردن
بکگراند از اونها استفاده کردیم منظورم اینا هست
از اول خطش توضیح میدم تا به جلو
میبینید که برای کلاس ddfd یک خاصیت
background:
ایجاد کردیم و داخل اون
قرار دادیم اگر بخوایم بکگراند ما ساده باشه (یعنی گرادینت نباشه) میتونیم به جای
فقط یک کد
رنگ قرار بدیم مثلا
#ddd
حالا شاید بخواید که این بکگراند به صورت شیشه ای قرار بگیره و پشت اون دیده بشه برای انکار لازمه که از
rgba
استفاده کنیم اول باید
ابزاری پیدا کنیم که بتونیم کد
رنگمون رو به rgba تغییر بدیم
برای اینکار میتونید از سایت زیر استفاده کنید
hex.colorrrs.com
برای تبدیل کد
رنگمون به rgb باید در قسمت hex کد
رنگ رو وارد کنیم و در قسمت rgb کد rgb رنگمون رو برداریم
حالا این کد rgb رو کپی کنید و به جای
#ddd
در
استایل برای بکگراند قرار بدید میبینید که هیچ تفاوتی با قبل نکرد و همون رنگ هست
(مثال کار تا به اینجا)
برای اینکه بتونیم بکگراند رو شیشه ای کنیم باید rgb رو به rgba تغییر بدیم برای اینکار تنها لازم هست کد بالا رو به شکل زیر تغییر بدید
حال اگر کد بالا رو قرار بدید میبیند بکگراندمون به صورت شیشه ای هست و میزان شفافیت اون 0.5 هست
اگر در کد بالا دقت کنید مبینید rgb به rgba تغییر کرده و یک مقدار دیگه که میزان شفافیت رو مشخص میکنه به آخر خط اضافه شده(منظورم این هست ,0.5)
حالا شما اگر 0.5 رو به 1 تغییر بدید میبینید حالت شیشه ای خودشو از دست میده و اگر اون رو به 0 تغییر بدید میبینید رنگی نداره و بی رنگ میشه
البته میتونید برای راحتی کار از سایت زیر هم استفاده کنید
hex2rgba.devoth.com
طریقه استفاده از این سایت
در قسمت
HEX value (e.g. #f00, #812dd3, ba3, F924A4, red)
باید کد رنگمون رو قار بدیم مثلا من
#ddd
رو قرار میدم
در قسمت
Opacity
میزان شفافیت رو از یک تا صد مشخص میکنید مثلا من روی 55 قرار میدم
حالا روی
HEX 2 RGB(A)
کلیک کنید میبینید در دو کادر کنارش دو نوع کد وجود داره کد اولی rgb هست که به هیچ وجه شفافیتش تغییر نکرده و کادر دوم یعنی
RGBA for CSS
کد rgba هست که میزان شفافیتش رو برابر با 0.55 قرار داده
تا اینجا فهمیدیم که چطوری یک بکگراند شیشه ای بسازیم حالا شاید بخواید یک چیزی بسازید که سمت چپش سبز باشه و هر چی به سمت راست میاد بدون رنگ بشه
برای اینکار باید از گرادینت و rgba استفاده کنیم
به طور کلی ساختار ساخت گرادینت این شکلی هست
که در قسمت اول گفتیم گرادینت از سمت چپ به راست کشیده بشه که شما میتونید اونو برابر با هر چیزی قرار بدید مثلا
right
top
که با right میتونیم کاری کنی از سمت راست به چپ کشیده بشه و با top از بالا به پایین
حالا میرسیم به قسمت کد رنگ ها که ما دو کد رنگ قرار دادیم یعنی
که شما میتونید تعداد اونو بیشتر کنید
اگر به کد دقت کنید میبینید که مقدار اول شفافیت یا Opacity برابر 1 هست و کد دوم برابر 0
که داریم میگیم هر چی از سمت چپ به راست گرادینت کشیده شد رنگ از بین بره
البته اگر کد بالا رو شما در مرورگرهایی مثل کروم قرار بدید قبول نمیکنه(پشتیبانی نمیکنه)
برای اینکه بتونه اونو اجرا کنه لازم هست که کد رو به این شکل قرار بدیم
و همچنبن لرای موزیلا و اپرا
عذرخواهی مکنم بابت طولانی بودن پست خیلی وقت بود آموزش قرار نداده بودم برا همین طولانی شد:دی
منتظر نظراتتون هستم