امروز : چهارشنبه ۲۹ فروردین ۱۳۹۷ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

قالب های اختصاصی فروشگاه

نمایش همه

افزونه های اختصاصی فروشگاه

نمایش همه
78 بار
بررسی پشتیبانی مرورگر ها

یکی از موضوعاتی که برنامه نویسان و توسعه دهندگان وب همه روزه با آن سرو کار دارند پشتیبانی مرورگر ها است. در گذشته بررسی اینکه آیا یک API  در جاوا اسکریپت یا یک ویژگی در CSS در چه موقعیتی از پشتیبانی مرورگر ها است کار ساده ای نبود و منبع متمرکزی برای این موضوع وجود نداشت ولی اکنون به همت Alexis Deveria ابزاری برای این موضوع طراحی شده و بصورت خیلی خوب و بروز نگهداری می شود. جستجوی یک ویژگی: در صورتی که نیاز داشتیم تا پشتیبانی مرورگرها را در یک مورد بررسی کنیم میتوانیم با مراجعه به سایت caniuse.com و تایپ ویژگی مورد نظرمان این موضوع را متوجه شویم. سپس سایت جدولی مربوط به پشتیبانی این ویژگی به ما ارائه میدهد. برای مثال میخواهیم ویژگی Transform 3D  را بررسی کنیم : وضعیت یک ویژگی: همان طور که در تصویر میبینید کنار عبارت جستجو شده برچسبی وجود دارد که برای […]

دسته بندی : آموزش css ، آموزش وردپرس ۱ دیدگاه تاریخ : ۲۷ بهمن ۱۳۹۶ ادامه مطلب ...
128 بار
آموزش ابزار Balloon.css

در این مقاله میخواهیم به اموزش Ballon.css بپردازیم . تا این امکان برامون فراهم بشه که بتونیم برای المنت های مورد نظرمون Tooltip قرار بدهیم. اضافه کردن ویژگی های مختلف به Tooltip موردنظرتان با این ابزار به راحتی انجام میگیرد.در این ابزار فقط از کد Css استفاده شده است و هیچ گونه کد JavaScript  وجود ندارد. شروع کار با Balloon.css در ابتدا یک فایل بنام Balloon.html به وجود میاریم کدهای زیر رو درونش قرار میدیم: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <title>Balloon.css</title> </head> <body> <!–your code–> </body> </html>   در این قسمت کد های html  رو قرار میدهیم.و برای افزودن Balloon.css میتوانیم فایل دانلود شده را در تگ link  قرار دهیم: <link rel=”stylesheet” href=”./balloon.css”> روش دیگه ای برای استفاده از این ابزار وجود دارد به این صورت که می توان طبق کد زیر CDN  ابزار را در پروژه قرار داد. <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css”> همان طور که مشاهده […]

دسته بندی : آموزش css ۰ دیدگاه تاریخ : ۱۱ دی ۱۳۹۶ ادامه مطلب ...
150 بار
نمایش  GIF با استفاده از x-gif

در این مقاله میخواهیم بهتون آموزش بدیم که چطور میشه gif دلخواهتان را سفارشی سازی کنید و هر طور که میخواهید نمایش دهید. این ابزار X-Gif نام دارد که این امکان را به شما میدهد که gif هایتان را به صورت های مختلفی نمایش دهید.این ابزار یک المنت سفارشی ساخته شده در حوزه ی Web Componnet است که هدف از ساخت آن توانایی تغییر در نحوه ی نمایش تصاویر gif است.   امکانات X-Gif : 1-تغییر در سرعت نمایش تصاویر gif 2-هماهنگ شدن تصویر gif  با فایل صوتی 3-ایجاد حالت ping pong برای به وجود آوردن تصاویر رفت و برگشتی 4-نمایش برعکس gif از آخر  به اول مرورگر ها معمولا از Web Component پشتیبانی نمیکنند به همین دلیل روشی را توضیح می دهیم که در مرورگر هایی که پشتیبانی نمیکنند هم بتوان از آن استفاده کرد. نحوه استفاده از نحوه استفاده از X-Gif : کد ها رو درتگ Head  قرار […]

دسته بندی : آموزش css ۰ دیدگاه تاریخ : ۹ دی ۱۳۹۶ ادامه مطلب ...
159 بار
چگونه از Animation Css  به صورت حرفه ای استفاده کنیم(قسمت دوم):

