Makzan / I share what I learnt

CSS

Block-grid layout with CSS Grid

The minimal(200px, 1fr) means every grid column has minimal 200px width. If there are more spaces, they all have equal width because of the 1fr fraction setting. The repeat and auto-fill means repeating the column to fill in as many columns as possible according to the minmax(200px, 1fr) requirement.

Read Post / 2020-01-31

Parallax CSS 3D rotate Effects

I just created 2 demos of CSS 3D hovering effects—Parallax flipping and Pop-up highlight. Parallax flipping: Video Preview: View this post on Instagram CSS Parallax 3D card flipping effect. (With slow motion) A post shared by MakClass (@makclass) on Feb 2, 2016 at 8:36am PST Pop-up Highlight: Video Preview: View this post on Instagram CSS hover […]

Read Post / 2016-02-03

Styling focus element outline

Just realize that z-index only works on non-static element. May be I knew it before but didn’t really make it a knowledge. When using tab to focus between links, we can use outline to style the focus outline and make it clearer. But element next to the focused link can block the outline. The key point […]

Read Post / 2016-01-15

The CSS first-letter not working for inline

When I am making the first letter of my latest post into lowercase, I realise that CSS’ ::first-letter selector doesn’t work for inline element. The spec said it supports block element. I tried to use inline-block and success. See the highlighted “a” in the following screenshot.  

Read Post / 2016-01-13

Teaching the easing function

I hosted a CSS class tonight, which I talked about how to make those CSS 3D transition effects. Here is the graph explaining the easing function.

Read Post / 2016-01-08

CSS Toggle Switch

Link: CSS Toggle Switch The beauty of this CSS toggle switch is that it is accessible when JS/CSS is not available. The following is the HTML it uses. Which works when in HTML-only environment. I also demonstrated a customized checkbox.

Read Post / 2015-12-15

Link: Froggy, a game to learn CSS Flexbox

Link: Learning CSS Layout with Flexbox Froggy The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels! A nice game to learn Flexbox: http://flexboxfroggy.com

Read Post / 2015-12-01