Pratham Profile picture
I talk about web and social • DevRel @APILayer • Building https://t.co/niju9j3UA2 & https://t.co/TxBXHrPKDu • Prev @Rapid_API @HyperspaceAI

Apr 2, 2021, 11 tweets

10 HTML and CSS tips that you need to know😉

🧵👇🏻

1️⃣ Customize the text selection

- The ::selection pseudo-element matches the portion of an element that is selected by a user.

2️⃣ Range Input

- You can change the styling of input type="range"

3️⃣ Custom Scrollbar

- Customize the scrollbar of your website in few minutes

4️⃣ Scrollable element

- If you have some fixed size element then use overflow: auto. It will convert your element into scrollable element

5️⃣ Underline text like a pro

- You can create "wavy" line using one line of CSS

6️⃣ will-change property

- You can optimize the performance of your web page by adding one line of CSS. will-change tells the browser that how an element is expected to change

7️⃣ Image Carousel

- You can create carousel using 2 lines of CSS

8️⃣ Regular Expression

- You can use "pattern" attribute in order to specifies the regular expression

9️⃣ Intact your company name

- Use "translate" attribute and set it value to "no" for your company name. So that in case, the webpage is translated into another language, your brand name will remain intact

🔟 Icons using HTML

- You can use HTML entity or HTML code to print some cool symbols or icons

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling