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 tutorial. Check the demo and choose your favorite beer. Step 1 - HTML Here is the html we use within a form <fieldset class="radio-container"> <div class="radio-options"> <div class="toggle">Choose your beer</div> <ul> <li> <input type="radio" name="my-beer" id="choice1" value="choice1"> <label for="choice1">Cul Dorcha</label> </li> <li> <input type="radio" name="my-beer" id="choice2" value="choice2"> <label for="choice2">Rowers Red Ale</label> </li> <li> <input type="radio" name="my-beer" id="choice3" value="choice3"> <label for="choice3">Belfast Ale</label> </li> <li> <input type="radio" name="my-beer" id="choice4" value="choice4"> <label for="choice4">O'Hara Irish Stout</label> </li> </ul> </div> </fieldset> Step 2 - The idea To make things simple I tried to "sketch" my idea. I hope it is clear enough. Step 3 - CSS Let’s add some css that reflect the idea presented in the scheme above. For the brevity of this tutorial I omit some parts of the css (e.g. triangle arrows) that only add some visual flavor - you’ll find the complete version in the attached files. Note that the vendor prefixes are omitted for the same reason. For the outer containter (".radio-container") we’ll have radio-container { position: relative; height: 4em; /* 3em (being the max-height of the inner container) + 1em ("margin") */ } .radio-container:hover { z-index: 9999; } And for the inner one .radio-options { position: absolute; max-height: 3em; width: 100%; overflow: hidden; transition: 0.7s; } .radio-options:hover { max-height: 100em; } Next .radio-options .toggle { position: relative; cursor: pointer; padding: 0.75em; background: darkgreen; border-radius: 10px; z-index: 1; } /* li are stacked at the same position as .toggle, only .toggle is visible */ .radio-options li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .radio-options label { display: block; opacity: 0; transition: 0s; } We hide the inputs, we could just use display : none, but that would not work in browsers (some mobile ones) where clicking the label does not focus the associated input. .radio-options input { position: absolute; top: 0; left: 0; width: 300px; height: 3em; opacity: 0; z-index:1; cursor: pointer; } Step 4 - What happens on hover - CSS continued Now let’s look closer at what happens on hover, already : .radio-container gets a high z-index and .radio-options increases its max-height, we’ll add /* li elements have a normal flow within the .radio-options container */ .radio-options:hover li { position: relative; } .radio-options:hover label { opacity: 1; transition: 0.5s; } Step 5 - input:checked To style the checked option we will use the general sibling selector. It uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The first element (E) has to occur before the second (F) one and they have to share the same parent (li items in our case). If one of the radio is checked, we’ll see its label instead of the toggle : .radio-options input:checked ~ label { position: absolute; top: 0; left: 0; right: 0; opacity: 1; /* is above the .toggle so is visible */ z-index: 2; /* has tha same styles as .toggle */ padding: 0.75em; background: darkgreen; border-radius: 10px; } On hover it returns to the normal flow .radio-options:hover input:checked ~ label { position: static; border-radius: 0; } Step 6 - What about mobile devices Since our element is activated on hover you’ll have to provide some fallback for touch devices. One solution is to leave the radio labels visible all the time not only on hover. Here is my solution to keep the drop-down list, I detect the touch devices with a custom modernizr build and add the following script $(document).ready(function(){ if (Modernizr.touch) { $(".radio-options").bind("click", function(event) { if (!($(this).parent('.radio-container').hasClass("active"))) { $(this).parent('.radio-container').addClass("active"); event.stopPropagation(); } }); $(".toggle").bind("click", function(){ $(this).parents('.radio-container').removeClass("active"); return false; }); } }) In my css I modify every :hover definition like that .no-touch .radio-container:hover, .active.radio-container { z-index: 9999; } .no-touch .radio-options:hover, .active .radio-options { max-height: 100em; } .no-touch .radio-options:hover li, .active .radio-options li { position: relative; } .no-touch .radio-options:hover label, .active .radio-options label { opacity: 1; transition: 0.5s; } .... Step 7 - What about IE8 Again, it’s up to you, the fallback solutions are not the main part of this tutorial. Here is my approach: <!--[if (IE 8)]> <script> $(document).ready(function(){ $(".radio-options li").bind("click", function() { $(this).siblings(".checked").removeClass("checked"); $(this).addClass("checked"); }); }); </script> <![endif]--> I have to add to my css the .checked class declarations, e.g. (see the attached files for the complete version): .radio-options .checked label { position: absolute; top: 0; left: 0; right: 0; padding: 0.75em; background: #1b9e4d; visibility: visible; z-index: 2; } .... That’s all. I hope you’ll find this technique useful, let me know what you think. Thanks. Terms of use : You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

Hello! Today, let’s celebrate the summer time with this simple css3 tutorial. We’ll discuss the hover effect but don’t hesitate to actually press the button - this pretty flat-design icons set by vector4free is free to download in vector format on their site. Let’s start - hover the "Free download" button below. Summer Icon Pack (ai) Free download Let’s start with the markup. Note that we add the data-title attribute to the link element - its value being exactly the link text. <a class="ph-button" href="#" data-title="Free download"> <span> <span>Free download</span> </span> </a> The idea is to have two button layers one over another, looking and positioned exactly the same except for the inverted colors. We’ll use an :after pseudo-element with the content passed via a custom data- attribute. Note that for the brevity of the code below the vendor prefixes are omitted. You’ll find the complete code in the download files. We use the Bowlby One SC Google Font. .button { display: block; position: relative; height: 3.4em; width: 10em; margin: .7em auto; overflow: hidden; } .button > span { display: block; position: absolute; overflow: hidden; left: 0; top: 0; width: 0%; height: 100%; transition: 1s ease-in-out; } /* .button:after and .button > span > span are identical except for the inverted colors */ .button:after, .button > span > span { display: block; text-align: center; border-radius: 0.625em; padding: 1em 0; } .button:after { content: attr(data-title); width: 100%; background: #4186b2; color: #67d6c1; } .button > span > span { width: 10em; background: #67d6c1; color: #4186b2; } /* what happens on hover */ .button:hover > span { width: 100%; } For a vertical instead of a horizontal effect like below: see on dribbble you would just have .button > span { .. width: 100%; height: 0%; .. } .button:hover > span { height: 100%; } That’s all - hope you got inspired. Thank you. Enjoy the summer!

Dear Freesounders, For more than a year now we’ve been promising you an upgrade of freesound. Dates got shifted into the future, things took (much) longer than expected, … About half a year ago everything shifted into higher gear when the team of Vincent, Gerard, Frederic, Stelios and Jordi started getting involved deeply in freesound code. Stuff starting whizzing along, more work was done than ever on freesound "2″ or "nightingale", or now just… freesound.org again. So many things were rebuilt, reenvisioned and reimplemented that it would be rather useless to try to list them all. But let it be clear that we started from zero: the old -and relatively broken- codebase was replaced by a bright shiny new one, based on the great django framework. We know the new site creates emotional responses as you have been working so closely with the old one. For us it’s such a big change which will let freesound "breathe" again. Hopefully this new freesound site will serve us for many years to come. For us (the people behind the scenes) the biggest advantage to this new site is probably the maintainability: it will be so much easier to adapt the code, add new features, fix bugs… Talking about bugs: feel free to post bugs in this forum or via the contact form. Thanks for waiting and special thanks to the beta testers! Greetings, - The Proud Freesound team (Bram, Gerard, Vincent, Jordi, Frederic, Stelios and Xavier)

Service announcement! We’ve been experiencing some problems with the email queue on freesound because we’re sending too many emails. Practically this means that your activation / password reset / … emails might arrive a bit later. Give it some extra hours. Some of you might even encounter a whole day of delay!

Due to some needed operations on the server, we will be closed for maintenance, starting today at 12h GMT+2. Hopefully the down time will last only a few hours. You have been warned!

Hello all, a quick blog post to tell you all we are currently experiencing some problems with freesound. We’re very busy trying to figure out what exactly is going wrong and it looks like our database server is badly configured… Hold on while we tweak the settings! You might experience some glitches or more downtime today…

Hi all, As you probably know Freesound has had some difficulties lately… We managed to bring the service back to the previous standards but there’s still quite a lot of work to do. So in short tomorrow at 11h GMT+2 we will have to shut down the server, hopefully not for long. The plan is to fine tune our database and in addition deploy a new version covering various bugs. The good news is this version adds packs descriptions . Please report any bugs you may find here or via email. Thanks for your patience as we are as well trying to learn this new beast called Freesound and optimize it for a better service. stelios

Hi all, Freesound has been struggling to regain stability over the last few weeks but we are happy to announce that we finally made it:) The problems started about a month ago when we realized our DB configuration was completely wrong for our hardware and the kind of traffic we are serving. After fiddling around with it we settled for a setup that seemed to work OK. Even so, problems didn’t stop with the sounds page 404ing at times, resulting in the whole site 404ing. We’ve finally pinned this down to some horribly constructed queries our Django ORM was doing for us… After we rewrote those queries the load average of the DB server was reduced dramatically as you can see from this beautiful Munin graph which shows the load average before (pre 18:00) and after (post 18:00) we deployed the version with the fixed queries   Essentially these changes made the site more stable but our problems were far from over. Load average on our webserver machine was off the roof, making impossible for any sane sysadmin to sleep… While checking web servers logs we found repeated error of broken connections… This time the culprit seemed to be the flup module that Django uses by default to serve fastcgi. All efforts to isolate this problem proved fruitless and we finally decided to ditch flup and move to Gunicorn which in general is a good idea concerning how things are moving in the Python world. After a period of testing we deployed to production the 3rd of November and are happy to announce that the results are really good! Have a look at the graph below. Load has dropped from peaking at 11! to peaking at 4! and being most of the time at around 1. Which is expected and acceptable for the limited hardware we are running on. So sorry for the long technical post but we really felt we had to give an explanation for the poor service you’ve seen lately. With this stability we’re back at working on application bugs and even better new features Thanks Stelios

Hello everyone, we have been working in some small new functionalities that we would like to show. Here it goes: Pack descriptions: now you can textually describe the packs of sounds you create. It is as simple as going to the pack page and clicking to "Add a description for the pack…" button that will appear if you’re logged in as the author of the pack. Browse by comments: in the sounds page there is a new browse link called "browse latest comments". Following that link you will find a paginated list of all the comments that you are writing about sounds (sorted by date).  This functionality introduces a new way of browsing sounds by reading what you people are saying about them! Captcha in messages: from now on, people that have uploaded at least one sound won’t have to fill the captcha form when sending messages. Sharing geotag maps: another new feature is the possibility to share and embed geotag maps. Once you are navigating in the geotags page (sounds > browse geotags), you’ll see a new "Share this map" link below the map (this link only appears when your zoom level is greater than 2). Clicking to this link you’ll find html code for embedding the map in an external page such as a blog (preserving the current displayed sounds, zoom and map position) and an url pointing to this "portion" of the map that you can easily share. Tweaking a bit the given iframe code, embedded maps can have custom with and height parameters. Just as an example for you: Shareable link to this portion of the map   New API features: finally, we have also implemented two new features for our API. We added a new resource (the sound geotags resource) that allows to retrieve a list of sounds geotagged inside a defined rectangular area. In the other hand, we have implemented a new way to select the information about sounds that is returned in any sound list. From now on, this can be done using an optional "fields" parameter that allows to specify a list of properties separated by commas (e.g. fields=id,duration,tags). For more details check the API documentation. Well, that is all for the moment, enjoy the new features and keep freesounding!!! - frederic

