Today I spent some time on customizing the share-box used in this blog.
Here is the effect
The cover effect for the social network icons are simulate the icon is floating from the background by animating the shadow. In the implementation, I used some shadow described in Material Design Shadow in HTML. For the texts, I use the text-shadow effect that used on the same text shadow used on tht title of the article.
To ㊗️ my wife passed driver license theory course, I created a new log for my blog 😝
Here is what I got:
Gear is the hint of workshop. Because this blog is named as TimNew's ThoughtWorkshop
In the beginning, I was intend to create the gear in Steampunk style. I like such old-fashioned style, but later I found such style is not distinguishable in small icon, so I simplified it to the dark-metel gear.
Letter D is from the pronunciation of my Chinese name, which might not be well-known. It is a personal logo, so I wish to have something personal in it.
The font is Gear Box from Gaut Fonts.
It is an awesome font to create some mechanical feel design.
The rainbow color is the hint of unrestrained idea and inspiration. In Chinese, it reads 天 🌌 马 🐎 行 ✈️ 空 🚀 不 🚫 靠 🎵 谱.
Well, this is it.
Working on Hexo theme customization in past few days. And wish to borrow some concepts from Google’s Material Design.
The concept that I’m interested most in Material Design is the Dimensionality. It identify visual area on the page with Shadow.
By defining multiple shadow configuration, it creates layers in a 2-D space! Simple and efficient. What a graceful solution!
By referencing the Shadow Definition in the spec, I recreate the effect with plain CSS.
Clicking the div will shift the shadow depth.
Test it on Mobile, and found the top-shadow is not displayed properly. The reason is that I used multiple-shadow to apply Top Shadow and Bottom Shadow to the same div. But according to Box-Shadow MDN Document, Multiple shadows is only supported by iOS Safari with -webkit- prefix. So it doesn’t work properly.
Before recreate it, I also checked the Polymer and Angular JS, and the result is disappointing. Ploymer version has better quality than Angular Js version, Angular JS one is still very buggy.
Even they’re functioning, either Polymer or Angular-JS is too intrusive or too heavy for simple page to use, such as blog. If you don’t really need these transition animations, to implement these basic effects, CSS3 should be enough.