Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning…
Articles in the ‘Articles’ Category
-
Curtis CSS Typeface
Posted: 3 days ago in Articles
Read More: Curtis CSS Typeface
-
Opera Logo with CSS
Posted: 1 week ago in Articles
The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers…
Read More: Opera Logo with CSS
-
Setting Rather than Resetting Default Styling
Posted: 1 week ago in Articles
Following the idea of “tweaking” a reset file, I came up with this “base styles sheet”. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well…
-
CSS3 Loading Spinners Without Images
Posted: 2 weeks ago in Articles
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone…
Read More: CSS3 Loading Spinners Without Images
-
The Future Of CSS Typography
Posted: 3 weeks ago in Articles
There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text…
Read More: The Future Of CSS Typography
-
Why You Should Deeply Nest Your CSS Selectors
Posted: 4 weeks ago in Articles
Most developers, even experienced developers, don’t understand the value of deeply nesting CSS selectors. Although writing the same selectors over and over might seem redundant, it’s worth the extra effort. Your code will be better organized, easier to read, and more maintainable…
-
The Demise of CSS: Why Sass and Languages Like it Will Triumph
Posted: 2 months ago in Articles
Sass is essentially a programming language for designers. It is extremely limited when compared with other languages, but it does a magnificent job of translating the core concepts of a programming language in a way that makes sense for styling a document…
Read More: The Demise of CSS: Why Sass and Languages Like it Will Triumph
-
Don’t Lose Your :focus
Posted: 3 months ago in Articles
For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups…
In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable…
Read More: Don’t Lose Your :focus
-
CSS Frameworks: Pros and Cons
Posted: 4 months ago in Articles
A prefab CSS framework can be a great help or serious hindrance. This article will give proper coverage to both sides of the fence by looking at common arguments for and against using a CSS framework…
Read More: CSS Frameworks: Pros and Cons
-
Equal Height Columns – Companion Columns Method
Posted: 4 months ago in Articles
The search for a technique that offers real equal height columns leads nowhere because we don’t have full vertical control in current CSS 2.1 implementations cross browser. The available techniques are simulations of columns: a repeated image displaying Faux Columns [Cederholm], columns made of borders [Livingstone], and variations.
We couldn’t even fall back on a (CSS-)table, since there is no broad, sufficient implementation of display: table in the browsers. And a table would dismiss the accessibility request for having the columns logically ordered in the source.
OneTrueLayout [Robinson] uses a promising technique [Challoner] where the columns are still not equal in height, but they are cut in length, so they appear as-if. Surprisingly, this trimming made problems that are not solved.
In this article, we draw up a variation for the equal heights columns illusion, standing on the shoulders of OneTrueLayout. Both techniques use excessive padding and compensating negative margins, a tricky concept…