4ppletree.me – about:code

There are many snippets for separator lines out there but I didn’t find a single one with a text in the middle. Here you got one:

[crayon lang=”css”]
.separator {
width: 100%;
border-bottom: 1px solid #60636a;
text-align: center;
height: 18px;
margin-bottom: 15px;
}
.separator span {
line-height: 15px;
padding: 0 10px;
background: white; /* Color of the element below */
display: inline-block;
margin-top: 10px;
color: #60636a;
}
[/crayon]

This is the neccessary html:

[crayon lang=”html”]

[/crayon]

That’s how I needed the separator line:

Create a new account

Order as guest

Do you know a better method to do this? Maybe without a fixed background color?

I always loved these arcs to display progress, but the only way to create them is using JavaScript and a canvas or simply images.
But with the new awesome CSS3 techniques it is finally possible to create them with pure CSS.

So this is how a pure CSS3 arc looks like (try a hover)

​

This works best in Chrome, but also in Firefox and Opera
IE is not supported – Who would have thought?

Chrome has this great feature to use gradients as a mask. Thats how the inset around the circle is created (FF and Opera only show a white border)

Of course I will try to explain how it’s done.

Lese den ganzen Artikel »

Google Maps together with an own implementation of Array.prototype.indexOf (IE<9 needs it) may result in some problems. The solution is a short: [crayon lang=”js”] delete Array.prototype.indexOf; [/crayon] After including Google Maps, Array.prototype.indexOf can be defined again.