11가지 CSS 사용법

Photo by Oladimeji Odunsi on Unsplash

In this blog, we will be seeing some of the incredibly useful CSS code snippets that are short yet powerful.

Using these code snippets you can instantly improve the look and feel of your website.

Below are the 11 CSS code snippets that are insanely useful:

 

1. Scroll behavior

html {
  scroll-behavior: smooth;
}

This simple line of code can save you from writing some complex JavaScript.

Demo

This property enables us to define whether the scroll location of the browser jumps or smoothly transition when a user clicks a link that targets an anchored position within a scrolling box.

Chrome version 61+, Firefox 36+ and Edge version 79+ support this property.

 

2. Clip path property

clip-path: circle(40%);
clip-path: ellipse(130px 140px at 10% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

The clip-path CSS property allows us to control what part of the clipping region can be shown.

The content inside the region is shown, while the outside portion is hidden.

Chrome version 55+ and Edge version 12+ support this property. You can learn more about this on the MDN docs.

 

3. Filter property

filter: drop-shadow(16px 16px 20px red);

Source.

You can easily add amazing filters to your image using this CSS one-liner.

This property allows to easily apply visual effects like drop shadow, blur, color shift, invert color, and so on.

Some of these properties are given below.

filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%);

Chrome version 53+, Firefox version 35+, and Edge version 12+ support this property.

 

4. Pseudo-classes

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

The :is() function helps us to apply the same style to a bunch of different elements using selector lists.

These selector lists are passed as an argument to the :is() function and any element that can be selected by the selector list is affected.

It can come in handy in writing short CSS files and implementing the DRY( Don’t Repeat Yourself) principle.

Chrome version 10+, Firefox version 29+, and Edge version 12+ support this property.

Chrome version 88+, Firefox version 78+, and Edge version 88+ support this property.

 

5. User select property

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

Ever wanted to prevent your users from copying text?

If yes, then user-select is the property that will allow you to do just that.

The user-select property specifies whether the text can be selected or not.

Chrome version 54+, Firefox version 69+, and Edge version 72+ support this property.

 

6. Change cursor

div{
   cursor:alias;
}

You can easily change the look of your cursor with this simple yet powerful property.

Demo. Source.

There are a ton of values you can use. Different cursors convey different meanings.

For example, movable objects have a cursor:grab property to convey that they are draggable elements.

Chrome version 1+, Firefox version 1+, and Edge version 12+ support this property.

 

7. Caret color

input {
  caret-color: red;
}

With just plain CSS, you can change the color of the cursor in inputs, text areas, or any element that is editable.

Depending upon the site, it can help you provide uniformity to your website.

Chrome version 57+, Firefox version 53+, and Edge version 79+ support this property.

 

8. Custom Scrollbars

::-webkit-scrollbar {
  width: 20px;
}

You can easily customize the scrollbar to provide a unique touch to your website with this property.

Moreover, you can also change the scrollbar track and thumb easily.

You can check browser compatibility on the MDN site.

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);}
 
body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}

 

9. Writing mode

writing-mode: vertical-lr;

Writing mode when used right can help you add an interesting twist to your site.

Writing mode sets whether lines of text are laid out horizontally or vertically. You can also set it for the entire project by applying it to the root element of the HTML file.