Hiding Emails from Spam Bots: The CSS3 Way

Hiding emails from spam bots can be really painful, but fortunately there are a lot of cool solutions out there. Here’s how you can do this with the CSS3 generated content and reversed text direction.

Let’s say that email you want to obfuscate is info@company.com. The first thing you need to do it to reverse it, so it looks like this: moc.ynapmoc@ofni. For instance, you can do this online here. The rest is CSS:

  • In your style sheets, create a new .contact rule.
  • Add the reversed string as value of the content property of your .contact rule.
  • Set the direction of the text as right to left via direction and unicode-bidi.
  • Use the .contact element in your markup.

The CSS

.contact::before
{
    content: "moc.ynapmoc@ofni";
    direction: rtl;
    unicode-bidi: bidi-override;
    text-decoration: underline;
    color: #00f;
}

The Markup

<p>To contact us, send an email
to <span class="contact"></span>.</p>

… And everything will look just right when you view it in the browser:

email

The drawback of this approach is that CSS3 generated content cannot be selected and copied, which is a usability issue, but this is just an idea and there are many other solutions worth trying.

One small consideration, regarding the syntax of generated content. Older browsers do not recognize the ::before or ::after double column syntax, so you may want to consider using :before / :after. Since this is just syntactical enhancement to distinguish pseudo elements (hover, active, etc) from generated content (before, after), introduced in CSS3, newer browsers understand both syntaxes, so  you can use the “old” syntax without concern.

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

Related Posts and Links

Checking if String is a Palindrome with JavaScript

A palindrome is a word, phrase, number, or other sequence of symbols or elements, whose meaning may be interpreted the same way in either forward or reverse direction. It is not uncommon to be asked to write a JavaScript function that checks if a string is a palindrome on front-end developer position interview.

Here’s one possible solution, utilizing a few JavaScript array methods (split(), reverse() and join()). Of course, if you don’t want to get that sophisticated, a simple one-line solution can be easily extracted from the class.

Merry Christmas! Find more front-end experiments and insight here.

Related Posts and Links

CSS3 and JavaScript Image Slideshow Viewer

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

I promise, this is the last one for 2013.

What’s already available on my experiments website is this (almost fully) CSS3-driven image slideshow viewer, build with the help of a form, radio buttons, transitions and sibling selectors. It also a supports native keyboard arrow navigation.

JavaScript has been used only for the rendering part, and the class supports various configuration options like bounding box, height, width, additional CSS classes array and default selected slide. The slideshow viewer can be populated either from a local object or via external JSON DTO.

acidjs-css3-slider

Merry Christmas and a Happy New Year! See you in 2014!

Related Posts and Links

Batch Removal of Fake Twitter Followers from Your Browser’s Console

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

Ever had to deal with tons of fake followers? Here is a small script, using Twitter’s REST API that you can run right from your browser’s console to batch remove unwanted users from following you. Once users are blocked, they will be grayed out, so you will be able to decide whether to follow them. Do not worry – users, which you are following will not be blocked, because the script is taking care of that.

thumb

Merry Christmas and a Happy New Year! See you in 2014!

Related Posts and Links

Animated CSS3 Notifications Bar

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

The experiment for today is a lightweight and responsive JavaScript-less solution that can be used for displaying important information on the top of a website, purely CSS3-driven and fully customizable in terms of colors, fonts, sizes and default state (expanded or collapsed):

css3-notification-bar

The CSS3 Hello Bar works with all modern browsers plus IE9+ (excluding transitions). Older browsers that do not understand the :root element of CSS3 will not display the bar, which is a good trade-off considering their small market share.

Related Posts and Links

Donation Request

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

I started my blog back in 2006 and later, in 2012 the experiments website as places where I could share my experience and insight in front-end development in my spare time, and ever since I’ve been getting thousands of visitors each month. Recently, however, my work load increased, and respectively, I am getting less and less time to maintain them. In order to continue, I’d like to ask for your donations. I’ve never done this before, neither I am sure it would work, and although I hate asking for that, this is the only way to keep them up and running.

Please, participate if you are happy with what you found here to make a donation.

paypal-donate-button