TECHY360
Everything You Need To Know About Tech

15 Advanced CSS cheat sheets to save time and nerves

0 25

We solve actual layout problems and bring beauty to your site using CSS. 15 snippets that are sure to come in handy.

Attention! Some of the techniques listed in this article have limited browser support.

Markup

1. Align the item vertically

It is hard to believe that once vertical alignment of an element inside a container was a difficult task for a layout designer. We now have Flexbox – no more suffering!

To achieve this, you only need a couple of lines of CSS:

<style>
  .align-vertically {
    display: flex;
    align-items: center;
  }
</style>

<div class="align-vertically">
  Hello!
</div>

The property align-itemscontrols the arrangement of elements along the transverse axis of the flex container. By default, this axis goes from top to bottom, perpendicular to the main.

The Flexbox model gives the layout designer a lot of useful tools – don’t be too lazy to study them. Do you know what actually happens when you create a flex container ?

2. Stretch the block to full screen

Units of the viewport vh , and vw– one of the most wonderful features of modern CSS. 1vhequal to one percent of the entire height of the viewport, and 100vhthis is 100%, that is, the entire viewport. Now you know how easy it is to stretch a block to the full height of the screen.

.fullheight { 
   height: 100vh; 
}

The width is the same, only vhuse instead vw.

3. Figure wrap around images

How to make text flow around the image, you know for sure. The property has floatbeen in CSS since time immemorial, and we all had to use it.

But did you know that flow can be much more beautiful than what offers us float? The new CSS shape-outside property allows you to control the geometry of this process. For example, you can make the text flow around not a rectangle, but a circle!

.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

Remember that the part of the image that remains outside the circle does not disappear, so the text will creep onto it.

4. String trimming

The problem of too long text in a container too small is one of the most frequent in web development.

But solving it in CSS is very simple:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  1. transferred to the second line;
  2. overflow: hidden – hides all unnecessary outside the block;
  3. text-overflow: ellipsis– adds intriguing ellipsis.

5. Automatically add quotes

Quotation marks are an important typographic element of your site. They improve readability and overall user experience. It turns out there is no need to arrange them manually. You can simply use the CSS property quotes, which will do everything for you.

q {
    quotes: "“" "”";
}    

6. Beautiful initial letter

Highlighting the first letter of a paragraph is a very effective technique for formatting text. It’s not difficult to do this.

We just use the pseudo-class :first-letterand apply the necessary styles to it:

.initial { 
  float: left; 
  font-size: 300%;
  color: crimson;
  margin: -5px 10px 0 0;
} 

The property float: leftrequires that the top of the first letter coincides with the top of the first line. You can adjust the size, color, and indentation to your taste.

7. Highlight text

There are some little things that imperceptibly, but significantly affect the user experience. One of them is the background of the selected text. If it is in harmony with the rest of the design of your site, visitors will like it.

Moreover, this requires only a couple of lines of CSS code:

::selection {
  background-color: #013896;
  color: #f1f1f1;
} 

8. Gradients

Ten years ago, there was only one way to decorate the site with a gradient fill – draw it and substitute it as a background using background-image. Fortunately, with CSS3, this nightmare is a thing of the past.

Colorize the element with a gradient body:

Related Posts
1 of 13
body {
  background: linear-gradient(to right,#000,#0575e6);
  text-align: center;
}

The linear-gradient () function creates a linear gradient from the transmitted colors, the direction of which can be controlled.

Using specific properties with a prefix, the -webkit-gradient can even be applied to the text:

h1 {
  font-family: Arial;
  font-size: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Remember that many browsers do not support this trick.

9. Styling broken images

Unloaded images look ugly, but are quite common.

With a few lines of CSS, we can add at least an error message to your users:

img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Pseudo :beforeand :afterdisappear when the image is loaded.

The function attr()allows you to display the contents of the srcimage attribute on the page.

10. Smooth change of properties

The property transitionallows you to change the value of other properties smoothly, without sudden transitions, which improves the user experience. For example, you can use it to change the color of the link on hover.

a {
 color: #1b80b7;
 transition: all .2s linear;
}

a:hover { color: #52bff2; }

You can use this technique for many other properties (element dimensions and its position on the page, background color, frame thickness, etc.)

For a better understanding, keep a detailed CSS transition guide.

11. Animations

Animations are supported by all browsers – and this is great because you can do incredible things!

An ad @keyframes example { } creates an animation called example, which can be applied to any element. This animation consists of only two key frames – but there can be many more if you want!

12. Image scaling

One of the most popular effects applied to images is scaling while maintaining the original block size. It looks cool and does not violate the structure of the page. And if you add another color change to this, there will be a fairy tale!

This is achieved using the transform scaleand properties filter. So that they change smoothly, we use the property we already know transition.

We place the image inside the container with overflow: hidden, which will hide the excess when zoomed.

.image {
  width: 100%;
  overflow: hidden;
}

.image-colorize img {
  transition: transform .5s, filter 0.5s ease-in-out;
  filter: grayscale(100%);
}

.image-colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
} 

There are many filters in CSS.

.blur{
   filter:blur(5px);
}

.brightness{
   filter:brightness(3);
   filter:brightness(0.5);
   filter:brightness(20%);
}

contrast{
   filter:contrast(1.5);
}

.saturation{
   filter:saturate(200%);
   filter:saturate(3)filter:saturate(0.5);
}

.transparency{
   filter:opacity(70%);
   filter:opacity(0.7);
}

.inversion{
   filter:invert(70%);
   filter:invert(0.7);
}

.sepia{
   filter:sepia(70%);
   filter:sepia(0.7);
}

.grayscale{
   filter:grayscale(70%);
   filter:grayscale(0.7);
}

.hue-rotate{
   filter:hue-rotate(200deg);
}

drop-shadow{
    filter:drop-shadow(5px 5px 5px #333);
}

Lists

13. Markers

14. Zebra List

Sometimes it’s useful to colorize the list items with different colors – this makes the perception easier. We use the nth-of-type and pseudo-class

<style>
#zebra-list li:nth-of-type(odd){ background: #f7d776 }
#zebra-list li:nth-of-type(even){ background: #c9d5ea }
</style>
<ul id="zebra-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul> 

It turns out such a zebra

CSS Variables

The ability to create variables ( custom properties ) really cool CSS, bringing it closer to a full-fledged programming language.

The syntax for declaring and using variables may seem a little strange, it is not surprising if you cannot remember it in any way:

:root {
  --main-bg-color: coral;
  --main-txt-color: #fff; 
  --main-padding: 15px; 
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
} 

The variable name necessarily begins with two hyphens, and the function helps to get the value var().

Don’t be afraid to experiment with styles, but don’t forget about basic things too! These little snippets are not just fun. They may come in handy for solving problems in “combat conditions”.

Get real time updates directly on you device, subscribe now.

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More