Cool HTML and CSS

b/Web publicado por u/CKH4 February 21, 2015, 05:49:14 AM

Cool HTML and CSS

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
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
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
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
A codewalrus walrus animation.

Mock-Ups:

Material Design Google Login Screen:
http://codepen.io/CKH4/pen/rVxpKG

If you like any of these feel free to use them but please give some form of credit.

Last Edit: May 12, 2015, 03:41:12 AM by CKH4

Inicia sesión o crea una cuenta para dejar un comentario

u/Dream of Omnimaga February 21, 2015, 06:23:20 AM

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.

u/CKH4 February 21, 2015, 06:44:37 AM

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.

u/Dream of Omnimaga February 21, 2015, 08:10:37 AM

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.

u/CKH4 February 21, 2015, 08:29:24 AM

It was more for if I developed a web-app but I see what you mean.

u/Dream of Omnimaga February 21, 2015, 08:38:29 AM

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

(unless you mean downloadable web apps?)

u/CKH4 February 21, 2015, 04:34:24 PM

Yeah, I meant a downloadable web app because I'd like to develop an app but currently lack the skill.

u/CKH4 April 29, 2015, 02:45:30 AM

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

Edit. Do you think that its a good design or my website?

Last Edit: April 29, 2015, 02:47:09 AM by CKH4

u/CKH4 May 12, 2015, 03:47:46 AM

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.

u/Dream of Omnimaga May 12, 2015, 04:09:21 AM

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.

u/CKH4 May 12, 2015, 12:04:12 PM

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.

u/Dream of Omnimaga 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.

u/Snektron May 12, 2015, 01:09:49 PM

Looks very good, CKH!

. 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

u/CKH4 May 12, 2015, 01:26:38 PM

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! . 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.

u/CKH4 May 13, 2015, 03:23:06 PM

@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

Last Edit: May 13, 2015, 03:32:44 PM by CKH4