Today we looked further into CSS with Brackets. We learnt about the different dictations that allowed us to create a box with writing inside it.
Below are screenshots of the different things we did with CSS:
This is a screenshot of how we created the boxes and added, background, padding, margins and borders. I also went on to change the font style of the text to Helvetics.
This is a screenshot of the outcome of the CSS script
We were then asked to make the scripts to react when the mouse is hovered using the “hover” command. The screenshot shows how I coded the boxes it to tilt when I hover the mouse of them.
This is a screenshot of the outcome from tilt code.
This is a screenshot of when I coded the boxes to morph when the mouse hovers over them.
This is a screenshot of the outcome of the morph code.
I then attempted to make the background colour of the boxes go dark blue when hovered on.
This is a screenshot of what it looks like when I now hover the mouse over the box.
Overall I found this workshop to be very interesting as it allowed me to understand how CSS works better. I also found it to be quite easy to do and was happy to know that there are plenty of resources on the web to help you with the codes if needed. This will allow me to be more confident when working on my own individual project that involves CSS in the future.