Michael Gearon

UX Designer at BrandContent

CSS (15)

CSS custom properties for cascading variables

Preprocessors like Less and Sass have helped over the past few years to keep development CSS codebases simple, organised and maintainable. One of the most used features in preprocessors is the ability to use variables in the stylesheet which was not possible natively in CSS. Now it is possible to use CSS custom properties in native CSS with support across most browsers apart from IE.


CSS Borders

The border property allows you to specify how the border of the box representing an element should look. The border module consists of the following properties, border-color, border-style and border-width. In this post we will look at all three properties and how we can combined them into the shorthand property.

CSS Padding and Margin

The most two popular CSS properties are margin and padding, they are used for spacing-out elements. Simply put the padding is the space inside something whilst the margin is the space outside of something.


CSS Font Smoothing in Webkit and Firefox

Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers make the fonts look slightly thicker, using just two lines of CSS we can solve this problem.


Pseudo Class

A pseudo-class starts with a colon (:),it is similar to a class in HTML, but it’s not specified explicitly in the markup. When creating a pseudo-class there can not being any whitespace between a top selector or universal selector and the colon, nor can whitespace appear after the colon.

In this post we will look at the :first-child, :link, :visited, :hover, :active, :focus and the :lang pseudo-classes.

Hiding Elements using CSS

We have plenty of options at our disposal at hiding elements with CSS. In this post we will explore the options we have and more importantly the pros and cons of each choice. The ability to hide elements is essential in modern websites and web applications, it is quite commonly used alongside Javascript as well.

Quick Tip – Using CSS3 For Alternate Row Colours

Using the CSS3 pseudo class nth-child we can style table rows to be alternating colours.Browser support using the nth-child is good, with all major browsers supporting it.

CSS How to Style External Links

Styling an external links is a nice visual indictor for users that if they click the link they will be taken to another website. This is particularly useful for websites that have reference links such as Wikipedia.


Opacity Property in CSS

The CSS opacity property controls how transparent an element is. The values can be between 0 (not visible) and 1 (completely visible). The initial value is 1, it is also worth noting that if you apply transparency to the parent that all the child elements will be effected too.

CSS Cursors

Using the correct type of cursors is becoming more important than ever with the increase in web applications. The cursor property controls the styling of the mouse cursor. Obviously this property is only for operating systems that use a mouse e.g. it wouldn’t apply a phone or a tablet because there is no mouse. From a UX perspective it is essential to utilise this property as it conveys meaning.

As well as the standard cursors there is custom cursors which we will look at it too.

Have an idea? Get in touch