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

Foundation 6 and CSS Preprocessor

Link: Foundation 6: Leaner, Meaner and Cleaner Sass Yep, let’s start with the bottom line: when writing Sass, remember that you’re always one step removed from your CSS output. In general, we shouldn’t be producing crazy CSS that we would never write without Sass. A good reminder on what we should becareful when using CSS preprocessor. […]

Read Post / September 28, 2015

Dealing with long words in CSS

Link: Dealing with long words in CSS Final solution This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. This is a useful technique when you need to deal with long words in your web design. For example, when you need to reference a long city name.

Read Post / September 25, 2015

Start using flexbox today

We can start using flexbox nowadays. If you have not started exploring this new layout feature, the “Using flexbox today” is a quick-start guide. Flexbox is not just a replacement of the float. Flexbox can actually solve the layout problems that we face by using the current CSS technologies. The website “Solved by Flexbox” shows how […]

Read Post / April 17, 2015

Gray highlight and active state in mobile Safari

Link: CSS-Tricks: Remove Gray Highlight When Tapping Links in Mobile Safari This is a simple tricks but very useful if you’re trying to make a button in HTML looks like a real button in touch devices.Remove the tap highlight: and make the :active state works when user touches that element:

Read Post / March 18, 2015

CSS Quantity Selector

The Quantity Queries for CSS essay from A List Apart shows how we can use current CSS selectors to perform quantity queries. By using the techniques in the essay, we can apply styles when the element count matches specific number, or when the element count is greater or smaller than the specific number. I created a demonstration on how […]

Read Post / March 12, 2015

Demo of Object Fit

http://codepen.io/makzan/full/pvKeOb I created a demo on the new CSS object-fit property. It’s like background-size cover or contain. But object-fit works on the media instead of the background. The images are treated as content for accessibility purpose. The demo works in Safari, Chrome, Firefox and mobile Safari, mobile Chrome. Here is the core code example:

Read Post / February 27, 2015

Twitter’s fav icon with CSS step function

Twitter’s new fav icon animation uses static image and the sprite sheet technique. This is the technique we use a lot in game design. The CSSAnimation.rocks shows how we can archive the Twitter’s fav sprite sheet animation with CSS-only steps function. Back in 2012, Simurai has demonstrated the same effect, which I have used in my classes and books. It’s […]

Read Post / February 15, 2015

CSS is 20 years old

CSS is 20 years old today. From Cascading HTML style sheets – a proposal – W3.org: This document proposes a style sheet scheme for HTML documents. The proposed scheme provides a simple mapping between HTML elements and presentation hints. Properties like font family and window size can be suggested by the style sheet… The proposal used wording like ‘hints’ and ‘suggest’ to describe CSS. […]

Read Post / October 10, 2014

CSS rules priority

Types of selector has the following priority order. !important > inline style=”” > ID > class > DOM Element When two selectors are in the same types, the count determines the orders. Demo:

Read Post / October 10, 2014

The CSS 3D book effect

Recently Amazon updates the book cover into a 3D book in some their paperback web page. In my web design course, I showed how to use the CSS transform and transition to make a 3D rotation box and greeting card flipping effect. The 3D rotation box effect: The greeting card flipping effect: By combining these two effects with a simple flip […]

Read Post / October 10, 2013