swiftystar4

Day 11 - Hypnotic Background #30DaysOfCSSGirls

Hypnotic Background made people stay somewhere between being awake and asleep during the process of being a hypnotic state.

A Pen by Jia Qian Koh on CodePen.

License.

swiftystar4

Day 27 - CSS Transitions #30DaysofCSSGirls

The most basic way to get someone's attention is this: "Break a pattern" like breaking off someone's comfort zone. Look like Instagram Post's Layout and Design. Hover around each different patterns has its own different transitions.

A Pen by Jia Qian Koh on CodePen.

License.

swiftystar4

Understanding about CSS Animations Level 1 - #30DaysofCSSGirls

CSS Animations

Animations

• Affect computed property values
• Effect happen by adding a specified values to CSS Cascade that produce the correct computed value for current state of the animation

Keyframes

swiftystar4

Understanding about CSS Transitions Level 1 - #30DaysofCSSGirls

CSS Transitions

Transitions

• Computed value of a property transitions over time from old value to new value
• Each of the transition properties accepts a comma-separated list and allows multiple transitions to be defined

'transitions-property' Property

swiftystar4

Understanding about Flexible Box Part 2 - #30DaysofCSSGirls

Flexible Box Part 2 - Chapter 7 to 8

Flexibility

• Ability to make flex items to be "flex"
• Alter width / height to fill available space inside container

'flex' Shorthand

swiftystar4

Day 25 - Flex Item Width #30DaysofCSSGirls

Flex Item Width want to reduce the space for words or sentences for putting in the same width. It is easier to put and align the images into the flex container. I find it's easier for people to put long words or sentence into the flex item without resizing the width.

A Pen by Jia Qian Koh on CodePen.

License.

swiftystar4

Understanding about Flexible Box Part 1 - #30DaysofCSSGirls

Flexible Box Part 1 - Chapter 1 to 6

Overview of Flex Box's Content

• Any flow direction (L, R, D, U)
• Display order reversed or rearranged at the style layer
• Laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
• “Flex” their sizes to the available space

swiftystar4

Day 23 - Navigation Bar #30DaysofCSSGirls

Navigation Bar can be lead to your way of finding the information inside the website. It can be helping people to know more products' review such as fashion, IT and etc. It guides the reader to know places and food recommendation for travel which help local business to pick their business through the website.

A Pen by Jia Qian Koh on CodePen.

License.

swiftystar4

Day 21 - CSS Blog Layout #30DaysOfCSSGirls

Inspired by Blogger Website. Blogger can be using sharing your voices, opinions, ideas such as pictures and videos with your readers. It can be helping people to know more products' review such as fashion, IT and etc. It guides the reader to know places and food recommendation for travel which help local business to pick their business through the website.

A Pen by Jia Qian Koh on CodePen.

License.

swiftystar4

Day 19 - CSS Pattern #30DaysOfCSSGirls

The most basic way to get someone's attention is this: "Break a pattern" like breaking off someone's comfort zone. Look like Instagram Post's Layout and Design. Each different patterns have their own meaning behind the stories like each Instagram Post.

A Pen by Jia Qian Koh on CodePen.

License.