By tag: css

Develop right in Chrome DevTools ... with Sass too! (Google I/O 2013)


Building a simple banner heading effect using HTML and CSS

Add a bit of style to headings or other information with a pure HTML and CSS banner effect.

Let's look at how to create the effect used in this box. First we need some sample HTML to use in our examples:


Building a banner heading effect using HTML and CSS: Part 2

We take a look at how to add a bit of extra flourish to a pure HTML and CSS banner. We’re going to add a tail to an existing banner. You’ll need to use the code for the effect already created in part 1.



CSS :nth-child selector with a grid

The :nth-child CSS selector (or pseudo-class) has a number of uses. We’ve looked at some basic CSS :nth-child selector techniques before. Now, we’re going to look at some examples with grids, using some of the same selector patterns and some different ones.



Multi-column lists losing their bullets

If you’re trying the CSS columns property, or its various browser prefixed variants, you may notice your bullet points disappearing. This can happen on Chrome and to a lesser extent on Opera.

The Problem

Take the following HTML for a list:


CSS :nth-child selector

The :nth-child CSS selector (or pseudo-class) can be pretty useful, for example to select odd and even rows in a table.

We apply a variety of styles to show some different effects.

Setting Up

The examples that follow use this HTML snippet:


CSS: top, right, bottom, left

Do you ever forget what order sizes should go in CSS? The answer is top, right, bottom, left. This applies to styles like border, margin and padding. It is possible to use border-top, border-right, border-bottom, border-left and so on...


Rotating things with CSS3 (and javascript) - part 2

The CSS transform: rotate() property lets us rotate elements on the page. By putting this together with some jQuery-based javascript, we can click and rotate elements in place.

For the basics of CSS3 transform: rotate, see part 1.




A CSS slide up splash screen

You can highlight important content and add an aspect of fluidity to a page by creating a slide up effect over your splash content with CSS.

First we need some sample HTML.

<header class=...

Rotating things with CSS3

askew on Google search
A new angle on Google search

Have you ever wondered how to make things a little askew as G...