What makes really cool effects on today’s websites is not a markup, but set of new innovative CSS3 rules and a bunch of awesome JavaScript (read jQuery) code.

CSS3 Responsive slider without JavaScript

Yeah, that’s not a mistake. Ian Hansonn (@teapoted) at CSScience made a responsive CSS3 slider using radio buttons and no JavaScript.

As Ian says:

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

You can see the demo on CSScience.

Sigma.js – lightweight JavaScript library to draw graphs

Sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:

• Display interactively static graphs exported from a graph visualization software
• Display dynamically graphs that are generated on the fly

You can see a bunch of cool visualization examples on Sigma.js example page, so go and check it out.

jQuery Scroll Path

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.

Scrolling can be done with the mouse wheel, up/down arrow keys and spacebar. The space bar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scroll bar is also included, which allows click and drag scrolling. The scroll bar is enabled by default.

Flickrush – jQuery Flicker plugin

Flickrush is a jQuery plugin designed to make it quick and easy to add your flickr photo stream to any web page with minimal effort. Fully customisable you can choose the number of photos, randomise the ordering and style to fit in with any blog or web page.

Demo can be seen here and documentation can be seen on Flickrush main page.

Timeline

Timeline plugin is used to create beautifully crafted timelines that are easy, and intuitive to use.

Timeline is also great for pulling in media from different sources. It has built in support for pulling in Tweets and media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types will be supported in the future.

You can see and download it on Timeline.

iPicture

iPicture is a jQuery Plugin to create interactive pictures with extra descriptions presented as tooltips.

It comes with a wizard to help you generate the effect as soon and as easily as possible simply by dragging and droping. More info on plugin’s page.

RainBow – JavaScript Code Syntax Highlighter

Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (1.4kb), easy to use, and extendable.

It is completely themable via CSS. Rainbow on its own is very simple. It goes through code blocks, processes regex patterns, and wraps matching patterns in tags. All the theming is left up to CSS.

cssFx.js – CSS3 property polyfill

cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth.

Features that are supported includes: box shadows, border radius, multiple columns, border image, RGBA, transforms, keyframes, transitions (and properties inside transitions), flexible box, gradients, and a ton of other useful things (like opacity, ellipsis, and inline-block).

Browser support includes: Firefox 3+, Chrome 1+, Internet Explorer 6+, Safari 3+, Opera 9+.

jQuery Retina plugin

Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops.

Until more desktops have retina displays, this requires a client side solution. jQuery Retina plugin will swap out the image source for an image that is sized for retina displays.

The plugin will check if the device retina enabled, and if so, swap out the image with one that is twice as large.

While calling the plugin, the user can also specify if they want to check if the file exists or not.

Plugin and demo can be seen on official jQuery Retina plugin page.

Webshims lib

Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.

The more features a browser supports natively, the more lightweight webshims will be. It works in IE6+, Firefox 3.6+, Safari 5.0.3+, Safari for iOS 5+, Chrome 16.0+, Opera 11.6+.

Using CSS3 (I’m aiming at gradient backgrounds, rounded borders, text and box shadows here) could have a big (or at least significant) effect on bandwidth usage. Background images used purely for design are all costly, bandwidth consuming. If we’d use plain CSS to handle all the graphics, we could save at least a few KB per page. With a lot of visits, this number could turn out to be quite significant.

And this is why I’d like to overview one of most popular services on web today: Tumblr. It actually has 1 billion pageviews monthly (view the stats). Tumblr is unavailable quite a lot, and it’s having constant problems with downtimes (similar to Twitter’s), and this makes him a perfect candidate for optimization.

We’ll examine the infamous “We’ll be back shortly” (Tumblr’s Fail Whale) page and try to optimise it using CSS3 techniques. I’ll optimise only CSS; HTML markup will remain (more or less) the same. For browsers that don’t support all rules necessary to display the exact page using pure CSS3, we’ll use images fallback (similar to what site uses now).

I promise you, if Tumblr employed optimisations I’ll show here, there wouldn’t be any downtime’s, and furthermore, Tumblr would probably save a trillions and trillions of dollars on bandwidth. (You didn’t take this last bit seriously, did you?)

Let’s start by overviewing the current “We’ll be back shortly” page. Please note that I’m using “Updating” version of the page that they had while rolling out new queues features. On other versions the text changes a little, but everything else is the same.

The markup

