Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Jia Qian swiftystar4

🎯
Focusing
Block or report user

Report or block swiftystar4

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@swiftystar4
swiftystar4 / day-11-hypnotic-background-30daysofcssgirls.markdown
Created May 21, 2019
Day 11 - Hypnotic Background #30DaysOfCSSGirls
View day-11-hypnotic-background-30daysofcssgirls.markdown

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.

View day-27-css-transitions-30daysofcssgirls.markdown

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
swiftystar4 / CSSAnimationsLvl1.md
Last active May 20, 2019
Understanding about CSS Animations Level 1- #30DaysofCSSGirls
View CSSAnimationsLvl1.md

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
swiftystar4 / CSSTransitionsLvl1.md
Last active May 17, 2019
Understanding about CSS Transitions Level 1- #30DaysofCSSGirls
View CSSTransitionsLvl1.md

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
swiftystar4 / FlexBoxPart2.md
Last active May 14, 2019
Understanding about Flexible Box Part 2 - #30DaysofCSSGirls
View FlexBoxPart2.md

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
swiftystar4 / day-25-flex-item-width-30daysofcssgirls.markdown
Last active May 21, 2019
Day 25 - Flex Item Width #30DaysofCSSGirls
View day-25-flex-item-width-30daysofcssgirls.markdown

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
swiftystar4 / FlexBoxPart1.md
Last active May 14, 2019
Understanding about Flexible Box Part 1 - #30DaysofCSSGirls
View FlexBoxPart1.md

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
swiftystar4 / day-23-navigation-bar-30daysofcssgirls.markdown
Last active May 13, 2019
Day 23 - Navigation Bar #30DaysofCSSGirls
View day-23-navigation-bar-30daysofcssgirls.markdown

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
swiftystar4 / day-21-css-blog-layout-30daysofcssgirls.markdown
Last active May 7, 2019
Day 21 - CSS Blog Layout #30DaysOfCSSGirls
View day-21-css-blog-layout-30daysofcssgirls.markdown

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
swiftystar4 / day-19-css-pattern-30daysofcssgirls.markdown
Created Apr 12, 2019
Day 19 - CSS Pattern #30DaysOfCSSGirls
View day-19-css-pattern-30daysofcssgirls.markdown

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.

You can’t perform that action at this time.