Animation Delay-3 : تاخیر انیمیشن (Animation Delay) زمانی استفاده می‌شود که ما می‌خواهیم زمان تاخیری برای انیمیشن تعیین کنیم.انیمیشن شروع می‌شود ، سپس ۱ ثانیه بعد شروع به حرکت می‌کند . برای مثال ، ما تاخیر را برای دکمه ” Send Feedback ” به کار بردیم : Animation Delays: یک ثانیه تاخیر     Animation Delays: دو ثانیه تاخیر   Animation Play State-4: حالت بازی انیمیشن برای مشخص کردن این که چه زمانی انیمیشن باید مکث کند یا ادامه دهد ، استفاده می‌شود. Running : انیمیشن ادامه دارد . Puesed : انیمیشن متوقف می‌شود .   Animation Iteration Count-5: شمارش تعامل(Animation Iteration Count ) برای این است که تعیین کند انیمیشن چند بار تکرار ‌شود . Infinite : انیمیشن برای همیشه تکرار می‌شود . ‘x’ : انیمیشن مقدار x  را تکرار می‌کند . Inherit : انیمیشن مقدار را از والد می گیرد و تکرار می‌کند .   Animation Direction-6 : Animation Direction برای تعیین  مسیر حرکت انیمیشن است. Normal : انیمیشن از نقطه ۰ % به نقطه ۱۰۰ % پیشرفت می‌کند . Reverse:  نقطه شروع انیمیشن به صورت ۱۰۰ % تعیین می‌شود و به سمت نقطه ۰ % حرکت می‌کند . Alternate :  انیمیشن از ۰ % تا ۱۰۰ % پیشرفت می‌کند , سپس از ۱۰۰ % به ۰ % می‌رسد . Alternate-reverse: انیمیشن از ۱۰۰ درصد به ۰ درصد صعود می‌کند ; سپس از ۰ درصد به ۱۰۰ درصد صعود می‌کند .   Animation Fill Mode-7 : هنگامی که انیمیشن تمام می‌شود ، style به عناصر در طول حرکت اعمال نمی‌شود . تنها در طول انیمیشن اعمال می‌شود و سپس با کمک این مقدار حذف می‌شود : Backward: زمانی که انیمیشن پایان می‌یابد ، style در ۰  % به عنصر اعمال می‌شود . Forward: زمانی که انیمیشن پایان می‌یابد ، style  در ۱۰۰  % به عنصر اعمال می‌شود . Both: استایل های ابتدایی در آغاز و پایان انیمیشن اعمال می‌شوند . Initial: این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند .   Will-Change-8 : با توجه به ویژگی ” Will-Change ” ، ما می‌توانیم از قبل به مرورگر اطلاع دهیم ، و عناصری را که می‌خواهیم در انیمیشن استفاده کنیم ، نشان دهیم . این به ما اجازه می‌دهد تا عناصر را زنده کنیم و ویژگی‌های CSS  را یک جا تغییر دهیم . بنابراین ، ما می‌توانیم بیش‌ترین اتلاف عملکرد را در طول انیمیشن کاهش دهیم . button { will-change: transform, opacity; } […]

دسته بندی : آموزش css ۰ دیدگاه تاریخ : ۷ دی ۱۳۹۶ ادامه مطلب ...
210 بار
چگونه از Animation Css به صورت حرفه ای استفاده کنیم:

