Y-a--s--e-R

مشکل در نمایش رنگهای gradient و عکس در فایرفاکس

8 پست در این موضوع قرار دارد

سلام .

ببخشید یه مشکل اساسی واسم پیش اومده و اون اینه که اگه بخوام در css قالب ، رنگ ها رو به صورت gradient نشون بدم و یا اینکه بخوام در css ، یک عکس رو در کنار یه باکس بزارم ، در مرورگر کروم هیچ مشکلی نداره و کامل نشون میده ولی در فایرفاکس نشون نمیده .

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

با تشکر .

0

به اشتراک گذاری این پست


لینک به پست

باید برای هر مرورگر کد جداگون قرار بدین

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

شما باید در این حالت باید به ابتدای کدتون برای موزبلا از -moz- استفاده کنین مثلا :


-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;

وقتی میخواین کد خاصی بنویسین باید سرچ کنین و ببینین که مرورگر های متفاوت چطوری از این خاصیت css پشتیبانی میکنن

2

به اشتراک گذاری این پست


لینک به پست

باید برای هر مرورگر کد جداگون قرار بدین

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

شما باید در این حالت باید به ابتدای کدتون برای موزبلا از -moz- استفاده کنین مثلا :


-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;

وقتی میخواین کد خاصی بنویسین باید سرچ کنین و ببینین که مرورگر های متفاوت چطوری از این خاصیت css پشتیبانی میکنن

تشکر بابت توضیحاتتون .

پس با این حساب ، هیچ کد واحدی وجود نداره که در این مورد بشه واسه همه ی مرورگرها از یک کد استفاده کرد ؟

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

1- جایی که میخوام عکس کنار باکس باشه که کدهاش به شکل زیره :


.box1{
background-image:url(images/AKS.JPG),-webkit-linear-gradient(top, #000000, #ffffff);
background-position:right center, left top;
background-repeat:no-repeat, repeat;
border-right:4px solid #000000;
font-size:10px;
font-weight:bold;
padding:2px 30px 2px 5px;
width: 300px;
height: 70px;
color:#000000;
}

2- جایی که میخوام رنگ باکس به صورت gradient باشه که کدهاش به شکل زیره :


.box2 {
border:1px solid #000000 ;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#ffffff),color-stop(0.02,#000000),color-stop(1,#000000)) !important;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px Black;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}

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

حالا طبق صحبتهای شما ، دو کد بالا رو چه جوری باید واسه فایرفاکس و مرورگرهای دیگه هم بهینه کنم که تو همه ی مرورگرها به صورت کامل و بدون مشکل نشون بده ؟

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

خیلی خیلی ممنون .

0

به اشتراک گذاری این پست


لینک به پست

شما باید کدهای css رو که میخواین استاندارد باشه طبق این وب سایت www.w3schools.com کد بزنین

بطور مثال برای گرادینت باید طبق این اصول برین جبو

همچنین پشتیبانی مرورگرهای متفاوت از این گرادینت رو نوشته

http://www.w3schools.com/css/css3_gradients.asp

2

به اشتراک گذاری این پست


لینک به پست

شما باید کدهای css رو که میخواین استاندارد باشه طبق این وب سایت www.w3schools.com کد بزنین

بطور مثال برای گرادینت باید طبق این اصول برین جبو

همچنین پشتیبانی مرورگرهای متفاوت از این گرادینت رو نوشته

http://www.w3schools...3_gradients.asp

این لینک به زبان انگلیسی بود و بنده تسلط زیادی به این زبان ندارم و متأسفانه ظاهرا اکثر منابع هم به زبان انگلیسی هست .

به همین دلیلم نتونستم جوابمو پیدا کنم .

ممنون میشم اگه کسی به زبان انگلیسی مسلطه و یا در این زمینه اطلاعات کافی داره ، لطف کنه و بگه که کدهای بالا که دادم به چه شکل باید نوشته بشه تا مرورگرها پشتیبانی کنن و مشکلی نداشته باشه ؟

0

به اشتراک گذاری این پست


لینک به پست

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

یه جدول وسط صفحه هست که پشتیبانی ورژن مرورگر ها از خاصیت گرادینت رو نشون میده

بعد پایین تر چند تا مثال زده که بهتر درک کنید کد نویسی و نحوه عملکردشو

این هم دو تا سایت برای ساخت کد گرادنت آنلاین :

http://www.cssmatic.com/

http://www.gradient-animator.com/

2

به اشتراک گذاری این پست


لینک به پست
دوست عزیز نیازی به ترجمه نیست کافیه فقط شما دقت کنید یه جدول وسط صفحه هست که پشتیبانی ورژن مرورگر ها از خاصیت گرادینت رو نشون میده بعد پایین تر چند تا مثال زده که بهتر درک کنید کد نویسی و نحوه عملکردشو این هم دو تا سایت برای ساخت کد گرادنت آنلاین : http://www.cssmatic.com/ http://www.gradient-animator.com/

مرسی ، این ژنراتورها مشکلم رو حل کرد .

فقط یه سؤال : اگه کدی که این ژنراتور بعد از ساختن کد گرادنت میده رو عینا کپی و داخل کدهای سایت بزارم ، آیا تمام مرورگرهای شناخته شده رو پشتیبانی میکنه و در هر مرورگر ، استایل رنگ رو به درستی نشون میده ؟

0

به اشتراک گذاری این پست


لینک به پست

سلام

بله

در مورد کروم لازم بدونید خود مرورگر یک سری کدهای پیشرف داره (با نام user agent stylesheet) لذا نیاز کمتری به تنظیم cssها هست

برای برطرف شدن بعضی از این مشکل ها هم حتما از css reset استفاده کنید

که نمونه‌هاش خیلی زیاد هست مثلا در این آدرس بعضی از این کدها وجود داره.

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری