{"id":3732,"date":"2018-03-23T16:19:11","date_gmt":"2018-03-23T16:19:11","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3732"},"modified":"2018-03-23T16:23:27","modified_gmt":"2018-03-23T16:23:27","slug":"bubble-wrap-in-email-with-sound-effects","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/bubble-wrap-in-email-with-sound-effects\/","title":{"rendered":"Bubble Wrap in Email With Sound Effects"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Sound effects in email! Yay? Nay? Try it out for yourself with this Bubble Wrap in email example here<\/a>.<\/p>\n

This example works in iOS Mail, Apple Mail and the Samsung email client. (See support table here<\/a>).

<\/p>\n

Wrapping The Play Button<\/h4>\n

The core of technique is pretty straightforward. Each bubble consists of an audio control that plays a pop audio file. <\/p>\n

\"\"<\/p>\n

The secret to this example is to have a wrapper element wrap the audio element such that only the play button is exposed. Setting the opacity of the audio element to 0 will then complete the trick.<\/p>\n

\"\"<\/p>\n

Having the bubble popping and then re-appearing after a delay is achieved using a transition-delay property that is associated to the “off” state of the :active pseudoclass.

<\/p>\n

.bubble{\r\n  transition-delay:5s;\r\n  box-shadow: inset 0 -10px 12px rgba(0,0,0,.5);\r\n}\r\n.bubble:active{\r\n  transition-delay:0s;\r\n  box-shadow:none!important;\r\n}<\/pre>\n


<\/p>\n
\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n
<\/p>\n