Bar code

https://slides.com/nirazanbasnet/csstipsandtricks/live#/

Title Text

Photo source: CSS Tricks

The content can't shrink to fit the container

The container doesn't handle overflow gracefully

The container can't expand to fit the content

CSS
TIPS &
TRICKS

Nirajan Basnet

Front-end Engineer

Default Property:

Use of shorthand notation

Background

Font

Font smooth issue

Fixed

Let's dive into the code!!

:placeholder-shown

Responsive matters

What's your technique?

Photo source: Responsive design

Go with (min-width) Approach

Fullscreen Background

Viewport Units:

 1vh = 1% of browser’s height.

Calc()

Centering the Div

Equal Height

CSS Icons

CSS Dropdown

Codepen: CSS Tabs

Codepen: CSS Modal

CSS icons:

1. http://cssicon.space/#/

2. https://saeedalipoor.github.io/icono/

Magazine:

1. tympanus.net/codrops

2. https://speckyboy.com/

3. https://www.smashingmagazine.com/

Showcase:

1. https://codepen.io/

2. https://www.uplabs.com/

3. http://cssdeck.com/

Transition and Animation:

1. http://css3.bradshawenterprises.com/transitions/

2. https://robots.thoughtbot.com/css-animation-for-beginners

Viewport Units:

1. https://www.sitepoint.com/css-viewport-units-quick-start/

Calc():

1. https://tympanus.net/codrops/css_reference/calc/

Blogs:

1. https://medium.com/

Flexbox:

1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2. http://flexboxfroggy.com/

Resources

Youtube:

1. https://www.youtube.com/user/DevTipsForDesigners

Share your work

Codepen

Uplabs

er.nirajan.basnet@gmail.com

facebook.com/nirajanb89

codepen.io/Nirajanbasnet/

medium.com/@nirazanbasnet