Posts Tagged ‘css3’
I wanted to share some of my best jsFiddles because I have a lot of them, and they aren’t accessible in any one place. Here are some of my most favorite ones that I’ve made.
HTML5 Form from Mockup with Validation
I made this fiddle from a mockup I was given as part of an interview I had with a company. The requirements included:
- Validating that the form didn’t submit if Name and Password inputs were empty.
- Showing custom tooltip error messages for invalid fields.
- Password must include an uppercase character and a number or a special character.
- Error tooltips update on keyup once they meet any part of the validation.
- The submit button must remain disabled until all fields are valid values.
This was something I made so I could use it for another interview coding test I had to make that was to be completed within 1 hour.
Isobar Canvas Logo Animation
This is my previous company’s logo with some animation added to it. I drew out the letters in the word Isobar using a background grid layered with an image of the logo so I could trace it with canvas drawing points. The font used in the logo was slightly tweaked in various ways so it was not possible to use the text methods in canvas to just type in the word. I had to draw it manually line by line. The animation of the circles is done in such a way that makes it look like they are coming out of the top of the letters. Only 10 circles show at once and only for a certain amount of time before they disappear allowing a new one to be created.
Note: View the result tab to see the animation. Showing it by default makes the animation not work correctly.
This was just a fun and simple animation showing all the HTML5 tags falling, kind of like the Matrix code.