ظاهرا مردم شیفته ماشین‌های ساخت‌وساز هستند . تماشای آن‌ها آنقدر سرگرم‌کننده است که مردم نمی‌توانند خطرنکرده و به آن‌ها نزدیک نشوند. پس شما می‌توانید میزان جذابیت صفحه وبتان را به همان روشی که ماشین‌ها توجه ما را جلب می‌کنند ، افزایش دهید   ما، طراحان ، همگی تمایل به گرفتن توجه بازدیدکنندگان وب سایت مان و گرفتن آن‌ها را داریم . در اینجا ، ما دریافتیم که نزدیک شدن و رسیدن به این هدف با ایجاد رابط‌های ساده‌تر کاربری و با استفاده از بارگذاری سریع ، امکان پذیر است. اما ما همچنان از خودمان می‌پرسیم ، ” چه کار می‌توانیم بکنیم و یک تجربه لذت بخش را برای کاربر ایجاد کنیم ؟ و بزرگ ‌ترین ابزار ما در این هدف  CSS animations  بوده‌است . Css Animationsدر مقایسه با انیمیشن‌های Java Scriptبسیار بهتر کار می‌کنند . بزرگ‌ترین مزیتش این است که توانایی CSS  برای مطابقت با  تغییرات جهانی و افزایش پشتیبانی توسط مرورگرهای  مختلف بیشتر است . 1. keyframes ما هر شی را با تغییر حالت به تدریج در صفحه خود زنده می‌کنیم . با کمک keyframes ، می‌توانیم کنترل کنیم که شی چگونه در هر مرحله رفتار می‌کند : @keyframes pulse { 0% { ;(transform: scale3d(1, 1, 1 } 50%{ ;(transform: scale3d(1.1, 1.1, 1.1 } 100% { ;(transform: scale3d(1, 1, 1 } }   اگر ما مثال خود را  کد بالا در نظر بگیریم : 1-نام Animation  : pulse 2- شامل ۳ مرحله است : (۰  (%زمان شروع ) ۵۰%  ( زمان شروع )  % ۱۰۰  ( زمان نهایی 3- مقادیر :  ( scale3d (x, y, z بعد از اینکه انیمیشن تعریف شد، می‌توانیم کنترل کنیم که  : انیمیشن چقدر طول می‌کشد ؟ چگونه انیمیشن به تاخیر می افتاد؟ فرکانس  تکرار پویانمایی جهت پویانمایی این یک پیاده‌سازی ساده است : button { ;animation-duration: 1s ;animation-name: pulse }   در مثال بالا ، ما یک انیمیشن را به یک دکمه اضافه می‌کنیم ، مدت‌زمان را ۱ ثانیه تعریف می‌کنیم و نام انیمیشن را که قبلا ایجاد کردیم مشخص می‌کنیم : ” pulse” اگر قرار باشد مدت‌زمان انیمیشن را تنظیم کنیم ، رفتار دکمه نیز تغییر خواهد کرد . برای مثال :   Animation Timing-2 وقتی می‌خواهیم مشخص کنیم که چگونه انیمیشن در طول چرخه حرکت شتاب خواهد گرفت،از تابع زمانبندی انیمیشن استفاده می‌کنیم . ما باید سرعت آن را تعیین کنیم . گزینه‌هایی مانند  initial, inherit, ease, ease-in, ease-out و غیره وجود دارد …         زمان‌بندی  پویانمایی: ( ease )   زمان‌بندی  پویانمایی: ( linear)   […]

دسته بندی : آموزش css ، اخبار ۰ دیدگاه تاریخ : ۵ دی ۱۳۹۶ ادامه مطلب ...
481 بار
استفاده از جعبه دانلود کلاسیک در نوشته های وردپرس

استفاده از جعبه دانلود کلاسیک در نوشته های وردپرس: احتمالا برایتان پیش آمده باشد که در قالب وردپرس خود بخواهید بدنبال افزونه وردپرس جعبه دانلود باشید و در انتهای نوشته های خود از یک جعبه جهت نمایش لینک های دانلود بصورت جداگانه باشید. افزونه ها ممکن است زمان بارگزاری نوشته هایتان را افزایش دهد و همچنین نوشتن و ایجاد زمینه های دلخواه برایتان کمی سخت باشد. وبیت قصد دارد تا با ارائه آموزشی، فقط با درج پند خط کد، این جعبه را در انتهای نوشته های قالب وردپرس خود بدون افزونه وردپرس داشته باشید. با وبیت همراه باشید… استفاده از جعبه دانلود کلاسیک در نوشته های وردپرس با استفاده از این جعبه دانلود کلاسیک، می توانید در انتهای نوشته های وردپرس خود، لینک دانلود، حجم دانلود و همچنین رمز فایل را بهمراه توضیحاتی نمایش دهید. دو قطعه کد برای درج این باکس دانلود نیاز خواهید داشت که اولین قطعه کد […]

دسته بندی : آموزش ، آموزش css ، آموزش html ، آموزش وردپرس ۰ دیدگاه تاریخ : ۲۱ مرداد ۱۳۹۶ ادامه مطلب ...

 ساختمان ساختمان ساختمان