CSS (Cascading Style Sheets) has fun­da­men­tal­ly changed the World Wide Web. Pre­vi­ous­ly, the display in­struc­tions for layout, ty­pog­ra­phy, etc. had to be painstak­ing­ly pro­grammed into a website’s HTML document, but now the style sheet language is able to do it in a much shorter amount of time and has made the previous in­flex­i­ble method a thing of the past. Display-oriented HTML elements have been con­sid­ered outdated since HTML5 came on the scene – content and pre­sen­ta­tion is now dealt with sep­a­rate­ly.

CSS is being steadily developed as 'living standard' which opens up many versatile and complex design pos­si­bil­i­ties, but in return, is becoming in­creas­ing­ly more com­pli­cat­ed to keep an overview of. Here you will find the most in­ter­est­ing and useful tricks, including the cor­re­spond­ing CSS snippets.

Numbering headings

If you’ve added different headings and sub headings in your HTML document and numbered them before, you probably did this manually or by using a script. But instead, you can simply use CSS and let the style sheet language do the counting. This old CSS trick, which is supported by all current browsers, can be used with the following CSS snippet: 

#Heading {
counter-reset: heading;
}
h1:before {
    content: counter(heading)") ";
    counter-increment: heading;
}
h1 {
    counter-reset: subheading;
}
h2:before {
    content: counter(heading)"." counter(subheading)") ";
    counter-increment: subheading;
}
body{
    font-family: courier new;
}

The results will look like this:

Image: Numbered headings
CSS can be used to number headings and sub headings

Hiding elements in an SEO-friendly way

Trying to hide the contents of the HTML document using commands such as display: none; or vis­i­bil­i­ty: hidden, does not perform well with search engines. Although excessive use is not rec­om­mend­ed, the following code provides an excellent way to get around these two elements skill­ful­ly:

.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Creating text shadows

Shading can be produced in texts using graphic programs, but this requires the necessary know-how as well as pre­vent­ing the content from being legible for search engines. Ever since version 3 of the style sheet language, there have been several CSS effects which lead to at­trac­tive results when combined together and do not alter the un­der­ly­ing text elements. The following CSS tip demon­strates the shading option from the style sheet language:

p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}

With the help of this code, <p> elements can also be defined so that they have two shadows. This number can be increased, but make sure you always use a comma for sep­a­ra­tion. The first two parts of in­for­ma­tion determine the po­si­tion­ing of the shadow – first the X co­or­di­nate and then the Y co­or­di­nate. The third piece of in­for­ma­tion defines the size. In the last place you can specify the color of the shadow, either by RGBA in­di­ca­tion (300, 180, 100, 1) like in the first row, or absolute like in the second (red). The example shows what it looks like after being applied:

Image: Text excerpt with shading
This is how text shading looks when the above code is applied

Changing website elements with CSS filters

CSS is not only a good al­ter­na­tive to Photoshop when it comes to shading; the style sheet language also comes with useful filter effects, similar to those of image editing programs. This is how graphics, back­grounds, texts, and videos can be cre­ative­ly adapted by in­creas­ing the bright­ness, changing the contrast, or using grayscale. The filter options are available in nearly all modern browsers (except Internet Explorer). You can see the syntax of these CSS effects in the grayscale filter example: 

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

The specified filter (grayscale in this case), is displayed in paren­the­sis and comes after the specific value, which de­ter­mines the strength of the filter – in this example, the value (1) cor­re­sponds to 100%.

Image: Nature photos with CSS grayscale filter
CSS enables you to customize graphic web elements with filter details such as 'grayscale'

Ad­di­tion­al features that could prove useful:

Filter De­scrip­tion Value
blur(VALUE) Soft focus Radius in Pixels
bright­ness(VALUE) Bright­ness Standard: 1, brighten: >1, darken: <1
contrast(VALUE) Contrast Standard: 1, increase: >1, decrease: <1
invert(VALUE) Invert colors Value of 1: complete inversion
opacity(VALUE) Opacity Maximum value: 1 (the element com­plete­ly dis­ap­pears)
saturate(VALUE) Sättigung Standard: 1, increase: >1, decrease: <1
sepia(VALUE) Sepia colors Maximum value: 1 (cor­re­sponds to a Sepia tone of 100%)

Optimally adjusting image captions

There aren’t any specific rules to adhere to when it comes to the de­scrip­tive snippets of text placed below images. Centering the caption looks better when the de­scrip­tion is no longer than one line; otherwise it can end up looking sloppy. On the other hand, using left alignment for short captions is also not rec­om­mend­ed. The solution is to give separate in­for­ma­tion in the container element <figure> as well as in the element <fig­cap­tion> since both are used as standard when it comes to image captions. Here is the cor­re­spond­ing CSS snippet: 

figure {
    text-align: center; 
}
figcaption {
    display: inline-block; 
    text-align: left;
}

This CSS trick causes the image caption to be left-aligned by de­f­i­n­i­tion, but it’s actually shown centrally due to the inline-block in­for­ma­tion, which comes into effect when the piece of text does not cover the full length of the image.

Em­pha­siz­ing the first letter in excerpts

With the help of pseudo-classes it is possible to emphasize single specific HTML elements such as the first letter of a paragraph. With ::first-letter you can easily implement this command, which is often seen in stories, es­pe­cial­ly fairy tales: 

p{
    font-family: "bookman old style"
}
p:first-child::first-letter{
    font-family: "papyrus";
    font-size: 25px
    font-weight: bold
}

In this par­tic­u­lar snippet, the font families used are Papyrus (for the first letter), and Bookman Old Style (for the rest of the text). The result being:

Image: Text excerpt with first letter emphasized
The CSS pseudo classes make it possible to highlight in­di­vid­ual HTML elements. Here the class ::first-letter has been used

Use the parallax effect

Many modern sites are built on the parallax effect, which the visitor triggers when scrolling. This is where the back­ground moves at a slower rate to the fore­ground and thus creates a 3D effect. The effect is achieved using JavaScript or jQuery. The following CSS3 trick shows how you can in­cor­po­rate parallax scrolling into your website just using the style sheet language:

p {
    width: 100%;
    margin: auto;
    font-size: 50px;
    transform: scale(.5);
    font-family: courier new;
    font-weght: bold;
}
div {
    background-image: url("URL DES HINTERGRUNDBILDES");
    background-attachment: fixed;
    transform: scale(1.25);}
body {
    height: 100%;
    overflow: scroll;
}

Using the parameter back­ground-image: url, you can specify the URL of the back­ground image. The values used here regarding ty­pog­ra­phy and element size can be in­di­vid­u­al­ly con­fig­ured.

High­light­ing oblig­a­tory form fields

You can optimize forms embedded in your website by using :required and :optional. Both the pseudo classes allow color to indicate which form fields have to be filled out and which are optimal. The cor­re­spond­ing CSS snippet looks like this:

:required {
    border: 1px solid red;
}
:optional {
border: 1px solid black;
}

In this case, the required fields get a red border while the optional fields are displayed with a plain black frame:

Image: Highlighted form fields
The two applied CSS pseudo classes highlight certain form fields depending on their im­por­tance

Lists with tri­an­gu­lar bullet points

If you have unordered lists in your HTML document, you don’t always need to use the standard round bullet points. With the following CSS trick you can easily create tri­an­gu­lar bullet points:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

The results will look like this:

Go to Main Menu