I noticed a few interesting things there. First off, I’ve ran the page trough W3C validators (both HTML and CSS). CSS passes with a flying colors – not a single error or warning. Neat. HTML is not bad either; except that it returns one error:

You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>”.

They’ve kind of missed that. No biggy. But simple backslash will fix it:

[code lang=”html”] [/code]

I’ve also replaced few class selectors with id selectors; best practice is to use ID’s whenever possible; it’s faster in browser renderings (not that you should be concerned with that), and if you use JavaScript, it is more efficient and faster to get elements by ID’s then by class names.

The main thing that’s poking my eyes is the use of non breaking spaces ( ) to indent “Updating” word. Why would you use that? We have a perfectly good text-indent property that’s supported by all imaginable browsers; and yes, even by IE6.

The problem is that they’re setting the text-align property of the flip container to center; but then they overwrite it with inline styles to left. I’m not gonna even start with the rantings about the use of inline styles; you already have a external CSS and a class on the element you’re trying to style, please use it. Even if this means that you’ll have to do a slight change when you replace text in HTML (I think that’s the reason they did this).

I would replace .green and .red classes with more generic names. It’s bad practice to name your classes by style. What if a designer decides to change the colors? You’d have a blue element with .green class; or you’d have to change HTML as well. It probably isn’t a big deal, but it’s a good practice nonetheless. These elements are related to site status, so I’ve changed class names to .online and .offline.

It would also be a smart decision to use a heading on the page; all we have now is semantically just plain text. But that’s not really important for this temporary page, so I won’t be adding it.

This is the complete html I’m using here.

[code lang=”html”]

[/code]

CSS3 goodness

Don’t be too harsh on me with the following part. I wanted to recreate the original effect as closely as possible and ended up with the following combination (It’s probably possible to create a similar effect with less rules).

Here’s the complete CSS. You’ll find a few comments in there, but everything should be self explanatory. I’ve used multiple backgrounds to recreate the original effect; rgba, linear and radial backgrounds, box-shadows and as a cherry on top I’ve added a simple glow animation (you’ll see this only in Webkit browsers).

[code lang=”css”]
body, html {
background:#252525;
font-family: Arial, Helvetica, Arial, sans-serif;
}

#container {
width: 709px;
height: 256px;
margin:-128px 0 0 -348px;
padding: 0 0 0 0px;
position: absolute;
top: 50%; left: 50%;

background: url(images/status_flip_container.png) 79px 0px no-repeat;
background: -moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
}

#flip{
margin: 20px 0 0; float: left;
width: 584px; height: 112px;
position:relative; overflow:hidden;

background: none;
background: -moz-linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.5) ),
-moz-linear-gradient(90deg, rgba(125,125,125,0.5), rgba(125,125,125,0.8) ),
-moz-radial-gradient(top 90deg, ellipse closest-side, rgba(204,204,204,0.1) 30%, rgba(0,0,0,0.5) 120% ),
-moz-linear-gradient(90deg, rgba(70,70,70,0.5), rgba(0,0,0,1) );
background: -webkit-gradient(linear, left top, left bottom, from(rgba(70,70,70,0.4)), to(rgba(0,0,0,0.4))),
-webkit-gradient(radial, center -400, 50, center -480, 682, from(rgba(204,204,204,0.4)), to(rgba(70,70,70,0.2))),
-webkit-gradient(radial, left center, 150, left center, 622, from(rgba(70,70,70,0.1)), to(rgba(0,0,0,0))),
-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(125,125,125,0.3)), color-stop(0.01, rgba(0,0,0,0.4)), color-stop(0.03, rgba(0,0,0,0.4)) ),
-webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgba(0,0,0,0.5)), color-stop(1, rgba(0,0,0,0.9)) );

color: #dadada;
font-size: 54px; font-weight: bold;
text-align: left; line-height: 104px;
text-indent: 46px; letter-spacing: -2px;

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-box-shadow: 0 -1px 0 rgba(24,24,24,1), 0 0 35px rgba(121,121,121,0.2);
-moz-box-shadow: 0 -1px 0 rgba(24,24,24,1), 0 0 35px rgba(121,121,121,0.2);

border-top: 2px solid rgba(24,24,24,0.3);
border-top: 1px solid rgba(66,66,66,1);
border-bottom: 1px solid rgba(70,70,70,1);
border-left: 1px solid rgba(70,70,70,0.6);
border-right: 1px solid rgba(70,70,70,0.6);

