Snippets

Short solutions to common problems that can be copied and pasted.

1. CSS

   External link with an appended icon

   A common style is to append an icon to an external link. It gives a hint to users that they will be navigating away from the website.

2. JavaScript

   Play an audio file (sound/music)

   This is the simplest way to play an audio file without including an audio HTML element in a page.

3. CSS

   Truncate text after multiple lines with an ellipsis

   Sometimes you want a layout to be consistent. You may need to restrict the length of text content to achieve this. To hint that there is more text, an ellipsis can be appended.

4. CSS

   Truncate text after multiple lines with fadeout

   Sometimes you want a layout to be consistent. You may need to restrict the length of text content to achieve this. To hint that there is more text, the last line can be faded out.

5. CSS

   Reveal truncated text restricted to one line with hover effect

   For text truncated on a single line, we should provide a way for users to see the entire text content. We can do this through a hover style.

6. CSS

   Truncate text after one line with an ellipsis

   Sometimes you want to restrict a text block to perserve a consistent layout. Long text can be cut off and have an ellipsis appended.

7. CSS

   Gradient text

   We can use a gradient to colour text to create an eye-catching asthetic. This has become a trendy look on websites showcasing tech products.

8. CSS

   Background overlay

   Overlays apply a gradient above the background but below the content. This can increase the contrast of content against a background to make it stand out more.

9. JavaScript

   Reload an iframe externally

   How to give users the option to reload the content in an iframe from the outside with a button.

10. CSS

    Animate the drawing of line

    How to make a CSS animation to draw a line. The line is a SVG path.