CSS Sucks and I Hate it

Maybe you can apply a slight blur to the cover photo – the one behind the heading (dunno what to call it) --and see how it looks. Should make the heading stand out just a tad more. Might make my dyslexic eyes able to focus better/easier.

My CSS test page
While this seems to work fine on all devices I’ve tested this on, it’s definitely lacking in the design department(I’ve never really “learned” HTML, CSS or design properly, I’m entirely “self-taught” by doing, critics welcome!) ;D

But then again, my webdesign methodology is “A 10% effort solution that works 80% is better than a 100% effort solution that works 99%”, which works great for private websites.
My typography is literately font-family: sans-serif;:smiley:

The dialog drop shadow is too much, and you should do custom styling for the input boxes. Even after the new upgrades, the defaults still look like from the 2000s.

I personally like that workaround; it makes for slightly awkward HTML, but I find it preferable to unnecessarily adding scripts.

Last I checked (pun intended) the Apple website was using this method for its menus.

The checkbox hover workaround

You use a hidden checkbox next to the element you want to affect,
style a <label for= it to act as your button,
use a CSS selector on the element you want to affect, by selecting it as the sibling of the :checked checkbox


@X6T4 The last time I needed to center something flexbox seemed to work well enough; certainly better than the older workarounds I remember testing with margin:auto and some weird combinations of +50% and -50% margins.


@max1220 that dialog is definitely a bit jarring; if nothing else it needs a bit of margin to the left and right, otherwise it looks as though it is meant to be a section of the page rather than something atop it.

1 Like

In the example it was supposed to be part of the content.
I’ve 4 simple lines of javascript for hiding/unhiding some dialogs now, and also added a red variant, and reduced the box-shadow for the inline variant to make it’s use more obvious.

Actually, they have some custom styling. I was going for the same-ish look as buttons so they work good in forms.

Personally, I’m not a huge fan of the make-everything-giant movement. I want to use my screen efficiently. Also helps that it makes aligning text way easier :stuck_out_tongue:
Screenshot at 2021-05-01 08-15-14

.form * {
	padding: 10px 10px;
	margin: 0 0;
}
.form input[type="text"],input[type="password"],input[type="email"] {
	width: 100%;
	padding: 5px 5px;
	margin: 0 auto;
	border: 1px solid #A0A0A0;
	padding-left: 0.5em;
	box-sizing: border-box;
}
.form input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus {
	border: 1px solid #4271ff;
	outline: none;
}
.form input[type="email"]:invalid {
	border: 1px solid #ff7142;
}

Well, they look too old-school. Perhaps, a thicker border, plus slightly rounded border would look a tad more modern.

@max1220
Like this:

1 Like

Inspired by you, I’m currently playing around with thiccer, rounded borders, and forms definitely look better with them:

I’m also playing around with thiccer rounded borders for all buttons, but I don’t like it yet…

(It’s not on the website yet, I’m editing a local copy)

1 Like

Actually, with buttons, if you set a contrasting bg color to the body bg, you shouldn’t need an outline/border. Add some drop shadows to the mix and voila.
image
image

1 Like

Idk, I rather liked the sharp neat squares on that form. Originally, I was going to round out my borders on the form, but I think I may not.

1 Like

Idk how to apply a slight blur to the image xD, and also I like the background text being at least slightly readable. That is my code after all, and this is my personal portfolio website as a programmer.

Also, I may change up the design a little bit. I don’t like the wording of that pink heading. Also, with my current goals of becoming a NASA research scientist after getting my Bachelor of Science in Computer Science, a Master of Science in Physics, and a Ph.D in Astronomy and Astrophysics; I may have to rethink some design elements. This goal ofc is not something I decided overnight. I’ve been an Astronomy nerd since Kindergarten, and I actually originally planned on getting a Bachelor of Science in Physics with a Concentration in Astronomy and Astrophysics and a minor in computer science… This path just simplifies my Bachelor’s degree… just a little bit lol. It also makes it so that my Computer Science background has a bit more weight… at least on paper.

To be completely honest, I know for a fact that I love both Computer Science and Physics. Heck the two are so tightly ingrained with each other, it’s insane. For example, computers are fundamentally just the physics of electricity and controlling the flow of electrons with gating. Furthermore, Physicists use so much Computer modelling (especially Astronomers), that you literally cannot get a Physics degree without being required to program in, usually, Python.

1 Like

I fixed it with a purely static “Coming Soon” page xD.

1 Like

In my opinion, that’s where css-grid can help.

The problem is pure HTML and css-flexbox. Completely unintuitive.

Flexbox’s were a huge improvement over what we had before that, but yeah if you ask me css positioning still needs a lot of work.

3 Likes

I need help with styling my forms. They are giving me a headache. Btw, do input tags have a default type of text?

Yes, all elements have a default style for everything. Most elements have a default border of none and a background-color of transparent, for instance.

Default text in input fields are set with HTML attribute value as in <input type="text" value="Default text">. As for different fonts and stuff, should just be able to change it directly. If not, try the input * { selector.

Just want to jump in to mention something regarding mobile navigation and javascript (which is the only real way to provide the typical “hamburger” menu)… As fallback for the cases when someone has Javascript disabled on mobile, create a form with a dropdown menu as your navigation and a “Go” submit button. From there you use a processing script which, depending on the menu item selected, forwards to that specific page.

Actually it is possible to achieve the same result with the :Active selector, I do agree with you through.