Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Useful CSS snippets

Saturday, December 22nd, 2018 by Servage

cssStylessheets define the visual appearance of your website. Technically speaking the stylesheets include instructions on sizing, position, color and all other aspects of the DOM elements’ display. Nowadays there are frameworks to make the process of defining your stylesheets easier. Usually the work is still done by hand in text editors and sometimes aided by tools, color pickers etc. Also stylesheets have transformed from being mere CSS to the smarter and more intelligent systems SASS and LESS, which allow for a programmatic approach to writing stylesheets. The later two languages allow you to define variables and use them in calculations you can perform in your stylesheet. Also code blocks allow for smarter nesting of style instructions compared to the traditional CSS way of doing things. However, no matter how smart the helping language can be, it always ends up converting the stylesheet into a traditional CSS file, because that is what the browser needs.

Inspirational snippets

Working with CSS is therefore still a funny mixture of art, hassle and technical know-how. Therefore it is always nice to be inspired and get some new ideas on how to solve things or how to style things in a different way.

You can have a look at this CSS snippets directory which contains a range of useful and clever ways of dealing with styling issues. Simply browsing around may give you some new ideas or solutions you had not thought of before.

Example snippets

The stitched look is a good snippet which explores a combination of container display settings. It utilizes border styling, radius and shadows to create a nice effect of something being cut out of paper or stitched up.

.stitched {
   padding: 20px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

<div class="stitched">
  Stitched
</div>

Another example is showing how you can comment inside CSS files like you can in most other programming languages. This is useful for explaining something inline, or for removing something temporarily, so the CSS is not used but also not deleted.

body {
    font-size: 62.5%  /* 1em = 10px */
}

Changing images is usually something you might do with a graphics editor, but you can in fact do some effects with CSS as well. The following snippet example flips an image.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

There are numerous snippets in the library and you can get great inspiration from them as well as they benefit your CSS learning process, because you can view real examples rather than the theoretical documentation. CSS can do more than you think!

Useful CSS snippets, 4.6 out of 5 based on 5 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.