loading...
سرویس سایت سایت رزبلاگ بزرگترین سرویس ارائه خدمات سایت نویسی حرفه ای در ایران

قالب وردپرس, افزونه وردپرس

آموزش ساخت بکگراند شیشه ای و گرادینت در css   سلام و احترام خدمت تمامی دوستان گل اسکینکی بعضی از دوستانم در رابطه با ساخت بکگراند شیشه ای یا ساخت گرادینت از من سوال کردن و منم تصمیم گرفتم که این پست رو بذارم تا شاید مشکلشون حل شد در این پست ما به شما عزیزان آموزش میدیم که چطوری به…

آخرین ارسال های انجمن

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

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

 

سلام و احترام خدمت تمامی دوستان گل اسکینکی
بعضی از دوستانم در رابطه با ساخت بکگراند شیشه ای یا ساخت گرادینت از من سوال کردن و منم تصمیم گرفتم که این پست رو بذارم تا شاید مشکلشون حل شد
در این پست ما به شما عزیزان آموزش میدیم که چطوری به ساده ترین شکل و بدون نیاز به عکس یک بکگراند شیشه ای یا گرادینت در 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
که داریم میگیم هر چی از سمت چپ به راست گرادینت کشیده شد رنگ از بین بره
البته اگر کد بالا رو شما در مرورگرهایی مثل کروم قرار بدید قبول نمیکنه(پشتیبانی نمیکنه)
برای اینکه بتونه اونو اجرا کنه لازم هست که کد رو به این شکل قرار بدیم
و همچنبن لرای موزیلا و اپرا
عذرخواهی مکنم بابت طولانی بودن پست خیلی وقت بود آموزش قرار نداده بودم برا همین طولانی شد:دی
منتظر نظراتتون هستم

 

درباره : آموزشگاه اسکینک , آموزش طراحی وب ,
برچسب ها : آموزش , آموزش ساخت گرادینت , آموزش ساخت گرادینت در cssvآموزش css , چگونگی ساخت گرادینت در css , اموزش ساخت بکگراند شیشه ای , بکگراند , شیشه ای , آموزش ساخت بکگراند شیشه ای و گرادینت , Creating glass and gradient background , training , making gradient , making education training cssv gradient in css , how to make a gradient in css , glass making education background , background , glass , Training ,
بازدید : 1435 تاریخ : 29 / 01 / 1394 زمان : 19:9 نویسنده : mostafa نظرات ()
مطالب مرتبط
  • حل خطا پرونده فرستاده شده بزرگ‌تر از upload_max_filesize در php.ini است حل خطا پرونده فرستاده شده بزرگ‌تر از upload_max_filesize در php.ini است
  • آموزش ایجاد زمینه مطلب(جعبه دانلود) در رزبلاگ +ویدئو آموزش ایجاد زمینه مطلب(جعبه دانلود) در رزبلاگ +ویدئو
  • آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل شماره 2 آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل شماره 2
  • nofollow کردن لینک ها در رزبلاگ nofollow کردن لینک ها در رزبلاگ
  • آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل آموزش ویدئویی ssl رایگان Let's Encrypt برای سی پنل
  • 8 قدم تا ارتقا دومین اتوریتی Domain Authority 8 قدم تا ارتقا دومین اتوریتی Domain Authority
  • آموزش ساخت وی پی اس از فرانسه به صورت یک ماهه (کاملا رایگان) آموزش ساخت وی پی اس از فرانسه به صورت یک ماهه (کاملا رایگان)
  • پلاگین مترسنج با جاوا اسکریپت پلاگین مترسنج با جاوا اسکریپت
  • دانلود لیست ای پی های موتور های جستجوی گوگل و.. دانلود لیست ای پی های موتور های جستجوی گوگل و..
  • ارسال نظر برای این مطلب
    این نظر توسط Bahar در تاریخ 1395/5/24 و 13:23 دقیقه ارسال شده است

    مننن نفهمیییدممممممم

    این نظر توسط علیرضا قاسمی در تاریخ 1394/1/29 و 19:56 دقیقه ارسال شده است

    عالی بود نیاز داشتم مرسی
    پاسخ : سلام
    قربانت علیرضا جان


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی
    تبلیغات
    Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز

    مطالب