CSS Tips and Tricks

#001

For the last couple of months, we at Skynox Tech's Twitter account, sharing a series of tweets known as #CSStricks. We have shared a lot of tricks that otherwise one could not find in online tutorials. Today we decided to compile all those tips and tricks under one hood so that you can find all those in a single place. These tweets will not only improve your CSS game but also helps you save a ton of codes line and help your own touch to your projects.

So here are the tips and tricks of CSS:-

1. Smooth Scrolling

When you visit some websites and try to go to different sections, it scrolls smoothly to that section. It is not some top tier coding, but just one line in your CSS can help you achieve it.

XenoX

@xenoxdev

Use this simple CSS trick to add smooth scrolling behavior to your websites!!

See live:- ow.ly/R3Rx50CikF7

#csstricks
#webdevelopment

09:40 AM - 12 Nov 2020

2. Truncate text using pure CSS

Sometimes the text is not consistent in cards and makes them look chaotic. Use this trick to limit the text on cards using just CSS.

XenoX

@xenoxdev

Do you know you can truncate text using CSS only.

Check it out: ow.ly/VLNO50Chkbg

#CSStricks #CSS #DEVCommunity #100hoursofcode #fluttercommunity

06:00 AM - 11 Nov 2020

3. Input Caret Color

Want to give a little personal touch to your site. Use this css trick to change the color of the input field-caret to give it a custom color of your liking.

XenoX

@xenoxdev

Here is a cool trick to change the "color of the Input blinking cursor."

See live: codepen.io/teamxenox/pen/

#CSStricks #CSS #Coding

11:00 AM - 01 Dec 2020

4. Drop Shadow and Box Shadow

Do you know that you can use "Drop shadow" for the transparent images?
It will give a much better shadow effect.

XenoX

@xenoxdev

"Do you know that you can use "Drop shadow" for the transparent images."

It will give a much better shadow effect.

See live: ow.ly/3BDT50CFzv9

Want to learn more about when to use what?
Read: ow.ly/nXDQ50CFzva

#CSStricks #CSSDaily

08:00 AM - 09 Dec 2020

5. Drop Cap Letter

You might have seen some blogs with the first letter being huge and the text is wrapped around it. That can be achieved with this simple trick on your text block.

XenoX

@xenoxdev

CSS Trick: #2

Want that drop character at the beginning of your paragraphs?

Use this cool trick to get your drop character.

Read more: css-tricks.com/snippets/css/d

#CSStricks #CSS

10:00 AM - 18 Dec 2020

6. Center that Div

Centering your div element can be daunting sometimes, but not when you have this trick in your toolbox. You can center any div with just a couple of lines of CSS.

XenoX

@xenoxdev

CSS Trick #5

Want to center your content on the page vertically?

Use these CSS Grid properties to do like a pro!!
.
.
#CSS #CSStricks

09:23 AM - 23 Dec 2020

7. No value, No problem

Display links when the element has no text value but the href attribute has a link. Pretty neat, right?

XenoX

@xenoxdev

HTML Ticks #1

"Display links when the <a> element has no text value but the href attribute has a link."

Thats pretty convenient, right?

#HTMLtricks #100daysofCode

10:00 AM - 04 Jan 2021

8. Inherit box sizing

Let "box-sizing" be inherited from HTML. This makes it easier to change "box-sizing in plugins" or other components that leverage other behavior.

XenoX

@xenoxdev

CSS Tricks #7

Let "box-sizing" be inherited from HTML.

This makes it easier to change "box-sizing in plugins" or other components that leverage other behavior.

#CSStricks #CSS

11:00 AM - 05 Jan 2021

Bonus tips:-

** Bonus 1: Better User Experience **

With the modern web technologies enhancements, one of the key focus points is user experience. Even if your website has the best designs but poor user experience, you will not be able to retain them. This is a cool user experience trick to mute videos on autoplay and let the user decide if they want to hear it.

** Bonus 2: Selection pseudo class **

Most of the time when you visit any site and try to copy some text, it is just the blue color selection with white text. Use selection pseudo-class to give a personal touch to text selection on your websites. This will give them a personal touch and make your site stand out!

That's it, folks!
These are the all tricks I have to share for now. If you want to see more such content and tips and tricks of other web technologies like react, ES6, etc., do follow us on Twitter at @XenoxDev. We share a lot of cool content and resources to learn web development so make sure to give a follow.

Until then