Posts tagged css3

10 Notes

Small but important (and final?) change to linear gradient syntax

bricss:

After redefining angles in gradients, another small but important revision was made to the linear gradient syntax last week. It’s outlined in full detail on Peter Gasston’s blog, but the gist is this: If you need a direction keyword, you’ll have to specify the destination keyword and prepend…

Notes

Help with CSS3 transforms messing up the z-index
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. :)

Help with CSS3 transforms messing up the z-index

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. :)

Notes

Dribbble: WestMill Capital “Continue Reading” button, hover state

Dribbble: WestMill Capital “Continue Reading” button, hover state

1 Notes

Dribbbling away: WestMill Capital news listing

Dribbbling away: WestMill Capital news listing

27 Notes

css3watch:

Pure CSS Share Buttons by @joshuanhibbert

css3watch:

Pure CSS Share Buttons by @joshuanhibbert

1 Notes

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.
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

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. 
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. 

Notes

428 Notes

simurai:

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.
Feed the monster.

simurai:

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.

Feed the monster.

8 Notes

decodering:
Glowform

CSS3 (image-less) Glowing Login Form (inspired by Dragon Labs).
Webkit browsers recommended. Use Firefox 4 to see the fallback animation.

decodering:

Glowform

CSS3 (image-less) Glowing Login Form (inspired by Dragon Labs).

Webkit browsers recommended. Use Firefox 4 to see the fallback animation.