Blog

CSS Attribute Selectors

Attribute selectors allow site authors to select elements based upon attribute values rather than tag name, class or id. This can be useful for styling forms and for reducing the number of non-semantic classes in your markup.

Example:

<form>
    <input type="text">
    <input type="radio">
    <input type="submit">
</form>

In the above example, each input element serves a different function for the form. They all look different and need different user interactions. Simply selecting the input element won’t do. So, how can we style each form element separately?

The attribute selector syntax allows us to select each form element based on the type attribute.

Example:

input[type="text"]{
    //style the text input
}

input[type="radio"]{
    //style the radio button
}

input[type="submit"]{
    //style the submit button
}

CSS3 Transitions

CSS3 transitions allows site authors to change numeric property values smoothly (from one value to another), over a given duration. This means that an author can change numbers and colors during some user interaction.

Example:

<a href="#">Hello!</a>

a{
    color: blue;
}

a:hover{
    color: red;
}

In the above example, the link has a text color of blue that changes to red when the link is hovered. The change in color is normally instantaneous. One moment it’s blue and the next red.

Adding a transition will allow that change to take place over some small amount of time. If we amend our code to include a transition attribute, then the color change will not be instantaneous. Rather, it will animate smoothly.

Example:

<a href="#">Hello!</a>

a{
    color: blue;
    transition: color 1s linear;
}

a:hover{
    color: red;
}

The transition property takes multiple values, the first of which is the property that should be transitioned. In this case, the property is “color”. The second value in the transition statement is the duration of the animated transition, in this case 1 second. The final value in the transition statement is the easing function. In this case the function is “linear” which means that the animation will be continuous and robotic. Another common easing function is “ease”, which means that the animation will slowly start, then be quick, and slowly stop. “Ease” tends to look more natural and gets used very often.

CSS3 Transforms

CSS3 Transforms allow authors to manipulate the scale, rotation, skew and translation of HTML elements. Each of these transformations is implemented as a function or as a matrix transformation. To play with each property please visit W3Schools Transformation Page.

Example:

transform: rotate( 45deg );

transform: translateX( 150px );
transform: translateY( 75px );

transform: skewX( 15deg );
transform: skewY( 15deg );

transform: scaleX( 2 );
transform: scaleY( 3 );
transform: scale( 1.5, 0.7 );

CSS3 Animations

Animations are a little more complicated than transitions because they require the author to create a named keyframe style that lists the states of the property being animated and at what time in the location the property should match a specific value.

Then the keyframe style is applied to the element that is being animated with the “animation” property. The animation property takes several values. The first is the name of the keyframe style. In the following example the keyframe style is named “example”.

The second value is the duration of the animation. This value is in seconds. In the following example the animation will take 2 seconds.

The third value is the easing function that determines the type of animation that will be used. “linear” is the default value, but “ease” looks more natural and is often used for interface elements.

Example:

@keyframes example {
    0% {
        background-color: red;
    }

    50% {
        background-color: purple;
    }

    100% {
        background-color: green;
    }
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 2s ease;
}

Box-sizing: Border-box

Border-box is an alternative to the normal box model. Instead of calculating an element’s total width as the sum of the width, padding, and border properties, the total width is always equal to the width property and any border or padding are subtracted from the width property.

To read about this please go to the CSS page

Google Fonts and Web Fonts

Google Fonts are a collection of about (at the time of this writing) 700 fonts that Google has made available for designers to use on their websites. Google Fonts is also a tool for selecting those fonts.

Basically, to use Google’s fonts, a designer can select the fonts they want and place them in a ‘collection’. That collection is then available through a remote css file. The remote file serves the font to a site so that the fonts can be used to style text.

Reset.css

Reset.css is designed to remove all of the default styling from browsers. This wipes out margins, padding and font sizing on all typographic elements, as well as sets many of the HTML5 elements to block level elements. This can mean that default styling takes a bit more work, but you won’t spend as much time trying to figure out how the browser is jacking your layout.

A complete description can be found at Eric Meyers’ website.

Normalize.css

Normalize.css is a CSS library that attempts to make all browsers behave as similarly as possible. Unlike reset.css, normalize doesn’t just wipe out all the default browser styles and leave all of the default styling to the site author. Instead, normalize fixes browser inconsistencies and implements sensible defaults that work everywhere.