4: Learning.

Css clip path will be the first thing for me to start learning as according to my gantt chart. I did encounter some confusion initially however it took me a little time to solve it and learn the way Css clip path works.

I start off with the links that I have kept and recorded in the learning plan, which is the explanation to the making of the website species in pieces (B.James, 2015) . The website then leads me to a page that explains what css masking is and how to do it (D.Schulze, 2013).

With the help of the tutorial from WebTunings (2013), I was able to successfully clip an image into a rectangle by clearing the confusion on how to calculate the size on the rectangle from the top and the left side.

Calculating the pixels to clip the image into a smaller rectangle.

The original image and the clipped image placed side by side for comparison and the codes at the side.

The img was changed into the Div name (try1) to see if the codes still work. It does.

Next, I proceeded to the next clipping shape, inset. I had a lot of problem with this particular shape as I don't understand whether the clipping format was the same as the rectangle clipping format and also I was unsure on how to write the border-radius statement in the code. As we all know that codes work in a very specific way. I went on and did some reading and research that the webpage provided on border-radius but it wasn't very helpful in a sense that I still don't know how to write it in Css code.

Then, I went on and google search Css Clipping mask and found a few websites whereby one of which was very helpful- Making sense of clip path by Drew Minns. The following are the ones that i tried out based on the website.

Copy and paste the circle clipping code onto my file and it works.

Notice the -webkit- (refer to image below)

The need to add -webkit- is explained

How the arrangement of the numbers affect the outcome.

playing around with the size of the circle.

Clipping the image into a triangle based on the reference.

Trying to invert the triangle.

Playing with the numbers on the code.

The ellipse clip is not working. (because of the space in between).

The ellipse clip is working.

I get how the inset clip work after referring to the website (Making sense of clipping mask)

Playing around with the inset clip.

Trying to clip the background out. Took up quite some time as I need to adjust the percentage, however it was quite easy.

Clipping a star out of the image.

The whole progress of learning Css clip path took me around 2.5 hours, in which I think is quite fast.


References:

James, B. (2015). The Making Of "In Pieces". [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/ [Accessed 24 Nov. 2015].

• Website explaining the making of species in pieces. Helpful resources regarding css clip path were provided. 

Minns, D. (2015). Making Sense of Clip Path. [online] Medium. Available at: https://medium.com/@drewisthe/using-making-sense-of-clip-path-cf651676438c#.43m6pfhhb [Accessed 24 Nov. 2015].

• A very helpful website with clear explanation and references for all types of clip path shape. 

Mozilla Developer Network, (2015). border-radius. [online] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius [Accessed 24 Nov. 2015].

•  An article explaining what border radius was, but it did not help much as there were no references/examples for me to write the codes.

Mozilla Developer Network, (2015). clip-path. [online] Available at: https://developer.mozilla.org/en/docs/Web/CSS/clip-path [Accessed 24 Nov. 2015].

•  A webpage explaining what and how to do clip path, it wasn't that much helpful for me as it explains a lot but there is no clear reference for me to study.

Schulze, D. (2013). CSS Masking - HTML5 Rocks. [online] HTML5 Rocks - A resource for open web HTML5 developers. Available at: http://www.html5rocks.com/en/tutorials/masking/adobe/ [Accessed 24 Nov. 2015].

• Webpage on Css Masking in which was only a little helpful as the other codes than the rectangle clip code,  was not clear for me

YouTube, (2015). CSS3 Tutorial - clip property. [online] Available at: https://www.youtube.com/watch?v=4sroShCI1LE [Accessed 24 Nov. 2015].

•  A video on how to calculate the percentage of mask that you want to clip, very helpful to me as I did have a wrong perception on how to clip the image.