Makzan / I share what I learnt

CSS

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 / February 3, 2016

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 / January 15, 2016

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 / January 13, 2016

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 / January 8, 2016

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 / December 15, 2015

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 / December 1, 2015

CSS Pattern with Repeating Linear Gradient

Link: Why Do We Have repeating-linear-gradient Anyway? I like the idea of using repeating-linear-gradient to generate pattern. They look cool! background: linear-gradient(135deg, #000 .25em, #0092b7 0); background-size: .75em/sqrt(2) .75em/sqrt(2);

Read Post / October 1, 2015