در این ترفند می خواهیم تبدیل کردن عناصر چک باکس را به عناصر گرافیکی جالب آموزش دهیم و یک دمو را قدم به قدم با هم بررسی کنیم. فرمول اصلی قضیه از این قرار است که ما قصد مخفی کردن عنصر input را داریم و می خواهیم استایل دلخواه را بر روی label متصل به […]
امروزه با افزایش کاربران موبایل ها و تبلت ها, آیکون منوی مخصوص این دستگاه ها که معروف به آیکون همبرگر است بیشتر به چشم می خورد. در این مطلب قصد معرفی چند دمو برای تغییر شکل دادن این آیکون در موردهای استفاده متفاوت را داریم. پشتیبانی مرورگر ها ie Chrome Firefox Safari Opera 9+ ساختار […]
مقدمه در دنیای امروز طراحی سایت و نرم افزارهای موبایل, متحرک سازی اجزا و یا همان انیمیشن ها جایگاه به خصوصی دارند و تجربه کاربری دلنشینی به وجود می آورند. اگر با ساخت انیمیشن ها آشنا باشید می دانید که فقط دانستن نحوه ساخت آنها به شما کمک نمی کند بلکه ساخت یک انیمشین زیبا […]
مقدمه در قسمت اول شمارنده ها مفاهیم پایه با ساخت یک مثال ساده مورد بررسی قرار گرفت. در این مطلب می خواهیم روش پیاده سازی شمارنده های چندگانه و تودرتو را بررسی کنیم. شمارنده های تودرتو برای ساخت شمارنده های تودرتو کافی است به جای تابع ()counter از تابع ()counters استفاده کنیم. برای این تابع […]
مقدمه شاید تا الان به دنبال شماره گذاری قسمت های مختلف یک مقاله بوده اید یا می خواستید عکس های یک صفحه را شماره گذاری کنید یا احتمالا جدول شماره گذاری شده محتوا داشته باشید و انواع شماره گذاری های دیگر. شاید تا الان این کار را به صورت دستی یا از طریق برنامه نویسی […]
مقدمه این دو انتخابگر از نوع pseudo element می باشند که در نگاه اول و در تعریف اولیه می توان گفت این امکان را به ما می دهند تا از طریق CSS بتوانیم محتوا وارد صفحه کنیم بدون اینکه نیازی به انجام تغییری در HTML باشد. در دنیای مرورگرها امروزه به جایی رسیده ایم که […]
انتخابگر target: از انتخابگرهای نوع pseudo-class می باشد و این امکان را به ما می دهد تا بتوانیم زمانی که بر روی لینک داخلی کلیک شد, CSS آن قسمتی که هدف لینک هست را تغییر دهیم. قطعا شما با لینک های داخلی یک صفحه آشنایی دارید همان هایی که با # تعریف می شوند. استفاده […]
مقدمه در دنیای HTML و CSS که نمایش محتوی را به عهده دارند همیشه یک موضوع, سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی است. به عنوان مثال اگر شما بخواهید یک صفحه برای نمایش یک ستونی یا دو ستونی از عکس ها را داشته باشید با مشکل چندانی رو به رو […]