Rarely known CSS Tips

💡 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.

💡 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 (𝗮𝗹𝗽𝗵𝗮 𝘁𝗿𝗮𝗻𝘀𝗽𝗮𝗿𝗲𝗻𝗰𝘆)

💡 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%

💡 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

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