Jak převést obrázky do odstínů šedi s HTML/CSS?

V komentářích na adrese Convert an image to grayscale in HTML/CSS - Stack Overflow najdete krátký návod, jak za použití kombinace několika triků s CSS vlastností filter lze docílit "online" převodu obrázků do šedi v IE, Chrome i Firefoxu. Ukázka výsledku je tu...

Další návod je na CSS3 Grayscale filter - Pixelhunter - Dmitri Voronianski's blog s ukázkou na CSS3 Grayscale filter.

'via Blog this'

Microsoft Office pro iPad

Microsoft Office Is Finally on the iPad, Available for Download Now - Jako obvykle pozdě, ale přece. Jako obvykle plná funkcionalita za peníze, zdarma jen jako prohlížeč. Jako obvykle většině lidí nevysvětlíte, že toto opravdu nepotřebují ;-)

'via Blog this'

Pushbullet propojuje Windows, Android i iOS

V článku How to Use Pushbullet to Get Notified of Anything on Any Device vysvětlují a popisují použití aplikace Pushbullet pro posílání zpráv, souborů a dalších informací mezi zařízeními s iOS, Androidem a počítačem s prohlížečem Chrome nebo Firefox (pluginy). V betě je připravená také samostatná aplikace pro Windows - viz A Call For Windows Beta Testers. Po registraci pak můžete posílat zprávy, odkazy, soubory z počítače (-čů!) do telefonu (-nů!) a zpět. Můžete si posílat zprávy i mezi "lidmi". A co je také hodně zajímavé, můžete si nechat posílat do počítače systémové zprávy z telefonu (něco, co má iOS a OSx "v sobě"). To může být podle mého hodně hodně užitečné zejména při použití Pushbullet v nějaké "krabičce" s Androidem.

Vše se dá samozřejmě nastavit. Pushbullet má také připraveno API.

Dotykový display a proklatý :hover

CSS pseudo-class selektor :hover se původně, někdy v pravěku, používal pouze pro obarvování odkazů při nejetí kurzorem myši. Postupem času se ale začal "chytat" i na jiné prvky a za jeho využití dnes uděláte třeba elegantně i rozbalovací menu. Tím se můžete těšit ale jen do té doby, než si takovou konstrukci zkontrolujete na tabletu. No jistě - kde je kurzor myši? Jak :hover vyvolat? No, nijak. Prohlížeče v zařízeních s dotykovou obrazovkou buďto :hover vyvolají při ťuknutí jen tak mimochodem, takže menu nebo roletka jen problikne (prohlížeče na Anroidu a Coast na iOS; při troše šikovnosti se dá :hover vyvolat pohybem "stiskni a popotáhni"), nebo je naopak vyvolán pouze :hover a k případnému prokliku nedojde (Safari i Chrome na iOS) - což je mnohem horší!

Řešení? Použití :hover zredukovat pouze na nedůležité kosmetické efekty.

Ale co když už máme něco komplikovanějšího s :hover hotové a úplně to předělat nelze? Našel jsem řešení mimo jiné v textu What's the best way to detect a 'touch screen' device using JavaScript?:

Pomocí jednoduché funkce v js detekujeme dotykovou obrazovku. Nastavíme řídící class, podle kterého upravíme reakci na :hover v CSS. Rozbalení menu či roletky, které reagovalo dříve na :hover, nastane i po přidání classu pomocí další funkce v js (jQuery).

Následující ukázka je i po zjednodušení doufám dostatečně jasná.

JS (jQuery):

function is_touch_device() {
    try {
        return 'ontouchstart' in window
            || 'onmsgesturechange' in window;
    } catch (e) {
        return false;
    }
};

$(document).ready(function(){

    /* touch screen? */

    $('body').toggleClass(function() {
        if ( is_touch_device() ) {
            return 'touch';
        } else {
            return 'desktop';
        }
    });

    /* dropdown switch */

    $('body:not(.desktop) .switch').click(function() {
        var s = $(this).closest('.switch');
        if ( s.is('.open') ) {
            s.removeClass('open');
        } else {
            s.addClass('open');
            return false;
        }
    });
});


CSS:

.switch .dropdown {visibility: hidden;}
.switch.open .dropdown,
body.desktop .switch:hover .dropdown {visibility: visible;}


HTML:

<span class="switch">
    <strong>Title</strong>
    <span class="dropdown">
       ...values...
    </span>
</span>

[touch screen, dotyková obrazovka, dotykový display, hover efekt]

JavaScript je ZLO 2.0

Při hledání menší zapeklitosti v JavaScriptu (konkrétně Argumenty funkcí) jsem narazil na postarší (2007) web JavaScript je ZLO 2.0 - nenávistné poznámky vzteklého kodéra, který je ovšem aktuální stále.

'via Blog this'