Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Evondev snippetsNew to Visual Studio Code? Get it now.

Evondev snippets

evondev

|
534 installs
| (8) | Free
Useful CSS snippets for developer
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

evondev-snippets README

Useful CSS snippets that will help you save a lot of time when coding

Notice

Some snippets will warning in Vanilla CSS because some code I write base on SASS way

Table of snippets

| Prefix | Code | | ------------------- | ------------------------------------------------------------------------------------------------ | | flex-center | Center thing with flexbox | | flex-centerc | Center flexbox column direction | | flex-image | Using for image when make layout row direction with flexbox | | grid-center | Center with css grid | | abs-center | Center top and left with position absolute | | abs-centerx | Center left with absolute | | abs-centery | Center top with absolute | | text-overflow | Text overflow multiple lines with three dots... | | text-single | Text overflow single line with threed dots...| |abs-full| Position absolute full base on parent | |bg-opacity| Useful when you want to have background opacity base oncolorproperty of parent | |abs-dropdown| Using when you make dropdown list absolute or dropdown menu when parent havepositionproperty | |flex-layout| Useful when making flexbox layout column | |grid-layout| Another way to making layout fast with css grid | |css-reset| Some useful css reset code when you start coding css | |scroll-hide| Just hide scrollbar | |input-spin-hide| Hide input spin with input[type="number"] | |input-placeholder| Change input placeholder color | |image-responsive| Responsive image by ratio | |imgcover| Image cover full | |scroll-snap| Apply css scroll snap useful when making simple slider with only css | |@max-w| Media query for max-width | |@min-w| Media query for min-width | |input-style| Default css for input | |button-style| Default css for button | |modal-style| CSS for common modal | |css-hide| Hide element to use transition effect later with css-show | |css-show| Show element when using css-hide before | |box-auto| Auto element | |text-style| Useful css for text | |abs-top-left| Position absolute top left | |abs-top-right| Position absolute top right | |abs-bottom-left| Position absolute bottom left | |abs-bottom-right| Position absolute bottom left | |bg-linear| CSS background linear gradient | |shadow-bg| Create box shadow base on background color or background gradient | |@supports| Support rule in css for properties did not support for most browsers | |text-gradient| Create text gradient | |text-shadow| Create text shadow | |shadow| Create shadow | |@keyframes| Keyframes animation | |scrollbar-style| Custom scrollbar style | |abs-full-width| Position absolute full width | |abs-full-height| Position absolute full height | |square| Create fast square | |rect| Create fast rectangle | |square-radius| Create fast square with radius | |circle| Create fast circle | |wfull| Make width full 100% | |hfull| Make height full 100% | |sfull| Make width and height full 100% | |fabase| Flexbox align-items baseline | |faend| Flexbox align-items flex-end | |fastart| Flexbox align-items flex-start | |facenter| Flexbox align-items: center | |fjend| Flexbox justify-content flex-end | |ohidden| Overflow hidden | |xhidden| Overflow x hidden | |yhidden| Overflow y hidden | |xauto| Overflow x auto | |yauto| Overflow y auto | |upper| Text transform to UPPERCASE | |lower| Text transform to lowercase | |capitalize| Text transform to Capitalize | |bold| Make text bold | |italic| Make text italic | |300|font-weight: 300| |400|font-weight: 400| |500|font-weight: 500| |600|font-weight: 600| |700|font-weight: 700| |800|font-weight: 800| |900|font-weight: 900| |cl` | Create class selector fast |

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2021 Microsoft