Month: November 2012

How to Style Select Boxes with CSS3

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

You can find a newer, metro-style look and feel solution for drop down styling with CSS3 is found on this page. You may also want to check AcidJs.Forms for a complete form-styling solution with CSS3 and JavaScript.

It is a truth universally acknowledged (no, I don’t like Jane Austen) that even with the power of CSS3, select boxes are very hard to style (of course, you can use the CSS3 appearance property, but it is still tricky and buggy, and is best supported only by Chrome). Fortunately, there exist a few tricks that can be used to achieve custom styling. Here’s mine, and it does not use any JavaScript, the semantics and the accessibility of the element are preserved, simply because I did not replace the control with custom markup. I just wrapped it in a span.

The code follows, but if you are impatient to give it a try.

Before and After

 

Related Posts:

Advertisements

Roland GR-20 Guitar Synthesizer with Free Sonuus Guitar to MIDI Converter for Sale!

I decided to sell my Roland GR-20 guitar synthesizer, because recently I realized that I am barely using it. The cool thing is that its new owner will get a free Sonuus Guitar to MIDI converter worth of $129USD, so they won’t have to mount the clumsy GK MIDI pick-up to their guitars. The unit is in mint condition, comes with full set of cables and power supply. You can find more information about the synth on Roland’s official page, here’s the promo video, and on this page there are a few photos of my own GR-20. Hurry up, if you wish to get something really cool about your guitar. The price is $500USD (the street price for a new item is $595USD), you can purchase directly from the eBay listing. Do not forget that you will get a free Sonuus Guitar to MIDI converter!

Fancy CSS3 Tooltips (Yeah, without any JavaScript)

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

Here’s a cool code snippet just before the weekend – purely CSS3-driven tooltips. The code below is pretty self-explanatory, so just a few clarifications.

The motivation to use both visibility: hidden and opacity: o – I did it in order to prevent pointer events that will display the tooltip before the mouse actually starts hovering the element. The 50ms delay of the transition is there in order to circumvent and make the animation possible after applying visibility: visible. Finally – currently, the only browser that can play consistent transitions in Firefox, so the other browsers will display the tooltip without the fancy animation. If you like the solution, you can check the demo maybe follow me on Twitter for more cool stuff.

The CSS:

/* apply to elements, containing a data-title attribute */
[data-title] {
    position: relative;
    padding: 0;
}

[data-title]::before,
[data-title]::after {
    position: absolute;
    left: 50%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    background: #000;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);

    -moz-transition: opacity 200ms 50ms linear;
    -webkit-transition: opacity 200ms 50ms linear;
    -ms-transition: opacity 200ms 50ms linear;
    -o-transition: opacity 200ms 50ms linear;
    transition: opacity 200ms 50ms linear;
}

[data-title]:hover::before,
[data-title]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* the tooltip */
[data-title]::before {
    content: attr(data-title);
    width: 120px;
    padding: 4px;
    margin: 30px 0 0 -68px;
    font: normal 11px/16px Arial, Sans-serif;
    color: #fff;
    cursor: default;
    border-radius: 4px;
}

/* the pointer */
[data-title]::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: 26px 0 0 -6px;

    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Usage… It’s Easy:

Just apply data-attrbiute with some text to the elements that should display the tooltip, for example:

<ul>
    <li><a href="http://stickeez.wemakesites.net" target="_blank" data-title="Sticky notes app using the new HTML5 File API, blob and local storage">Sticky Notes App</a></li>
    <li><a href="http://image2base64.wemakesites.net" data-title="Image to Base64 Converter Using the new HTML5 File API">Image to Base-64 Data-URI Converter</a></li>
    <li><a href="http://hasher.wemakesites.net/" data-title="Hasher uses 40+ encryption algorithms to create encrypted message digests online">Message Digest Encrypter</a></li>
</ul>

That’s it! Enjoy the weekend!

Related Posts:

Progressbar .JS 2.0 is Out!

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

I am happy to announce that the new version of my progress bar component has been released yesterday!

Progressbar.JS is a lightweight, multipurpose, platform-independent JavaScript and CSS3 driven component that will enhance the usabiliy of your web applications. The possible use cases are unlimited – from the classic loading indicator displayed during AJAX calls through form validation to complex wizard-like interfaces – it all depends on you.

It is flexible, easy to install and fully customizable featuring rich client API, custom events and imageless purely CSS3-driven skins and cool animations.

What’s New:

  • Improved and richer client API
  • Improved rendering and smaller footprint
  • New skins

Related:

Hasher – Online Message Digest Encryper

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms.

Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. If you are a chrome user, you may use Hasher as Chrome App.

Related Posts

Selecting only the first element occurrence out of siblings with the same class name with CSS3

Imagine you have the following markup…

<ul>
    <li>item 0</li>
    <li>item 1</li>
    <li class="marked">item 2</li>
    <li class="marked">item 3</li>
    <li class="marked">item 4</li>
</ul>

… And you need to apply special styles only to the first occurence of the .selected class. CSS3 has a lot of possibilities for selecting elements, but it does not provide solution for this case. So, when :nth-of-type(), :first-of-type, nth-child() and :first-child do not work, you can use this one:

/* select any .marked element */
.marked {
    color: #f00;
}

/* override all .marked elements but the first using the sibling selector */
.marked ~ .marked {
    color: #000;
}

Related Posts