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
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
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
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
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: 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.
Read Post / December 14, 2015
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
Link: http://colinkeany.com/blend/ Useful tool to create CSS3 gradients, by @colinkeany. It works in mobile too.
Read Post / October 17, 2015
Link: Corpus—A collection of CSS Useful CSS resource. Bookmark here.
Read Post / October 13, 2015
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
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
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
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
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
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
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 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
Foundation for App is out. This is a quick note on learning the grid system which is based on the FlexBox.
Read Post / December 10, 2014
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
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
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
