This is a pure CSS implementation of "Contact Me" form.
Buttons has a shade of skeuomorphism element. I used box-shadow attribute, and set the value to inset to implement this effect. When pressed, I just did a little trick to have an illusion that the button was pressed, by darkening the actual button, and removing the box-shadow outside the button.
The background of the dialog itself has a glassy element, by blurring its backdrop using backdrop-filter attribute. The effect can be shown, if the opacity of the dialog is little lower. It is to show the backdrop of the actual dialog element.
The labels of the text boxes has a "floating label" effect. I created this by using the :not(:placeholder-shown) pseudo selector/element. The placeholder itself is not a :placeholder. It is actually hidden from the sight. I actually used <label> tag to implement this.
Icons by Font Awesome.
Top comments (4)
I like when people try to do this, but I feel the need to point out that "pure CSS" would not require any extra HTML elements, whereas this example uses a host of "wrapper" classed divs and so on.
Thank you for your comment. I'm aware that there might be few other ways to do it. But as of now, I'm only familiar with 2 methods. The other one is using "target" pseudo-selector. If happens that you havn another idea, please sharn it with me, so that I could practice more methods.
I tried forking that codepen thing but after 15 minutes I still can't figure out how to copy or paste anything!
What I mean is your solution relies on extra non-semantic classes,
span,divand evenielements. If you wanted to make it "purely" CSS, you could attach your styles to the form, along with itslegend,fieldsetand variousinputelements themselves.Using a checkbox to toggle visibility of a form is a trick that's been around for a while, and while it's a neat hack to get apparent functionality without any scripting, it relies on adding irrelevant checkboxes to your templates and then having to massage them to make them work accessibly.
How would you imagine a screen-reader user opening that form? Yes, you can do it, but it's awkward and relies on adding even more markup.
Whenever I see anyone say they're making something with "pure" CSS and it relies on extra markup, I think of this: you can replicate the Mona Lisa in such "pure" CSS if you add one div per pixel and colour it in with a unique selector...
I see, now I got your point. Yes, it's awkward to add another HTML element just to do this hack, but as of my knowledge at this point, this is the best I can do. I'm going to study more to find out what is the better way to do these kinds of action without using any Javascript code nor adding another HTML element. Thank you very much, I appreciate your comment :)