Separator line with text
von Moritur am 25. July 2012
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
This is the neccessary html:
1 2 3 |
<div class="separator"> <span>or</span> </div> |
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?
Whoo! CSS3 only arc (circular progress)
von Moritur am 28. March 2012
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.
Google Maps and Array.prototype.indexOf
von Moritur am 16. January 2012
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:
1 |
delete Array.prototype.indexOf; |
After including Google Maps, Array.prototype.indexOf can be defined again.
Tables?
von Moritur am 2. January 2012
1 2 3 4 5 6 7 8 9 |
<table width="746"> <tbody> <tr> <td style="padding-top:2px;"> <h1>Heading</h1> </td> </tr> </tbody> </table> |
Not. This is about 70% more code than necessary.
jQuery KUSearch
von Moritur am 20. December 2011
jQuery KUSearch enables the user to filter a set of elements (mainly lists) with a simple input field.
Lese den ganzen Artikel »
Inline conditional comments for IE?
von Moritur am 19. December 2011
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="itemDetails clear"><!--[if IE 7]> <style type="text/css"> .productItemMicro .itemDetails { padding-top:10px; padding-left:0px;} </style><![endif]--> <!--[if IE 8]> <style type="text/css"> .productItemMicro .itemDetails { padding-top:10px; padding-left:100px;} </style><![endif]--> <div class="productTitle"><a href="/zensierter/link/">Link</a></div> <div class="priceDetail" style="line-height: 1.3;"><span>Preis: <strong> 299 Euro</strong></span></div> </div> |
Really? If you do need these kind of hacks, please use an ie7.css file and include it in the head section…