Posts in the category “CSS”

So I’ve been playing around with CSS and scrolling lately and this latest demo popped into my mind while driving home. I remember seeing this effect where some text remained stationary in the viewport but changed colour as the user scrolled. I always assumed it required some Javascript wizardry but could it be done with CSS only?

In a word, ”yes”.

File this one under “Silly Workarounds that work”. This is an ever-so-slight variation of CSS-Trick’s method.

There was some text that needed to be placed over an image. The problem was that while the text-color was fixed, the image colour wasn’t so there was a chance that you could have poor contrast between the text and the image.

The quick CSS workaround I used was to use text-shadow to add an outline (or stroke) like so:

.text-to-outline {
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

Hey, don’t judge me because it works. Play around with the value of the blur radius (set to 2px in the example) and the number of text-shadows applied.

This comes courtesy of Reddit which linked to an old Mozilla’s Bug-Tracker thread. 39 comments in total, not a very long read.

TL;DR Vendor-prefixed CSS Properties will eventually be removed. To future-proof your code, make sure to include the W3C standard property at the end of the declaration.

-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;

I have to take my hat off to those who replied to the thread. They did it with such patience, courtesy and professionalism. Kudos to them.

CSS veterans probably know this already but it’s one of those minor things that tripped me up when I was learning CSS.

Read more »

In The Easy Way to make nice looking Gradients I shared a technique to create pleasing gradients easily using a graphics application like Inkscape. The thing is you can just as easily apply the principles to CSS. Browser support for CSS3 gradients is quite good across the board (save IE9 & Opera Mini) so this’ll work fine.

Read more »

To test your CSS font stacks. Seriously.

So maybe you use @font-face or maybe you link to an external font like this:

<!-- Linking to Source Sans Pro hosted at Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And your CSS has code like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you type that font name correctly? Are you sure? Why not test it like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, "Comic Sans MS", Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you catch that? I added “Comic Sans MS” to the font stack. So if your intended font doesn’t show up, the visually distinct Comic Sans MS will alerting you to the problem.

Just remember to remove it from your production code. You wouldn’t want to be embarrassed, would you?

Or, you know, you could just type it into your website inspector of choice to double-check the font stack works. Just saying…

When I was studying in the National University of Singapore our lecturers were eager to raise us not merely as “Programmers” but as Software Architects. Where the Programmer lays bricks, the Software Architect is thinking about higher-level design: where do those walls go in the first place?

In recent years, something similar has been happening with CSS — people started thinking about CSS architecture to ensure that styles were reusable and the website itself could scale. I don’t know who kicked off the discussion but my first exposure to a formalized, higher-level technique of writing CSS was Object Oriented CSS (OOCSS). The name threw many off and I found myself comparing it to the Object Oriented Programming Methodology from my days learning Java.

Read more »