Making a Sphere in CSS

Published January 9, 2013 by saurav.roy.

CSS Sphere

Traditionally, the web has been a static, two dimensional space. CSS allowed us to modify the width and height of elements on our websites, but it has been difficult to create a sense of depth without using lots of extra images, and creating motion has always been the realm of Flash or JavaScript. Happily, this is changing.

CSS3 provides us with a slew of new tools that allow us to do some fantastic things simply — things that would have required extra images at the least, or an entirely different language more commonly, to accomplish. And while browser support isn’t always the best for these new tools yet, sometimes it’s fun to play with what the web of tomorrow offers instead of dealing with the web of today or yesteryear.

Today, let’s start with something simple: we’ll turn a regular, blocky old element into a sphere. Read On…

Share and Enjoy !

0Shares
0 0

Cross-Browser Rounded Buttons with CSS3 and jQuery

Published April 22, 2010 by saurav.roy.

So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.

So let’s make it simple!

Right away I knew that I wanted to present as simple a solution for the developer as I could. I didn’t want to force them to use tons of extra markup in their HTML to pull this trick off. This was a piece of cake in modern browsers, as you’ll see in a moment. Unfortunately, this site also has a large IE user base, so I needed to account for less-modern browsers as well.

Border-Radius for Those Who Can

I decided I wanted to use border-radius for the rounded buttons for any browsers that could support it. I also decided that I wanted to create a single class, “button,” for any buttons, and it should work more-or-less the same on anchor tags, button tags, and “submit-type input tags. Read On…

Share and Enjoy !

0Shares
0 0

Test for Border-Radius Support

Published April 15, 2010 by saurav.roy.

Of all the fantastic magical CSS3 properties out there, border-radius was one of the first I really latched on to. It made sense to me from the start, and I could see immediate practical uses (at least, as far as a border can be practical). If you’re not using the border-radius property yet, be sure to check out my article on how to use it.

Unfortunately, even though more advanced browsers started supporting border-radius years ago, not all browsers are up to speed yet. As of this writing, border-radius is supported in Webkit (Safari/Chrome), Firefox, and rumor has it Konqueror, though I don’t have a Linux install so I can’t prove that. That leaves Opera and Internet Explorer out of the game – I’ve heard rumors that Opera will support border-radius soon, but the latest version is still a no-go.

As I argued in my last article on the topic, most of the places people should use rounded corners today fall into the realm of “progressive enhancement”: the site looks better with the element rounded, but it’s not the end of the world if someone sees a square corner.

Of course, what should be true and what a client requires aren’t always the same thing. Read On…

Share and Enjoy !

0Shares
0 0

Easy Rounded Corners with Border-Radius

Published August 6, 2008 by saurav.roy.

The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!

However, the forthcoming CSS3 specification offers us a glimmer of hope in the form of rounded corners. That’s right — once CSS3 is commonly supported, we’ll be able to childproof all those pointy edges and beautify the web in the process.

And better yet, a few browsers already support rounded corners! As I’m writing this, you’re pretty much limited to Mozilla/Firefox and Safari 3. However, this list is bound to grow as time goes on, so it couldn’t hurt to start playing around with this feature. Especially considering that, in the browsers that don’t support rounded corners, nothing bad happens — the user just sees regular, square corners.

For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

And this rule will create a div that looks like this:

The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.

The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:

blockquote {
	margin: 1em 20px;
	padding: 10px;
	border: 2px solid #555;
	background-color: #f2f2f2;
	color: #555;
	font-size: 140%;
	text-align: justify;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; }

Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:

And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages:

.alert {
	border: 2px solid #fc0;
	padding: 8px 10px;
	font-size: 120%;
	color: #c90;
	font-weight: bold;
	background-color: #ff9;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;	
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px; }

Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:

.comment {
	border: 1px solid #999;
	background-color: #d8d8f4;
	margin: 1em 40px;
	padding: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;	
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 8px; 	
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px; }

You can see all of my examples in action here. And these are just a few ways of the hundreds of ways you can harness the power of rounded corners with just a few lines of code. With techniques like this at our disposal, it’s easy to see why we’re all so eagerly awaiting CSS3!

Share and Enjoy !

0Shares
0 0