Category: 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: CSS Parallax 3D card flipping effect. (With slow…

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…

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…

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.

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…

Link: How to animate “box-shadow” with silky smooth performance

Link: How to animate “box-shadow” with silky smooth performance Box-shadow transition Takeaway note: Use :after to apply the box shadow. Transition opacity of :after element instead of box-shadow.

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…

Blend—Generate simple and beautiful CSS3 gradients

Link: http://colinkeany.com/blend/ Useful tool to create CSS3 gradients, by @colinkeany. It works in mobile too.

Corpus—A collection of CSS

Link: Corpus—A collection of CSS Useful CSS resource. Bookmark here.

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);

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…

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…

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…

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…

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…

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 demo works…

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…

Learning grid system of Foundation for App

Foundation for App is out. This is a quick note on learning the grid system which is based on the FlexBox.  

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…

CSS rules priority

Types of selector has the following priority order. !important > inline style=”” > ID > class > DOM Element When two selectors are in the…

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…