So I thought I'd share some of my code snippets because I'm starting to be proud of some of them. Feel free to share your own pieces that you're proud of.
Buttons and such:
Material Checkboxes:
http://codepen.io/CKH4/pen/radXxy (http://codepen.io/CKH4/pen/radXxy)
Similar to my Radio Buttons but made before. It has simulated border-radius because it isn't able to be styled on the input tag. This doesn't use the check box hack.
Material Radio Buttons:
http://codepen.io/CKH4/pen/yyKmzg (http://codepen.io/CKH4/pen/yyKmzg)
I consider this my best work, the transitions are very fluid and the use of only the input tag.
Material Expanding Menu:
http://codepen.io/CKH4/pen/LEOPNy (http://codepen.io/CKH4/pen/LEOPNy)
Click to expand some icons.
Material Buttons:
[WIP]
A few material styled buttons with nice animations.
Animations:
Codewalr.us:
http://codepen.io/CKH4/pen/wBoRYo (http://codepen.io/CKH4/pen/wBoRYo)
A codewalrus walrus animation.
Mock-Ups:
Material Design Google Login Screen:
http://codepen.io/CKH4/pen/rVxpKG (http://codepen.io/CKH4/pen/rVxpKG)
If you like any of these feel free to use them but please give some form of credit.
Ooh I like those, especially the animations you got and I also remember that Walrii animation except most of the logo was missing back then.
One thing, though: Is the first button thing supposed to not become bigger if you just hover on it the first time? I noticed that if I just hover on it only a shadow will appear behind it then disappear as soon as I move the mouse cursor away. However, after the first button click it expands and then if I hover again on it it expands fine. Kinda like how with Flash or Java you sometimes need to click the applet to activate it.
Yep, that is targeted at android devices so the js is completely optional. Its very unfunctional on computers and I think I broke its fluidness a while ago.
Oh ok. It might be worth making it cross-compatible if you ever plan to use it on a live site, though, because many people still use actual computers to browse the Internets. Granted, if you make your site responsive where the mobile/low-res view is different than full view, it might be fine, but it's best to keep cross-compatibility as high as possible.
It was more for if I developed a web-app but I see what you mean.
Ah ok, although if for example you were to develop an app like ClrHome's program editor, then not just Android users might be willing to use it, so my point would probably apply for web apps too :P (unless you mean downloadable web apps?)
Yeah, I meant a downloadable web app because I'd like to develop an app but currently lack the skill.
Can someone help me fix the (X) to clear the input text when clicked? I also cant seem to get the button to hide when input isn't focused, it appears to just extend the navbar. http://codepen.io/CKH4/pen/VLYgqr (http://codepen.io/CKH4/pen/VLYgqr)
Edit. Do you think that its a good design or my website?
So I fixed the last problem by changing type to search and restyling accordingly.
And here's something new that I hacked together. Its a material design login screen for gmail, hope you like it. I hacked the line at the bottom with 400px height so that the box shadow would display like a horizontally expanding line. The input placeholder stays because of a 10000000s transition that is applied. It also corrects you if its wrong without bothering you if its empty with 1 line of JS.
http://codepen.io/CKH4/pen/rVxpKG
If you like it thats great and if you don't I'd like to hear why so that I can improve it.
To comment on your previous link, I like the design and navigation, but the non-selected links should be darker to be more visible.
I also like the second link. But what is the main purpose of this alternate login page? Some people who never visited CW or don't know you might be reluctant about clicking a third-party Gmail login page, because they might fear it's a fake page that just harvests Gmail logins/passwords. Of course I know that won't happen but it would be nice to know what does it add over the other Gmail page, since it seems more like a layer.
So it doesn't go over the current gmail login page but I could make a stylish theme to. So far its just a mockup. It started out with me trying to make one element material text fields because that hasn't been done yet as far a I know. The biggest challenge was getting the placeholder text to stay which was why I used my knowledge that placeholder text treats transition as the timing event when removing the placeholder as someone types. After I found my way around that the next problem was making the incorrect layout error not report when the box is empty. That's where the JavaScript that I found came in handy. It updates the value of the input box so that I can use [value=""] to test if its empty. After I got that done I thought about how I could make it better. So I looked through a codepen material design compilation for inspiration. Then I found this (sorry for another external google login mockup but mine was originally inspired by this one): http://codepen.io/Himateja/pen/wBYJdm
I thought that some things in that weren't very good (like the unecesarry amount js and the poor display on mobile) so I decided to try and do it better.
I gave the link to the editor page because of the reason that you mentioned about people fearing for their email information.
I actually like your version better, such as the login box no longer overlapping on the top bar, which looked weird. While I think the fonts are better in the original, I feel the text and fields are not visible enough compared to yours. On the other hand I kinda prefer the stay logged in checkbox in the original.
Looks very good, CKH! :D. I love Quantum Paper (Google's style of material design). I also like how it's integrated in the android sdk and you can easily make good looking apps :)
Quote from: DJ Omnimaga on May 12, 2015, 12:24:54 PM
I actually like your version better, such as the login box no longer overlapping on the top bar, which looked weird. While I think the fonts are better in the original, I feel the text and fields are not visible enough compared to yours. On the other hand I kinda prefer the stay logged in checkbox in the original.
The check box was my least favorite part. I did it late yesterday. I can change the font.
Quote from: Cumred_Snektron on May 12, 2015, 01:09:49 PM
Looks very good, CKH! :D. I love Quantum Paper (Google's style of material design). I also like how it's integrated in the android sdk and you can easily make good looking apps :)
Thanks. If I ever make an app I'll make sure to make it with the material design stuff.
@DJ Omnimaga
I fixed the check box yesterday and I added the make an account button and the google logo. It may not show because I made a media query that will keep it from showing up if the width is less than 1200px.
http://codepen.io/CKH4/pen/rVxpKG
I like it :). One issue I noticed, though, is how the need new account lacks a question mark, which kinda looks weird.
Thanks I fixed it, is there anything else I should fix?
Nothing that I can think of at the moment. That said, I am curious if the blue color scheme might be misleading, considering Google got rid of blue on Gmail and never actually used that particular hue before?
I could change it but the current login is blue themed as well. My other options would be grey, greyblue or purple I guess. I think that next I'm going to work on making it look better on mobile.
The checkboxes are left untouched on Firefox, sadly. FOr colors, you have this color list here : http://www.google.com/design/spec/resources/color-palettes.html
Yes sorry Eiyeron. I didn't use the -moz prefix. I will go back and fix it but probably not until tomorrow. If you want to remind me just post here. I probably will not be looking too much at wirc.
Ah yes i love the google swatches. I get my colors for most of my android stuff there :)
THat's the intended point of this swatch, actually. :|
So I tried really lots to fix it on Firefox but no luck. I have very little knowledge of the -moz prefix and it may handle stuff differently than -WebKit. I'll keep trying but I've already tried swapping in -moz and using a prefix fixer.
So here is something I've been working on because why not. It uses a little js from random stack overflow questions and is a little broken at higher resolutions.
http://codepen.io/CKH4/pen/eNWvZV
Edit. It was inspired by this and the fact that it sucks on mobile. http://codepen.io/SassyCrafter/pen/qdrJRN
Quote from: CKH4 on June 07, 2015, 06:57:30 PM
So here is something I've been working on because why not. It uses a little js from random stack overflow questions and is a little broken at higher resolutions.
http://codepen.io/CKH4/pen/eNWvZV
Looks cool :)
Thanks. Maybe when I get all the display kinks ironed out I'll use it for my website.
Quote from: CKH4 on June 07, 2015, 07:22:07 PM
Thanks. Maybe when I get all the display kinks ironed out I'll use it for my website.
Yeah, that would be awesome! How do you like my page (Muessigb.net (http://muessigb.net/)) btw?
I really like it. The nav needs to be bigger on mobile but the colors, emphasis and general theme work well.
I actually like those effects in your page CKH4. You could maybe add them to the bottom as well but I don't know if this will make it harder to notice the stuff at the bottom.
If you are talking about the fade in added to the bottom then I completely agree with you. It'll be a little harder because I used box shadow to make the fade and since there is less room the fade will have to be sharper.
Yeah that's the part that I meant. :)
I'll see if I can work on it. No internet right now so it may take a while.
Quote from: DarkestEx on June 07, 2015, 07:25:52 PMHow do you like my page (Muessigb.net (http://muessigb.net/)) btw?
I love the colors and layout of your site, but the random font sizes on some parts kinda ruin it :(
Quote from: Ivoah on June 19, 2015, 11:22:42 PM
Quote from: DarkestEx on June 07, 2015, 07:25:52 PMHow do you like my page (Muessigb.net (http://muessigb.net/)) btw?
I love the colors and layout of your site, but the random font sizes on some parts kinda ruin it :(
To me those add good emphasis. I guess they may be annoying to some people.
I actually like it personally. It also reminds me of Wiki pages for some reasons.
So I have lots and lots of cool stuff to show right now:
Fake 3D icon in pure css:
http://codepen.io/CKH4/pen/aOEPYZ
Randomly generated rain with animated clouds:
http://codepen.io/CKH4/pen/eNyQMP
And now a way to toggle a mobile theme of a website (@DJ Omnimaga, @Streetwalrus):
http://codepen.io/CKH4/pen/LVewaL
Hope you all like these.
I like them. Imagine if someone made a full game where the sprites were all made of CSS O.O. And wow I didn't know that CSS supported polygons.
As for the mobile site, for some reasons I don't see any checkbox on the page, though ??? (Opera 30)
Sorry about that, I used pointer: coarse media query which is a css4 thing that so far only works in chrome and IE beta (internet explorers actually doing something well for once). It's fixed now but only in portrait view.
Semi-offtopic : another good thing IE is doing : dying. :D
Quote from: CKH4 on June 30, 2015, 04:18:47 PM
Sorry about that, I used pointer: coarse media query which is a css4 thing that so far only works in chrome and IE beta (internet explorers actually doing something well for once). It's fixed now but only in portrait view.
Aah ok. I am surprised it doesn't work in Chromium engine (unless maybe Opera 30 uses an outdated one)
Quote from: Duke "Tape" Eiyeron on July 01, 2015, 09:47:29 AM
Semi-offtopic : another good thing IE is doing : dying. :D
XD
Quote from: DJ Omnimaga on July 01, 2015, 01:00:38 PM
Quote from: CKH4 on June 30, 2015, 04:18:47 PM
Sorry about that, I used pointer: coarse media query which is a css4 thing that so far only works in chrome and IE beta (internet explorers actually doing something well for once). It's fixed now but only in portrait view.
Aah ok. I am surprised it doesn't work in Chromium engine (unless maybe Opera 30 uses an outdated one)
It's a relatively new feature in chrome so I'm not surprised.
Quote from: DJ Omnimaga on June 30, 2015, 04:14:43 PM
I like them. Imagine if someone made a full game where the sprites were all made of CSS O.O. And wow I didn't know that CSS supported polygons.
As for the mobile site, for some reasons I don't see any checkbox on the page, though ??? (Opera 30)
Sorry about not addressing the polygons earlier. While CSS does not support polygon manipulation you can now use clip path as an alternative. It's like putting inline svg into your CSS.
Update!Now I have another present for those who appreciate hacked together stuff!
A pure CSS site theme chooser. Even though it's based on something else I made all the html and CSS for it myself.
http://codepen.io/CKH4/pen/qdxEgm
I actually like the way the theme chooser looks like. If you use it on a live site, make sure it won't be too large, though.
I can take no credit for the look of it, as it is an exact visible replica of the original. I only made the functionality possible in html and CSS. I may implement it into my website when I get around to making my site but that's not for a while.