CSS Tips you may not know.

A Thread πŸ‘‡
1⃣ Smooth Scrolling

The scroll-behavior property will make the scrolling experience smooth and a lot better for the user.

Add this property in your code and see the difference.
2⃣ Center Anything

To center anything horizontally and vertically inside a container element, you just need these three lines of code and it will make the desired element centered.
3⃣ Use an image/emoji as a cursor.

You can define a custom cursor using the CSS cursor property.
4⃣ Resize element both horizontally and vertically.

The resize property defines if an element is resizable by the user.

Note : It does not apply to inline elements or to block elements where overflow is visible.
That's all for this thread. If you found this useful a retweet to the first one would mean a lot. πŸ™Œ

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Insha

Insha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Insharamin

10 Jun
4 Amazing Websites for Background Pattern.

A ThreadπŸ‘‡
1⃣ The Pattern Library

The Pattern Library is a project by Tim Holman & Claudio Guglieri. The library is made up of tiles upon tiles of patterns which are free for you to use.

πŸ”— thepatternlibrary.com Image
2⃣ Hero Patterns

A collection of repeatable SVG background patterns for you to use on your web projects.

πŸ”—heropatterns.com Image
Read 6 tweets
8 Jun
6 Best Github Repos for Web Developers.

A Thread πŸ‘‡
1⃣ You-Dont-Know-JS

This is a series of books diving deep into the core mechanisms of the JavaScript language.

πŸ”—github.com/getify/You-Don… Image
2⃣ html-5-boilerplate

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

πŸ”—github.com/h5bp/html5-boi… Image
Read 8 tweets
6 Jun
The Ultimate Cheatsheet List for Front-end Developers.

A ThreadπŸ‘‡
1⃣ HTML

- Cheatsheet by hackr.io

πŸ”— hackr.io/blog/html-chea…

-OverAPI.com

πŸ”—overapi.com

- HTML Cheatsheet

πŸ”— htmlcheatsheet.com

- HTML character entities Cheatsheet

πŸ”— cheatography.com/davechild/chea…
2⃣ CSS

- Cheatsheet by Devhints.io

πŸ”—devhints.io/css

-CSS Cheatsheet

πŸ”— htmlcheatsheet.com/css/

- A complete guide to CSS grid

πŸ”— css-tricks.com/snippets/css/c…

- A complete guide to CSS Flexbox

πŸ”— css-tricks.com/snippets/css/a…
Read 6 tweets
3 Jun
7 Chrome Extensions for Front-end Developers.

A Thread πŸ‘‡
1⃣ WhatFont

The easiest way to identify fonts on web pages.

With this extension, you could inspect web fonts by just hovering on them.

πŸ”— chrome.google.com/webstore/detai…
2⃣ ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

πŸ”— chrome.google.com/webstore/detai…
Read 9 tweets
1 Jun
6 HTML Attributes you may not be using.

A Thread πŸ‘‡
1️⃣ Contenteditable

Specifies whether the content of an element is editable or not.

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.
2️⃣ Spellcheck

The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.

The following can be spellchecked:

-Text values in input elements (not password)
-Text in <textarea> elements
-Text in editable elements
Read 10 tweets
31 May
CSS Pro tips you might not know.

A Thread πŸ‘‡
1⃣ user-select property

The user-select property specifies whether the text of an element can be selected or not.
2⃣ place-item property

The CSS place-items is a shorthand property that allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox.
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(