• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  
maraljoon

استایل دهی و افزودن بکگراند به چک باکس ها

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

ارسال شده در (ویرایش شده)

سلام و درود.

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

یکسری چک باکس دارم که میخوام در حالت عادی بکگراند داشته باشه که این بکگراند بصورت عکسه. وقتی چک باکس تیک میخوره و فعاله مثلا یک border دورش اضافه بشه. و وقتی تیک برداشته میشه border هم حذف بشه.

چطور میتونم اینکارو انجام بدم. ممنون میشم راهنمایی کنید.

کد فرم چک باکس به این شکله:

<form>
		<label> <input class="addon-checkbox" name=""  value="" type="checkbox">  تست </label>
          
	</form>

 

ویرایش شده در توسط maraljoon
0

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


لینک به پست

برای چک باکستون یک کلاس تعریف کنید و توی css به اون کلاس خاصیت :

hover | active رو استایل بدید :)

0

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


لینک به پست
در 12 دقیقه قبل، geeksesi گفته است :

برای چک باکستون یک کلاس تعریف کنید و توی css به اون کلاس خاصیت :

hover | active رو استایل بدید :)

ممنونم.

مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟

خودتون تست کردید؟

چک باکس بصورت معمول استایلی نمیگیره

0

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


لینک به پست
در 4 ساعت قبل، maraljoon گفته است :

ممنونم.

مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟

خودتون تست کردید؟

چک باکس بصورت معمول استایلی نمیگیره

بله به همین راحتی قابل استایل دهی هست

یک کلاس براش تعریف کنید مانند mostafa  و به شکل زیر بهش استایل دهید

.mostafa {}
.mostafa:hover {} استایل زمانی که موس روی اون میره
.mostafa:focus {}استایل زمانی که روی اون کلیک میشه 

 

0

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


لینک به پست
در 13 دقیقه قبل، djmostafa گفته است :

بله به همین راحتی قابل استایل دهی هست

یک کلاس براش تعریف کنید مانند mostafa  و به شکل زیر بهش استایل دهید


.mostafa {}
.mostafa:hover {} استایل زمانی که موس روی اون میره
.mostafa:focus {}استایل زمانی که روی اون کلیک میشه 

 

جسارتا این چیزی که شما میگید شدنی نیست.

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

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

مثلا الان میشه به چک باکس گفت وقتی هاور میشه یک فاصله از بالا بگیره.

به این شکل: chekbox:hover{margin-top:10px;}

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

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

https://jsfiddle.net/s7n754xg/

در هرصورت بازم ممنون بابت همراهیتون.

 

0

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


لینک به پست
در 2 ساعت قبل، maraljoon گفته است :

جسارتا این چیزی که شما میگید شدنی نیست.

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

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

مثلا الان میشه به چک باکس گفت وقتی هاور میشه یک فاصله از بالا بگیره.

به این شکل: chekbox:hover{margin-top:10px;}

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

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

https://jsfiddle.net/s7n754xg/

در هرصورت بازم ممنون بابت همراهیتون.

 

باسلام شما ابتدا یک کلاس بدید به چک باکس ، به مثال زیر با فرض کلاس myinput توجه کنید

.myinput[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
}
.myinput[type="checkbox"]:after{
    position: relative;
    display: block;
    left: 2px;
    top: -11px;
    width: 7px;
    height: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position:center;
}
.myinput[type="checkbox"]:checked:after{
    background-image:  url('data:image/png);
}
.myinput[type="checkbox"]:disabled:after{
    -webkit-filter: opacity(0.4);
}
.myinput[type="checkbox"]:not(:disabled):checked:hover:after{
    background-image:  url('data:image/png);
}
.myinput[type="checkbox"]:not(:disabled):hover:after{
    background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);  
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
}
.myinput[type="checkbox"]:not(:disabled):hover:before{
    border-color: #3D7591;
}

 

1

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


لینک به پست
در 4 ساعت قبل، nazanin123 گفته است :

باسلام شما ابتدا یک کلاس بدید به چک باکس ، به مثال زیر با فرض کلاس myinput توجه کنید

 

سلام.. تشکر

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

راه حلی برای این مورد دارید؟

0

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


لینک به پست
در 4 ساعت قبل، maraljoon گفته است :

سلام.. تشکر

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

راه حلی برای این مورد دارید؟

باسلام

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

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

اگر مشکلتون حل نشد لینک آنلاین بدید 

0

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


لینک به پست
در 11 ساعت قبل، nazanin123 گفته است :

 

تشکر.

متاسفانه آنلاین نیست دارم رو لوکال کار میکنم.

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

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

0

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


لینک به پست

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

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

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

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


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

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

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


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