text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

#leds{
width:96px; height:115px; float: left;
background: url(images/status_led_sprite.png) 0 -70px no-repeat;
background: -moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
}

#leds.on{ background-position: 0 44px; }

.online, .offline{
margin: 57px 13px 0 13px;
width: 11px; height: 41px;
float: left; display: inline;
}

.online{
background: -moz-linear-gradient(-90deg, rgba(85,92,79,0.9), rgba(69,76,62,1) 1%, rgba(42,49,34,1) 97%, rgba(15,15,15,1) 100% );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(85,92,79,0.9)), color-stop(0.04, rgba(69,76,62,1)), color-stop(0.96, rgba(42,49,34,1)), color-stop(1, rgba(15,15,15,1)) );
border-top: 1px solid #0f0f0f;
border-right: 1px solid #0f0f0f;
border-left: 1px solid #0f0f0f;
border-bottom: 1px solid #4e4e4e;
}

.online.active{
-webkit-box-shadow: 0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
-moz-box-shadow: 0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
overflow: visible;
background: -moz-linear-gradient(-90deg, rgba(156,204,105,0.9), rgba(122,186,53,1) 1%, rgba(95,159,26,1) 98%, rgba(40,40,40,0.5) 100% );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,204,105,0.9)), color-stop(0.04, rgba(122,186,53,1)), color-stop(0.96, rgba(95,159,26,1)), color-stop(1, rgba(0,0,0,1)) );
border-top: 1px solid rgba(44,66,20,1);
border-right: 1px solid rgba(42,63,20,0.8);
border-left: 1px solid rgba(42,63,20,0.8);
border-bottom: 1px solid rgba(80,99,60,1);
}

.offline{
background: -moz-linear-gradient(-90deg, rgba(113,91,91,0.9), rgba(100,64,64,1) 1%, rgba(72,37,37,1) 98%, rgba(15,15,15,1) 100% );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(113,91,91,0.9)), color-stop(0.04, rgba(100,64,64,1)), color-stop(0.96, rgba(72,37,37,1)), color-stop(1, rgba(15,15,15,1)) );
border-top: 1px solid #0f0f0f;
border-right: 1px solid #0f0f0f;
border-left: 1px solid #0f0f0f;
border-bottom: 1px solid #4e4e4e;
}

.offline.active{
-moz-box-shadow: 0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
-webkit-box-shadow: 0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
background: -moz-linear-gradient(-90deg, rgba(226,120,120,0.9), rgba(216,74,74,1) 1%, rgba(188,47,47,1) 98%, rgba(40,40,40,0.5) );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(226,120,120,0.9)), color-stop(0.04, rgba(216,74,74,1)), color-stop(0.96, rgba(188,47,47,1)), color-stop(1, rgba(0,0,0,1)) );

border-top: 1px solid rgba(97,30,30,1);
border-right: 1px solid rgba(83,27,27,0.8);
border-left: 1px solid rgba(83,27,27,0.8);
border-bottom: 1px solid rgba(125,69,69,1);

-webkit-animation-name: blink;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
}

@-webkit-keyframes blink {
from {
-webkit-box-shadow: 0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
}
50%{
-webkit-box-shadow: 0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 0.5);
}
to {
-webkit-box-shadow: 0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
}
}

#break{
width: 100%; height: 2px;
position: absolute; top: 55px; left: 0;
border-bottom: 1px solid rgb(54,54,54);
background: rgb(24,24,24);
}

#sorry{
margin: 0 0 0 113px; padding: 4px 0 0;
clear: both;
color: #949494;
}
#sorry p{ margin: 16px 0 21px; }

.link{
width: 3px; height: 10px; overflow: hidden;
background: #565656;
background: -moz-linear-gradient(-90deg, rgba(121,121,121,1), rgba(86,86,86,1) );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(121,121,121,1)), color-stop(1, rgba(86,86,86,1)) );
position: absolute;
top: -3px;
border-radius: 2px;
-moz-border-radius: 2px;
}

.link.left{ left:11px; }
.link.right{ right:11px; }
[/code]

If you want additional info on CSS3 properties I’ve used, there’s plenty of resources on the web.

The result. Can you figure out what part is done with pure css?

Bottom half is CSS3 version, that’s right. Nasty borders gave it away, didn’t they?

