Join us on Discord!
You can help CodeWalrus stay online by donating here.

Cool HTML and CSS

Started by CKH4, February 21, 2015, 05:49:14 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

CKH4

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.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

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.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

It was more for if I developed a web-app but I see what you mean.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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?)
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

Yeah, I meant a downloadable web app because I'd like to develop an app but currently lack the skill.
  • Calculators owned: TI-83+, TI-84+


CKH4

#7
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?
  • Calculators owned: TI-83+, TI-84+


CKH4

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.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

CKH4

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.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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.
  • Calculators owned: TI-82 Advanced Edition Python TI-84+ TI-84+CSE TI-84+CE TI-84+CEP TI-86 TI-89T cfx-9940GT fx-7400G+ fx 1.0+ fx-9750G+ fx-9860G fx-CG10 HP 49g+ HP 39g+ HP 39gs (bricked) HP 39gII HP Prime G1 HP Prime G2 Sharp EL-9600C
  • Consoles, mobile devices and vintage computers owned: Huawei P30 Lite, Moto G 5G, Nintendo 64 (broken), Playstation, Wii U

Snektron

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 :)
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


CKH4

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.
  • Calculators owned: TI-83+, TI-84+


CKH4

#14
@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
  • Calculators owned: TI-83+, TI-84+


Powered by EzPortal