はてなブックマーク

In this tutorial, I will present you my alternative solution to the select form tag. It’s css-only and it looks simple but really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element. Of course you have to provide some fallback for mobile devices (and IE8 if you wish). I discuss that briefly in the final part of this tuto

We all know that : officially, we can’t use the official logos of our usual social networks. It is legally prohibited. We all do. As icons on our portfolio … :) But the colors? Can we? I think so. :) So, here is a nice alternative, completely royalty-free, in 16, 24, 32, 48 and 64 px sizes (include @2x). You will find icons for the following services : 500px Apple Bebo Behance Blogger Delicious De

This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first). Step 1 – Prerequisites We use a Unica One google web font. In the “heart & arrow” example we use three images combined

For a commercial site, and with the proliferation of online payment services, you may need to have buttons showing the logos of these services. Here is a set of icons payment card that you can place on your website or online business on your forms of payment. These icons are available in PNG format in two sizes (99×66 and 64×43). You will also find generic icons payment methods. A blank PSD is als

In this tutorial we’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations – supported by all major browsers: Firefow 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10. Step 1 – Prerequisities We will need 4 large photos, mine are 1200px x 390p

In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css. Step 1 – Prerequisities We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px. Step 2 – Html The markup is simple.