TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: A simple hand drawn HTML/CSS theme

188 pointsby chr15mover 3 years ago

18 comments

chrismorganover 3 years ago
• 2em base font size is waaaaaay too large. I zoomed out to 50% and breathed a sigh of relief (and later dialed it back up to 67% which was tolerable too and probably more where it should be for such a thing).<p>• radio&#x2F;checkbox need to be more distinct. I recommend a cross in the checkbox.<p>• Focus styles: you’ve killed the outlines on radio&#x2F;checkbox and not replaced them with anything better, which is doubleplusungood, and where you <i>haven’t</i> touched the outline, the browser’s default clashes with your style.<p>• It could be fun to try replacing the border technique with feTurbulence + feDisplacementMap, <i>not</i> specifying the SVG’s viewBox&#x2F;width&#x2F;height, and using percentages for the sizes of things, allowing it to render at whatever size it needs to be, allowing you to avoid stretching in one direction or the other, though given the same seed the curves of the top and left edges will be consistent. A demo of much the underlying concept can be found within this WIP of my own that’s simultaneously overdone and underdone: <a href="https:&#x2F;&#x2F;temp.chrismorgan.info&#x2F;2021-12-15-svg-drawn-filters-demo.html" rel="nofollow">https:&#x2F;&#x2F;temp.chrismorgan.info&#x2F;2021-12-15-svg-drawn-filters-d...</a>, look at the page edge, and fiddle with #paper-fuzzy-edge’s feTurbulence baseFrequency (e.g. 0.05) and feDisplacementMap’s scale (e.g. 20), also twiddling the #paper rect’s x&#x2F;y&#x2F;width&#x2F;height.
评论 #29556034 未加载
stu2b50over 3 years ago
Hi, looks great. I don’t see a license in the repo - what is it licensed under? I would definitely consider it for goofier projects but want to make sure it’s permissively licensed first.
torbTurretover 3 years ago
Nice! Reminds me of rough.js stuff:<p>- <a href="https:&#x2F;&#x2F;roughjs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;roughjs.com&#x2F;</a><p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;jwilber&#x2F;roughViz" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jwilber&#x2F;roughViz</a><p>- <a href="https:&#x2F;&#x2F;github.com&#x2F;rough-stuff&#x2F;rough-notation" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rough-stuff&#x2F;rough-notation</a><p>One comment: some items aren’t rendering properly on my safari (eg checkboxes)
genezetaover 3 years ago
Also in this vein: PaperCSS <a href="https:&#x2F;&#x2F;www.getpapercss.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.getpapercss.com&#x2F;</a>
Kunsangover 3 years ago
Really nice. You could add &quot;::file-selector-button&quot; and &quot;::-webkit-file-upload-button&quot; to your button selectors to style the file input.
jdegrootlutznerover 3 years ago
Very cool! I just designed my new portfolio website with a hand drawn “sketch book” style. <a href="https:&#x2F;&#x2F;www.jdegrootlutzner.com&#x2F;?utm_campaign=show&amp;utm_source=hn&amp;utm_medium=comment" rel="nofollow">https:&#x2F;&#x2F;www.jdegrootlutzner.com&#x2F;?utm_campaign=show&amp;utm_sourc...</a><p>And this style could be great for Ben Stoke’s paper website project.
评论 #29557735 未加载
评论 #29555511 未加载
评论 #29562771 未加载
penguin_boozeover 3 years ago
TIL: border-image CSS property [0]<p>[0] <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;border-image" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;border-imag...</a>
sbashyalover 3 years ago
This looks great and would be great for certain use case like a website for kids.
评论 #29555117 未加载
saint-loupover 3 years ago
Hi, it looks really great. Reminds me of XKCD-inspired chart themes.<p>Several issues to better respect UI standards:<p>- Controls should have `cursor:pointer` so it show a hand on hover.<p>- Controls should have an active style.<p>- Clicking on a label associated with a checkbox should select&#x2F;unselect the checkbox, just like radio buttons.<p>- Radio buttons should be visually more distinct from checkboxes, maybe by making them less round.
评论 #29555582 未加载
gryzzlyover 3 years ago
Looks very nice, but on Safari select box, checkboxes and radio buttons aren’t working as intended.
评论 #29554629 未加载
评论 #29554944 未加载
callumprenticeover 3 years ago
Love it - only comment I have is to consider (it may not be possible) making the &quot;●&quot; characters in the password entry field match the rest of the design - similar to the stylized radio button asterisk indicators perhaps?<p>Great work.
cambaceresover 3 years ago
Beautiful! Would love a checkmark in the checkbox instead of a star though, now it looks very similar to the radiobutton.
chrisweeklyover 3 years ago
Awesome! (Rough.js comes to mind in this space.)
Zababaover 3 years ago
Very nice. Small nitpick: clicking on the text of the radio button works, but it doesn&#x27;t for the checkbox.
评论 #29559553 未加载
tambourine_manover 3 years ago
Congratulations Chris, this is really nice. Lots of cool ideas in this CSS
wonderwonderover 3 years ago
Very neat and fun, well done!
quickthrower2over 3 years ago
Safari iOS note: selected checkbox and option appears as asterisk, which is odd.<p>Anyway, very nice theme. I think XKCD should use it!
jack_rimintonover 3 years ago
I love this
评论 #29577298 未加载