Marko Ranđelović's tumblelog.
So, turns out applying CSS3 transforms on an element messes up the z-index assigned to elements. I am building this post-it-styled small navigation element for a client and the gray element you see in the image above should be under the post-it.
If you comment out the transforms in the .topNav rule, you can see that the shadow goes under the post-it, as specified in the CSS. Uncomment the transforms and the z-index declarations are ignored.
Please check out the jsFiddle and let me know if there is a workaround.
P.S. I know the styling isn’t perfect. :)
1 Notes
Zoom
And here is the second part of the article. Check out the first part if you missed it.
At long last, here is part 2 and here be geolocation! Aside from the geolocation API, we will talk about Web Storage (namely: localStorage) and a wee bit of jQuery for a quick AJAX call & fading effects. Finally, we will use some PHP functions for sunrise and sunset time’s calculations.
2 Notes
Zoom
I have finally written a new article for Onextrapixel a few weeks ago and it’s out today.
So, in part 1, we will discuss HTML and CSS and the idea for part 2 is to locate the visitors of our demo page using the geolocation API and then use PHP to calculate the sunrise and sunset times based on the users latitude and longitude. If the current time happens to be before sunrise or after sunset, we add a new style sheet which will darken the layout’s colors.
418 Notes
The Cursor Monster is a little CSS3/JS toy that you can play around with. Using cursor:none can be fun, but also super confusing if you abuse it. So be careful. Update: Apparently Chrome will disable it in a future release, so enjoy while you can.
10 Notes