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

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


Dream of Omnimaga

Yeah that's the part that I meant. :)
  • 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

I'll see if I can work on it. No internet right now so it may take a while.
  • Calculators owned: TI-83+, TI-84+


Ivoah

Quote from: DarkestEx on June 07, 2015, 07:25:52 PMHow do you like my page (Muessigb.net) btw?

I love the colors and layout of your site, but the random font sizes on some parts kinda ruin it :(
  • Calculators owned: TI-86 (now broken), TI SR-56, TI-Nspire CX CAS, TI-84+ SE, TI-84+ SE, TI-85, TI-73 Explorer VS, ViewScreen, TI-84+ CSE, TI-83+ SE

CKH4

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


Dream of Omnimaga

I actually like it personally. It also reminds me of Wiki pages for some reasons.
  • 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 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.
  • Calculators owned: TI-83+, TI-84+


Dream of Omnimaga

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)
  • 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

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


Duke "Tape" Eiyeron

Semi-offtopic : another good thing IE is doing : dying. :D
  • Calculators owned: A lot.

Dream of Omnimaga

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)
  • 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

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


Dream of Omnimaga

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

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


Powered by EzPortal