loading...
Cover image for Rarely known CSS Tips

Rarely known CSS Tips

dhanushxeno profile image DHANUSH N Updated on ใƒป2 min read

๐Ÿ’ก CSS Tip 1๏ธโƒฃ

The CSSย ๐—ณ๐—ผ๐—ป๐˜-๐—ธ๐—ฒ๐—ฟ๐—ป๐—ถ๐—ป๐—ดย property defines the way specific pairs of letters are spaced.

๐Ÿ’ก CSS Tip 2๏ธโƒฃ

Theย ๐—ฐ๐˜‚๐—ฟ๐—ฟ๐—ฒ๐—ป๐˜๐—–๐—ผ๐—น๐—ผ๐—ฟย keywordย represents the calculated value of the elements color property.

Alt Text

๐Ÿ’ก CSS Tip 3๏ธโƒฃ

๐—ฅ๐—š๐—•๐—ฎ is used to define the color of an object. The advantage of using RGBa method is the ability to take advantage of the last element of the equation, which isย a (๐—ฎ๐—น๐—ฝ๐—ต๐—ฎ ๐˜๐—ฟ๐—ฎ๐—ป๐˜€๐—ฝ๐—ฎ๐—ฟ๐—ฒ๐—ป๐—ฐ๐˜†)

Alt Text

๐Ÿ’ก CSS Tip 4๏ธโƒฃ

Css comes with some filter effects. Similar to image editing the filter ๐—ด๐—ฟ๐—ฎ๐˜†๐˜€๐—ฐ๐—ฎ๐—น๐—ฒ helps converting image to grayscale. The value 1 denotes 100%

Alt Text

Alt Text

๐Ÿ’ก CSS Tip 5๏ธโƒฃ

The ๐—ฏ๐—ฎ๐—ฐ๐—ธ๐—ด๐—ฟ๐—ผ๐˜‚๐—ป๐—ฑ shorthand property has the following longhand values

โžก๏ธbackground-color
โžก๏ธbackground-image
โžก๏ธbackground-repeat
โžก๏ธbackground-attachment
โžก๏ธbackground-position
โžก๏ธbackground-size
โžก๏ธbackground-origin
โžก๏ธbackground-clip

๐Ÿ’ก CSS Tip 6๏ธโƒฃ

The ๐—ฐ๐—น๐—ถ๐—ฝ property works only on absolutely positioned elements

๐Ÿ’ก CSS Tip 7๏ธโƒฃ

The ๐˜„๐—ผ๐—ฟ๐—ฑ-๐˜„๐—ฟ๐—ฎ๐—ฝ property is similar to ๐—ผ๐˜ƒ๐—ฒ๐—ฟ๐—ณ๐—น๐—ผ๐˜„-๐˜„๐—ฟ๐—ฎ๐—ฝ.

The only difference is only few new browsers support overflow-wrap

๐Ÿ’กCSS Tips 8๏ธโƒฃ

Enableย ๐—š๐˜‡๐—ถ๐—ฝ ๐—ฐ๐—ผ๐—บ๐—ฝ๐—ฟ๐—ฒ๐˜€๐˜€๐—ถ๐—ผ๐—ปย server-side whenever possible, it shrinks the size of files such as CSS without removing any of the content.

๐Ÿ’กCSS Tips 9๏ธโƒฃ

To vertically center contents of div

If one line of text set ๐—น๐—ถ๐—ป๐—ฒ-๐—ต๐—ฒ๐—ถ๐—ด๐—ต๐˜ to height of container. If non-text contents wrap the DIV in a ๐—ฑ๐—ถ๐˜€๐—ฝ๐—น๐—ฎ๐˜†: ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ DIV & set inner DIV to ๐—ฑ๐—ถ๐˜€๐—ฝ๐—น๐—ฎ๐˜†: ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ-๐—ฐ๐—ฒ๐—น๐—น

๐Ÿ’กCSS Tips 1๏ธโƒฃ0๏ธโƒฃ

๐—Ÿ๐—ผ๐—ฏ๐—ผ๐˜๐—ผ๐—บ๐—ถ๐˜‡๐—ฒ๐—ฑ ๐—ผ๐˜„๐—น ๐˜€๐—ฒ๐—น๐—ฒ๐—ฐ๐˜๐—ผ๐—ฟ

  • * + *

Useful for situations when you have multiple elements of the same kind that need some spacing.

๐Ÿ’กCSS Tips 1๏ธโƒฃ1๏ธโƒฃ

๐˜€๐—ต๐—ฎ๐—ฝ๐—ฒ-๐—ผ๐˜‚๐˜๐˜€๐—ถ๐—ฑ๐—ฒ property

Alt Text

Alt Text

To get to know more technical stuff, connect with me via Twitter

https://twitter.com/Dhanush_Xen?s=09

Posted on by:

Discussion

pic
Editor guide
 

To vertically center contents of div
If one line of text set ๐—น๐—ถ๐—ป๐—ฒ-๐—ต๐—ฒ๐—ถ๐—ด๐—ต๐˜ to height of container. If non-text contents wrap the DIV in a ๐—ฑ๐—ถ๐˜€๐—ฝ๐—น๐—ฎ๐˜†: ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ DIV & set inner DIV to ๐—ฑ๐—ถ๐˜€๐—ฝ๐—น๐—ฎ๐˜†: ๐˜๐—ฎ๐—ฏ๐—น๐—ฒ-๐—ฐ๐—ฒ๐—น๐—น

This is outdated. Just use flexbox or CSS grid. Don't use table formatting.

 

I always use

.elm{
display:flex;
align-items:center;
justify-content:center;
}
Enter fullscreen mode Exit fullscreen mode
 

Yes you are right. This can be useful to beginners who are in the process of learning the css properties before they get into flex box or css grid

 

currentColor Whoa, thanks! And it looks like it's actually kind of old -- how have I never come across this?!

 

So thatโ€™s what rgba is! Thank you! Thatโ€™s one of those things that I see frequently and keep forgetting to lookup. Great article!

 

currentColor is one I forget about all the time! Iโ€™m going to look into font-kerning tomorrow though, pretty sure I can fix some very annoying spacing issues Iโ€™ve noticed recently with it.