Tutorial 10 Css Tricks You Probably Overlooked


Content Writer
10 CSS tricks you probably overlooked

There are many CSS trick used by the web designers to achieve great results. I will be introducing 10 CSS tricks that are different and you may not know.

1. Write vertically

In CSS there are codes to the writing mode. You should always try to write vertically, it will useful while you display Chinese and Japanese. You can also use this to display text vertically to save the horizontal space like in table headers.

2. Reuse Color value

You can also reuse the color attribute value by adding the color attribute from the keywords currentcolor to the keyword. This way you can reuse the color to make the page look beautiful.

3. Blend Backgrounds

You can have as many as backgrounds you have. And also adding to it you can also blend the background using the keyword background-blend-mode. 16 blend modes are present at the moment totally. So if you are able to blend background it would be very helpful.

4. Blend elements

Like blending backgrounds you can also blend the contents by overlapping the elements using the mix-blend-mode. Firefox supports all but chrome doesn’t. You can mix an image and stack it with a graphical theme. This resulting element will be good.

5. Ignore pointer events

You can make any element as pointer by using the single attribute called pointer events. By giving this value as none it will make it point to nothing as there is not the target pointer element.

6. Decorate split boxes

when you try to split the boxes the edges of the boxes looks like they are sliced so you can try to decorate the split boxes by using the keyword or attribute box-decoration-break: clone. In IE it doesn't render the box decoration but will render the doc shadows. There is a horizontal padding and you may need to fill it with spaces.
7. Collapse table elements

There is an another attribute which is made for the rows and columns, the attribute is visibility:collapse. In this case the rows and columns are not kept empty the content from the other cell is being occupied.

8. Create columns

Using the columns attribute, you can always create a layout for the column. There are various attributes which is used for column like column-count which is used to specify the no. of columns and column-width to specify the width of the column to be rendered. If you are to use an image its width and column width should match

9. Make elements resizable

The CSS3 attribute resize will help in resizing the element vertically or horizontally or both. It is also used to disable the re-sizeabliity in the text area. With resize attribute the size of the element can be made as per the desire of the user.

10. Create patterns

The gradients which are present in CSS3 attribute can be piled up together to produce patterns. This supports in creating a nice background image rather than using some external image as background. But it is tough to implement it.