Where do good sounds come from and who makes them and how are they recorded? Questions we thought we should ask a professional in field recording: Félix Blume, sound engineer for documentary films and Freesounder. Here is the full interview. by Kay Burki: What is your Profession, how would you call yourself? The usual name for my profession is "sound engineer", and I work most of the time on documentary film shootings, sometimes for video-artists too. I like the word "Preneur de son" (in French) which means something like "sound catcher".   Can you describe a typical work flow? The good thing about independent documentary filming is, there is no "typical" configuration. If I try to describe the most usual work flow, it begins of course with the shooting, which involves only one person in the sound department. Most of the time, sound is recorded on a separate recorder, and synchronized with the image by timecode. During or after the shooting, rushes (raw material, KB) are synchronized, and the editing begins. Once  it’s finished, it’s time for sound post-production: sound editing, sometimes some extra recordings of music or foleys (additional sound effects,KB) and later the sound mix. At the same time, they’re doing color correction or special effects, in order to make a final report on tape,  digital copies and in some good cases film copies are made for screenings, film festival contributions and TV broadcasting. How did you come to your profession? I came to sound through music, at first I wanted to do sound reinforcement for live music in concert. I studied and worked a bit in that way at the beginning, but I quickly found more interest in shootings and sound for video. I discovered at the same time a passion for documentary films.   What was your training for your profession, do you have a degree? I studied 2 years in France, at an audiovisual school, with a technical formation (BTS Audiovisuel in Toulouse); after that, I studied 3 years at INSAS film school in Brussels, in the sound department.   What would you advice people who would like to do such work for a profession also? I would say that it can be beautiful work, and a really good way to travel and meet people, but you first need to be passionate, to love sound, to be patient, curious and to be really specific in your choice. If you know what you want to do exactly, people will know what you’re able to do, and they will call you for their projects. And the most important thing, as most of passion-works: you must do what you really like, and not search for money with that job!   What can you tell about the copyrights on recordings of yourself? At what time do you own the copyrights of a recording or someone else does (like a publisher or producer of a movie)? Most of the contracts don’t specify anything about sound copyrights. For the pictures that’s clear though, the camera-operator doesn’t keep any pictures, and all the rights are owned by the producer and the director. For sound, it’s different. I’ve got a copy of all the sound recording of each shooting I’ve done, and I made a lot of wild-tracks during the shootings, which can be seen as a still picture made by the camera operator (can he use it for himself or not? ). I take the right to use and share all the wild-tracks, as long as they are not directly in relation to the subject (no music, no voices for example). If I’m not sure, I talk about that with the director and ask him his point of view… And since I share them for free, there’s no problem.   What did make you decide to add your sounds to Freesound.org? I think internet is a beautiful opportunity to share things, ideas, video and sounds. Unfortunately, most of the sharing platform are used by "pirates" to share things they don’t own. Freesound.org is for people who want to share the sounds they do own, with anybody who would like to use it or need it for any other project. I like the idea and I try to put in the best sounds I have! I add all the sound under Creative Commons 0 License, that means I share the sounds, for any use you want, without any need to mention me. I’ve recorded the sounds by myself, or on projects, and I think the best way to make this sound travel and exist is to share them. The end of the copyrights? Maybe… And I’m not sure if that’s a bad thing !   What equipment do you use? I usually use (and own) a Sound Devices recorder 744T, a Sound Devices Mixer 552, a MS microphone setup with 2 Schoeps CCM41 (super cardioid polar pattern, KB) & CCM8 (figure 8 polar pattern, KB) in a Zephyx windscreen, a Sennheiser MKH8060 hypercardioid microphone in a rycote, 2 lectrosonics digital hybrid HF transmitter & receiver, some additional wireless Sennheiser Evolution sets (ew 100-ENG, KB) i.e. to send sound to the camera and director, some Sanken COS11D lavalier microphones (for the wireless sets),  some HD25 Sennheiser headphones and a PSC boom. I do most of the sound with a MS setup. It’s a really good way to make good sound in documentary shooting!   What are your best sounds on Freesound? I really like the one recorded in South Argentina, in a farm close to Ushuaia, during the "Patagonian Rodeo". Once a year, the farmers go in line through the fields and the forest, screaming and whistling, in order to send the sheep to the corner of the field, and take them to the farm for the sheep’s shave. They can’t see each other but can recognize themselves with their specific screams and keep in line.   Which countries or regions impressed or did you like most on your trips? I really like America and it’s big spaces (each time it is more difficult to find a place in Europe where you don’t hear cars far away). I work a lot in America Latina and I love the people there. Lately I worked a lot in Mexico, a beautiful country!   What other interests do you have? I think human relationships are the most important thing… I love meeting new people, discover different lifestyles and listen to stories people tell me. What is your next project? I’m about to shoot a documentary in USA. We will stay in a small town close to a marine base. After their mission in Afghanistan, the marines stay there for a few weeks, to make a "debriefing", re-adapt to "real" life, and try to forget about war. They’re hanging around and we will film their deambulation in the town…     Thank you Félix Blume for your contributions to Freesound.org and for this Interview! http://www.freesound.org/people/felix.blume/ http://www.felixblume.com http://soundcloud.com/felixblume Everything is published with kind permission!