Workshop – CSS

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:

Screen Shot 2014-11-10 at 16.18.41

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.

Screen Shot 2014-11-10 at 16.18.55

This is a screenshot of the outcome of the CSS script

Screen Shot 2014-11-10 at 16.19.05

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.

Screen Shot 2014-11-10 at 16.19.18

This is a screenshot of the outcome from tilt code.

Screen Shot 2014-11-10 at 16.20.11

This is a screenshot of when I coded the boxes to morph when the mouse hovers over them.

Screen Shot 2014-11-10 at 16.20.24

This is a screenshot of the outcome of the morph code.

Screen Shot 2014-11-10 at 16.24.56

I then attempted to make the background colour of the boxes go dark blue when hovered on.

Screen Shot 2014-11-10 at 16.24.52

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s