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 […]
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 […]
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.
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.
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
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);
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. […]
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.
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 […]
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:
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 […]
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:
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 […]
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. […]
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 […]