nakulrathore / box-shadows Goto Github PK

edit src/background.js
make change with required colors

add color picker (any type) with background changer buttons, letting user choose any color for bg

Commit whatever you think is best for SEO

in between the hover start and end state, the box and text blurrs
possible solutions :
-make the transition fast
-remove the transition
-fix burr via css or js hack

like from LinkedIn, Instagram, even Github.

user should see the hex value of background color on hover.

Background buttons are not experience friendly, design can be improved, up for grabs, please let me know so i can assign this to you.

filters can be :
-by popular brands
-by brand category*. etc
sorts can be:
-Alphabetically
-Without border first
-borders first
-incent borders first etc

anything else you want to add is also welcome.

Centering the contents of Change Background bar at the bottom might look better in my opinion.

add new box shadows you find useful
by editing src/shadows.js

 {
    	"name": "NAME-HERE",
    	"shadow": "BOX-SHADOW-CSS-HERE",
    	"border": "BORDER-CSS-HERE"
  },

multiline titles causing alignment bug,
this can be fixed by using flex css or other css hacks

user should be able to add/type hex color for background.
or use the color picker to pick background color.

picker should be minimal with hex input box.

some shadows (shadow values) are duplicates, see ex: "Instagram login box",
(if you don't find example, its probably removed )

verify and correct those shadow values by going to that website(in this example checking out instagram login box),

or

tag the duplicate shadow in shadow.js file with key "duplicateOf"

example

 {
    name: "Example shadow",
   duplicateOf : 'Original shadow name',
    shadow: "0 2px 2px 0 rgba(0,0,0,0.14)",
    border: "0"
  },

DONT remove that shadow, just tag or update it, make sure to provide a description of the action you took in the pull request.

commits referring this issue will be reviewed before we make any changes.

let users select a shadow and checkout use cases like

shadow applied on:

• button
• card
• model
• input, etc

design ideas are welcome.

only requirements are should be minimal and should represent this project theme ('box shadows')

Hello @nakulrathore, great to see your work. However, it would be really nice if you can directly add the link to GitHub repo in the hosted webpage.

Also, let me know if you are looking out for collaborators, I can share about this in my group @knaxus

Thanks

add colors to background change buttons, so user can easily switch to desired bg without going through all the BGs,
see bg colors here : src/background.js

Keep it minimal and max 2 lines.
Remove words like 'shadow' from title , update it work text that makes more sense.

button/link should be minimal.

update code syntax with latest react version.

add github ribbon on webpage, it should be minimal and should match style of project.
ribbon can be placed anywhere, should not block any content and be mobile friendly.

I tried the link from the right-hand side of this repo and it does dozen of redirects on spam websites.

invert color for title and description of webpage

https://www.npmjs.com/package/color can be used as its already used to invert color for background buttons

some of the shadows are not showing on boxes maybe because of the semicolon ;

checkout named "Solid new";
there are some other boxes too.