If you have trouble logging in, try to disable JavaScript temporarily. If that doesn't work, please contact  a d m i n @ c o d e w a l r . u s  with your account nickname.

* WalrusIRC Shoutbox (Support and development thread)

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: Cool HTML and CSS  (Read 3422 times)

0 Members and 1 Guest are viewing this topic.

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Cool HTML and CSS
« on: February 21, 2015, 05:49:14 am »
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 »


  • Calculators owned: TI-83+, TI-84+


Online DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14585
  • Post Rating Ratio: +72/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #1 on: 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.
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #2 on: 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.
  • Calculators owned: TI-83+, TI-84+


Online DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14585
  • Post Rating Ratio: +72/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #3 on: 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.
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #4 on: February 21, 2015, 08:29:24 am »
It was more for if I developed a web-app but I see what you mean.
  • Calculators owned: TI-83+, TI-84+


Online DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14585
  • Post Rating Ratio: +72/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #5 on: 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 :P (unless you mean downloadable web apps?)
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #6 on: 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.
  • Calculators owned: TI-83+, TI-84+


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS Snippets
« Reply #7 on: 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 »
  • Calculators owned: TI-83+, TI-84+


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS
« Reply #8 on: 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.
  • Calculators owned: TI-83+, TI-84+


Online DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14585
  • Post Rating Ratio: +72/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: Cool HTML and CSS
« Reply #9 on: 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.
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS
« Reply #10 on: 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.
  • Calculators owned: TI-83+, TI-84+


Online DJ Omnimaga

  • Omni founder & CW co-founder
  • CodeWalrus Staff
  • Super User
  • Forum Maintenance
  • Original 5
  • CodeWalrus Supporter
  • *
  • Topic Management
  • Posts: 14585
  • Post Rating Ratio: +72/-7
    • dj_omnimaga
    • DJOmnimaga.music
    • @DJOmnimaga
    • dj_omnimaga
    • @DJOmnimaga
    • /u/DJ_Omnimaga
    • DJOmnimaga
    • 112/11286
    • View Profile
    • DJ Omnimaga music store
  • Gender: Male
Re: Cool HTML and CSS
« Reply #11 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.
  • Calculators owned: TI-73, TI-80 (broken), TI-81, TI-82, TI-83, TI-83+ (broken), TI-83+ (broken), TI-83+SE (broken), TI-84+, TI-84+CSE, TI-84+CE, TI-85, TI-86, TI-89T, TI-92, TI-Nspire, TI-Nspire CX, HP 39gII, HP Prime, Casio fx-7000G, fx-7400G+, fx-7700GE, fx-9750G+, fx-9750GII, fx-9860G, cfx-9850G, FX-1.0+, fx-CG10, fx-CP400
  • Consoles, mobile devices and vintage computers owned: Samsung i5510, Nexus 5, Atari 2600, Lynx, SMS, Game Gear, Genesis, Dreamcast, NES, SNES, N64, GCN, Wii, Wii U, GBA, DS, 3DS, PS2, PS3, PS4, PSP, PSVita, XBox 360, XBOne

Bandcamp|Reverbnation|Facebook|Youtube|Twitter
Retired Omnimaga admin (2001-11) and editor (2012-14)

Online Cumred_Snektron

  • Lvl 69 Russian Snake
  • CodeWalrus Staff
  • Super User
  • Topic Management
  • Posts: 3055
  • Post Rating Ratio: +30/-1
  • SSSssssss.....
    • RobinDeWalvis
    • Kzyrox
    • RobinDeWalvis
    • View Profile
    • quantuminfinity
  • Gender: Male
Re: Cool HTML and CSS
« Reply #12 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 :)
  • Calculators owned: TI-84+
Legends say if you spam more than DJ Omnimaga, you will become a walrus...


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS
« Reply #13 on: May 12, 2015, 01:26:38 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.

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+


Offline CKH4

  • Extravagant Sushi
  • Super User
  • Posts: 872
  • Post Rating Ratio: +3/-2
    • View Profile
  • Gender: Male
Re: Cool HTML and CSS
« Reply #14 on: 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 »
  • Calculators owned: TI-83+, TI-84+


 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games