Monthly Archives: December 2012

2012 in Review

The WordPress.com stats helper monkeys prepared a 2012 annual report for my blog.

Here’s an excerpt:

About 55,000 tourists visit Liechtenstein every year. This blog was viewed about 230,000 times in 2012. If it were Liechtenstein, it would take about 4 years for that many people to see it. Your blog had more visits than a small country in Europe!

Click here to see the complete report.

Imageless Custom Checkboxes and Radio Buttons with CSS3: Revisited

I’ve always been interested in techniques for adding custom look and feel to form elements, and through the years I’ve offered a number of such solutions. In today’s post I will share my latest insight in check box and radio button styling, which is an improved version of another technique I’ve offered sometime ago, but this time with a fallback for non-CSS3 browsers and more elegant looks and code.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

The CSS

As you can see, I am using the CSS3 :root element, which is ignored by non-CSS3 browsers, so they will display the normal check boxes and radios. The code listing below contains only official CSS properties, so maybe it’s a good idea to download the cross-browser solution from this link.

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    border-radius: 100%;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "2714";
    font-size: 12px;
}

The Markup

Nothing fancy here, just a regular semantic form without any additional markup, supporting natively keyboard navigation and accessibility intact.

<!-- markup for custom radio buttons -->
<ul class="css3-radios">
    <li><label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label></li>
</ul>
<!-- / markup for custom radio buttons -->
<!-- markup for custom check boxes -->
<ul class="css3-checkboxes">
    <li><label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label></li>
</ul>
<!-- / markup for custom check boxes -->

What do you Think?

If you like the solution, you can try the demo or get it from this link. In case you are interested in other stuff I do, you can follow me on Twitter, visit my personal website or check my Web UI components.

Have a great weekend!

Related Posts

JavaScript API for TinyURL

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Unlike other URL-shortening services, TinyURL provides a public API which works without developer keys or authorization. Here is a tiny JavaScript class which utilizes this service with the help of a few lines of PHP. You can check the demo or download the entire example here. You can also define your own shortening services and a key-value of predefined shortened URLs that can be pulled from the internal urls object of class rather than requesting it from the server. Make sure you check the comments in the code for a better insight and more options.

The Shortener JavaScript Class

(function() {
    "use strict";

    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @constructor
     * @param urls (Object) set a predefined key-value pairs of urls/shorturls
     * {
     *  "url": "shorturl"
     * }
     **/
    function Shortener(urls) {
        this.urls = urls || {};
    }

    Shortener.prototype = {
        /*
         * @member APIS (Object)
         * @public
         **/
        APIS: {
            tinyurl: "http://tinyurl.com/api-create.php?url="
        },

        /*
         * @method get
         * @public
         * @param longUrl (String) URL that should be shortened
         * @param callback (Function) [optional] callback that will be executed after the URL has been processed
         * @param apiToUse (String) [optional] which shortening service should be used (default is "tinyurl")
         **/
        get: function(longUrl, callback, apiToUse) {
            var
                that = this,
                service = apiToUse ? this.APIS[apiToUse] : this.APIS.tinyurl;

            if(this.urls[longUrl]) {
                if(callback) {
                    callback.call(this, this.urls[longUrl]);
                    return;
                }
            }

            $.when($.ajax({
                    url: "AcidJs.Shortener/php/Shortener.php",
                    data: "url=" + window.encodeURIComponent(longUrl) +
                        "&amp;service=" + window.encodeURIComponent(service),
                    dataType: "json"
                })).then(function(rsp){
                    that.set(longUrl, rsp[longUrl], callback);
                });
        },

        /*
         * @method set cache the short url in the urls object and reuse it from the DOM storage if requested again
         * @private
         * @param key (String) original expanded URL
         * @param value (String) shortened url
         * @param callback (Function) [optional] execute the callback, if set in the get() method
         **/
        set: function(key, value, callback) {
            this.urls[key] = value;
            if(callback) {
                callback.call(this, this.urls[key]);
            }
        }
    };

    window.AcidJs.Shortener = Shortener;
})();

Using the Class

(function() {
    var
        config = {
            "http://wemakesites.net": "http://tinyurl.com/2cv6wrm",
            "http://acidjs.wemakesites.net/": "http://tinyurl.com/bonbupy",
            "http://acidmartin.wordpress.com": "http://tinyurl.com/clvk2v8"
        };

    window.shortener = new AcidJs.Shortener(config);
    window.shortener.get("http://stickeez.wemakesites.net", function(url) {
        window.console.log(url);
    });
})();

Check the demo and have fun! If you like the script, please, follow @wemakesitesnet on Twitter.

Related Posts:

CSS3 Gaussian Blur: Revisited

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

In case you have used my previous solution for blurring elements with CSS, here’s a revised and improved version with added support for more elements and enabling it only for CSS3-enabled browsers only:

gaussian-02

The CSS

:root .css3-gaussian-blur *
{
    text-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    color: transparent !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, .05) !important;
    /* disable the pointer events for blurred zones */
    -moz-pointer-events: none !important;
    -webkit-pointer-events: none !important;
    pointer-events: none !important;
}

:root .css3-gaussian-blur input,
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur button,
:root .css3-gaussian-blur select
{
    box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 0, 0, .05) !important;
    resize: none !important;
    opacity: .5 !important;
}

:root .css3-gaussian-blur img,
:root .css3-gaussian-blur input,
:root .css3-gaussian-blur input[type=&quot;file&quot;],
:root .css3-gaussian-blur input[type=&quot;checkbox&quot;],
:root .css3-gaussian-blur input[type=&quot;radio&quot;]
:root .css3-gaussian-blur textarea,
:root .css3-gaussian-blur select
{
    opacity: .2 !important;
    background: transparent none !important;
}

:root .css3-gaussian-blur fieldset
{
    border-color: transparent !important;
}

/* Vendor-specific styles */
/* CSS3 filters are currently supported by Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    :root .css3-gaussian-blur img
    {
        -webkit-filter: blur(15px) !important;
        filter: blur(15px) !important;
        opacity: 1 !important; /* restore the opacity for that browser */
    }
}

/* IE&lt;10 styles using the 9 hack */
:root .css3-gaussian-blur img
{
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)9 !important; /* IE has native support for filters since version 5.5 */
    -ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)9 !important; /* IE has native support for filters since version 5.5 */
    opacity: 19 !important;
}

:root .css3-gaussian-blur *
{
    color: #ccc !important9;
}

The HTML

Just apply .css3-gaussian-blur class to the element you would like to blur. If you wish to blur the entire page, add this class to the <body />tag.

Related Posts