+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [Demo] Making Sexy Checkboxes (/showthread.php?tid=4642302)
Pages: Pages
1
2
[Demo] Making Sexy Checkboxes - Crypto™ - Jan 18, 2015
I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.
http://jsfiddle.net/2gyzx01v/10/
It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.
Feedback welcomed.
* - The Old Knight - Jan 18, 2015
(Jan 18, 2015 04:13 AM)Crypto™ Wrote: I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.
http://jsfiddle.net/2gyzx01v/4/
It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.
Feedback welcomed.
Hello Crypto™,
Nice work mate! I'm sure that these checkboxes will be useful for members that struggle with CSS.
Keep up the good work and I look forward to further projects.
Kind Regards,
- Dan (The Old Knight).
* - Willful - Jan 18, 2015
I think it looks pretty good. A small part of me was dying though when I saw that the checkboxes weren't aligned to the text.
One suggestion I have is adding a font-size, but that's just one option.
Code
label > span {
display: inline-block;
padding-left: 6px;
margin: 0 auto;
text-align: center;
font-size: 19px; /* suggestion */
}* - Crypto™ - Jan 18, 2015
(Jan 18, 2015 04:37 AM)Jaeyuuji Wrote: I think it looks pretty good. A small part of me was dying though when I saw that the checkboxes weren't aligned to the text.
One suggestion I have is adding a font-size, but that's just one option.
-snip-
I just added a font-size. I had it in initially, but I couldn't figure out why it wasn't working. It turns out I had a semicolon instead of a colon xD
Now it's all even I think.
* - kawaii - Jan 18, 2015
These are brilliant Crypto. Great work, I'll be playing around with some of the values in here for sure.
* - Xorex - Jan 18, 2015
These are really nice, great work.
I might use them in the future and will be sure to give credit.
* - Gonzalez™ - Jan 18, 2015
I really like these, but I will suggest that the transition is a little too slow... That's just a minor suggestion 🤝
* - ~Dec - Jan 18, 2015
This makes the UI designer in me smile, it's nice to see you expanding your horizons and doing something a little different for a change ^_^ one tip though, rather than using a font-size to align text to look good alongside another element, use inline-block elements and vertical-align: middle instead! This way, your checkboxes will look great at any font size.
* - Edward Kenway - Jan 18, 2015
(Jan 18, 2015 04:13 AM)Crypto™ Wrote: I don't know about you, but I find traditional checkboxes very bland. So, for a project of mine, I made some sexier ones.
http://jsfiddle.net/2gyzx01v/5/
It's just a little bit of abuse of the <label> attribute, and it looks sexy as fuck.
Feedback welcomed.
These are awesome! I will definetly use those, if I can? Lmao
Thanks for the conteibution to the forum.
* - Crypto™ - Jan 18, 2015
(Jan 18, 2015 03:01 PM)Edward Kenway Wrote: These are awesome! I will definetly use those, if I can? Lmao
Thanks for the conteibution to the forum.
No >:c You can look, but not touch. x3 I'm kidding. Help yourself.
(Jan 18, 2015 02:51 PM)~Dec Wrote: This makes the UI designer in me smile, it's nice to see you expanding your horizons and doing something a little different for a change ^_^ one tip though, rather than using a font-size to align text to look good alongside another element, use inline-block elements and vertical-align: middle instead! This way, your checkboxes will look great at any font size.
I completely forgot that was a thing :D I enjoy expanding my horizons. Especially since I do want to go full stack someday, enough to actually make a decent UI that doesn't make people cringe. :)
* - Webmasters - Jan 19, 2015
I think this is quite good. Perhaps a few members can go and make certain things like this to help users out!
I'd love to learn more about forms, I hardly ever use/make forms. :L
* - Crypto™ - Jan 19, 2015
(Jan 19, 2015 09:25 PM)Webmasters Wrote: I think this is quite good. Perhaps a few members can go and make certain things like this to help users out!
I'd love to learn more about forms, I hardly ever use/make forms. :L
It's nice since most forms look ugly as hell by default, so being able to make them look more aesthetically pleasing while maintaining usability. (It's not hard to make something that looks super cool, but is completely unusable to the normal end user) I might actually make a full CSS kit for forms at some point.
* - kawaii - Jan 20, 2015
(Jan 19, 2015 09:32 PM)Crypto™ Wrote: It's nice since most forms look ugly as hell by default, so being able to make them look more aesthetically pleasing while maintaining usability. (It's not hard to make something that looks super cool, but is completely unusable to the normal end user) I might actually make a full CSS kit for forms at some point.
This. This x10000 times please Crypto.
* - Crypto™ - Jan 22, 2015
(Jan 20, 2015 07:00 AM)Escrow Wrote: This. This x10000 times please Crypto.
I'll work on it once I finish what I'm currently working on :)
I just added a separate example for both radios and checkboxes.
* - Warren Buffett - Jan 24, 2015
Looks really nice. Keep up the good work!