שיתוף | קודי CSS למעבר עכבר
מדריכים - מחשבים וטכנולוגיה
1
פוסטים
1
כותבים
241
צפיות
2
עוקבים
-
מעברי עכבר מונפשים (פילטרים)
מעברי עכבר מונפשים הינם תחום די מדליק,
זה מסוג הדברים הפשוטים שהופכים את האתר למעוצב יותר וזה מוסיף לדעתי הרבה.אז בוא נתחיל...
אז לטקסט מדובר במשהו די פשוט, זה הJS הזה (בספוילר)
אבל העניין הופך למתוחכם הרבה יותר כשעושים אותו על תמונה.ונסדר לפי האפקט.
שחור לבן במעבר עכבר
;(%100(grayscale:filter-webkit- ;(%100(grayscale: fעמעום במעבר עכבר
;(5px(blur: filter-webkit- ;(5px(blur: fגווני ספיה (דרגות שונות של חום)
;(%100(sepia: fחידוד
;(7(saturate: fצבעי נגטיב
;(%100(invert: fתיהנו!
 { const baseUrl = 'https://www.google.co.il/search?q=site:mitmachim.top'; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; function search(path = '') { const query = document.getElementById('bb-inp').value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, '_blank'); } }; let buttons = {}; buttons.searchAll = { label: `חיפוש ${type ? 'בכל הפורום' : ''}`, className: type ? 'btn-secondary' : 'btn-primary', callback: () => search() }; if (type === 'topic') { buttons.searchTopic = { label: 'חיפוש בנושא זה', className: 'btn-primary', callback: () => search(`/topic/${id}`) }; } else if (type === 'category') { buttons.searchCat = { label: 'חיפוש בקטגוריה זו', className: 'btn-primary', callback: () => search(`/category/${id}`) }; } buttons.cancel = { label: 'ביטול', className: 'btn-default' }; bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true }); })(); void (0);){kind=link}