Fallback’s for older browsers.

Code we just created will work only in latest Firefox and Webkit browsers, but we don’t want to let all the other users hanging. We’ll show them the page with background images (the original page). Best part is that I didn’t use any browser-specific hacks or checks, any JavaScript or anything like that. Everything is done in CSS. I set up regular CSS2 rule that all browsers can render and then add CSS3 styles to overwrite them.

Example:
[code lang=”css”]
background:url(images/status_led_sprite.png) 0 -70px; /*Fallback*/
background:-moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
[/code]

Mozilla and Webkit browsers will use the linear gradient rule, and other browsers, that don’t support this will simply ignore rules they can’t render.

The results.

We’ve managed to save 2KB. Original file with images was 9KB, and pure CSS3 version is only 7KB. A few KB may not seem like much, but if you have 1 billion pageviews per month, this could turn out to be a decent number.

But there is a catch. We increased the document size for browsers that don’t support CSS3. They’ll have to download all images and a new, bigger CSS. And this means that the real number of KB saved depends on percentage of browsers the visitors use. If Safari, Firefox and Chrome (latest versions) don’t represent a greatest part, we didn’t actually saved bandwidth usage, but we’ve increased it.

PROS:

• Faster loading times.
• Less bandwidth usage.
• Hype generation?

CONS:

• It takes more time to create the effect using CSS.
• Rounded borders are a bit rough on the edges.
• Pins are lacking fine touches – due to a border-radius restriction you can’t set border radius on divs smaller than 4px.
• CSS validation fails miserably.
• CSS3 specification isn’t done yet and it could change; this would mean that developer has to revisit and rewrite the code.
• Double work. You still have to create images version for browsers that don’t support all CSS3 rules.

CONCLUSION:

This analysis is completely useless (correct me if I’m wrong), but it was fun and challenging to make. If nothing else, it shows one practical scenario of progressive enhancement using CSS3 techniques.

For this to be worth implementing, the site traffic should be really really high, and even then it would be questionable if it’s worth hassling and doing all the extra work.

What do you think?

I will show you a technique that would some people probably consider unethical (heck, even i consider it to be unethical), but it is very, very effective. We will hypnotize the user using pure CSS3 techniques.

With hypnotized user, you can do whatever you want; you can make him click the ads, you can make him buy your product, heck, you can even make him subscribe to RSS. But do use a common sense when you do that. We don’t want the whole population of Internet users to go into a trans-like state of half existence, do we?

Please note that this will work only in Webkit browsers (Safari and Chrome). It’ll take some time for other modern browsers to start supporting CSS3 animations. And it will probably take a century or two for IE to jump in the game as well. But that’s not relevant here.

Also, this demo is quite CPU consuming, so if you’re not getting a smooth animation, try to zoom out a bit and it’ll be fine.

This is our basic html5 markup; a whole lot cleaner and easier than the xHTML way. If you want to learn more about HTML5 I recommend you check out Dive into HTML5:

[code lang=”html”]

[/code]

Let’s add a few styles:

[code lang=”css”]
html{
width:100%;
height:100%;
display:table;
text-align:center;
}

body{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#999));
display:table-cell;
vertical-align:middle;
}
[/code]

Html tag will serve us as a container. We want it to stretch for a whole width and height of users screen. Also, we want our spiral to be centered horizontally and vertically. Easiest way to center a div vertically is to set its display value to table-cell and its parent to table.

In our case html tag will be a table, and body tag will be a table-cell. We’ll set vertical-align of the body to middle, and anything we put into it will be perfectly centered.

Now add this to CSS:

[code lang=”css”]
#spin_container{
width:700px;
height:700px;
border-radius:350px;

position:relative;
margin:0 auto;
display:block;

background:#fff;
-webkit-box-shadow:0 0 120px #000;
}
[/code]

Our main spiral outline will be div #spin_container. To create a perfect circle from a 700px wide and 700px high div we just have to set its border-radius to 350px (or half of its size).

This is what you should have by now.

And that’s the simple part; things will get a little bit tricky now.

Since there is no easy way to create a spiral in plain HTML/CSS, we’ll create a optical illusion using just circles (fully rounded divs).

Add a #spin and #spin1 divs into #spin_container. From now on we’ll be stockpiling divs here to create a spiral. You’ll see how this works in a second.

[code lang=”html”]

[/code]

Styles for #spin and #spin1 are as follows:

[code lang=”css”]
#spin{
width:600px; height:600px;
-webkit-border-radius:300px;
top:50px; left:50px;

background:#333;
position:relative;
text-indent:-9999px;
}

#spin div{
position:absolute;
}
#spin1{
width:500px; height:500px;
-webkit-border-radius:250px;
background:#fff;
}
[/code]

You already see where we’re going?

Div #spin will be positioned relatively and all its children will be positioned absolutely. We’ll use two colors to achieve the illusion: dark grey (#333) and white (#fff). Divs of the same color will blend together and the user will see only one (grey) image: the spiral.

To see exactly how it works add a following code one div/style at the time and test as you go. You’ll see it pretty much comes down to playing around with div positioning and sizing.

HTML:

[code lang=”html”]

[/code]

CSS:

[code lang=”css”]
#spin2{
width:500px; height:500px;
-webkit-border-radius:250px;
top:1px; left:50px;
background:#fff;
}

#spin3{
width:500px; height:500px;
-webkit-border-radius:250px;
top:20px; left:10px;
background:#fff;
}

#spin4{
width:500px; height:500px;
-webkit-border-radius:250px;
top:20px; left:-60px;
background:#333;
}

#spin5{
width:420px; height:420px;
-webkit-border-radius:210px;
top:64px; left:107px;
background:#fff;
}

#spin6{
width:420px; height:420px;
-webkit-border-radius:210px;
top:-10px; left:-15px;
background:#fff;
}

#spin7{
width:350px; height:350px;
-webkit-border-radius:175px;
top:-5px; left:55px;
background:#333;
}

#spin8{
width:300px; height:300px;
-webkit-border-radius:150px;
top:8px; left:-20px;
background:#fff;
}

#spin9{
width:280px; height:280px;
-webkit-border-radius:140px;
top:45px; left:25px;
background:#333;
}

#spin10{
width:240px; height:240px;
-webkit-border-radius:120px;
top:-10px; left:39px;
background:#fff;
}

#spin11{
width:180px; height:180px;
-webkit-border-radius:100px;
top:13px; left:-5px;
background:#333;
}

#spin12{
width:150px; height:150px;
-webkit-border-radius:90px;
top:43px; left:6px;
background:#fff;
}

#spin13{
width:140px; height:140px;
-webkit-border-radius:70px;
top:-10px; left:30px;
background:#333;
}

#spin14{
width:140px; height:140px;
-webkit-border-radius:70px;
top:5px; left:-8px;
background:#fff;
}

#spin15{
width:160px; height:160px;
-webkit-border-radius:80px;
top:-5px; left:-17px;
background:#fff;
}

#spin16{
width:140px; height:140px; background:#333;
-webkit-border-radius:70px;
position:absolute; top:-4px; left:27px;
}

#spin17{
width:140px; height:140px;
-webkit-border-radius:70px;
top:3px; left:-10px;
background:#fff;
}
#spin18{
width:130px; height:130px;
-webkit-border-radius:65px;
top:7px; left:15px;
background:#333;
}
#spin19{
width:120px; height:120px;
-webkit-border-radius:60px;
top:-5px; left:0;
background:#fff;
}
#spin20{
width:100px; height:100px;
-webkit-border-radius:50px;
top:19px; left:0px;
background:#fff;
}
[/code]

Lastly, let’s animate the spiral. This will work only in webkit browsers. Firefox will support animate in version 4 (so they say). And we’ll be patient till then, will we?

Add following to CSS:

[code lang=”css”]
#spin{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}

to {
-webkit-transform: rotate(-360deg);
}
}

[/code]

This is a custom animation that will spin the #spin div from 0 to -360 degrees in a 2 seconds infinite number of times. -360 only because effect looks better when spiral rotates anti-clockwise. And that’s about it.

Never mind that a final result won’t be much of a value for you (you don’t really want to hypnotize your users, do you?); much in web development is about finding creative solutions to same old problems; let this inspire you to find a new (and possibly better) solution to a problem you’re facing daily – how to attract users and how to arouse their interest. Or just hypnotize someone, I don’t really care (as long as I’m not a victim).

The owner of this blog is not responsible for any damage inflicted by using techniques described in this post. Neither am I. You should not stare at the result of this tutorial, neither should you force anyone to do so. This is for educational and entertainment purposes only.

Thanks for reading.