Rounded Corner Boxes With Expandable Heights Using CSS and Images
Rounded Corner Boxes With Expandable Heights Using CSS and Images
|
|
Rounded corners are a great design element to escape from the blocky/boxiness a … the first time I created my own rounded corner box using Photoshop and HTML/CSS. …
Similar Posts
- Recreate my flower using proportional units instead of pixels. That would allow you to resize the flower and still keep it looking pretty!
- With a bit of absolute positioning and more rounded corners, try adding clouds to the otherwise bland background.
- My flower’s leaves remind me of cat eyes. Try creating a cat or similar beast using pure CSS.
Perfect Rounded Corners with CSS • Perishable Press
CSS code for rounded corners for all supportive browsers. Bookmarkable reference! … CSS Rounded corners for bottom-left corner …{ visibility: inherit; } Rounded Corners With CSS & Images
The Ultimate Guide To Rounded Corners With CSS & Images! … and most importantly, the easiest, method to round corners with CSS and images. …{ visibility: inherit; } Rounded Corners With CSS & Images
The Ultimate Guide To Rounded Corners With CSS & Images! … and most importantly, the easiest, method to round corners with CSS and images. …Wordpress Supplies " CSS
Download Free Wordpress Themes, HTML & CSS Templates … Right Sidebar Rounded Corners Sports Top Navigation Travel Violet White Widget …Spiffy Box - Simple Rounded Corner CSS Boxes made easy.
The Spiffy Box is really just an automated way to create the code and image … Or rather, “Simple Rounded Corner CSS Boxes” as he now calls it. …12 Creative and Cool Uses for the CSS Border Property
If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?
Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.
Jazzing Up Anchors
I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:
.entry a {
color: #253c93;
text-decoration: none;
border-bottom: 1px dotted #253c93; }
.entry a:hover {
border-bottom: 1px solid #253c93; }
That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.
Build a Postage Stamp
A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:
<div class="stamp"> <p>99¢</p> </div>
And CSS:
.stamp {
width: 500px;
height: 414px;
background: #fff url(george.jpg) no-repeat;
border: 12px dashed #1b1a19; }
.stamp p {
color: #fff;
margin: 10px 10px 0 0;
font: bold 60px Georgia, "Times New Roman", Times, serif;
text-align: right; }
Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.
Prettier Images
Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:
img.photo {
border: 1px solid #999;
background-color: #fcfcfc;
padding: 4px;}
You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.
Homemade Coupons
If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
Just that speck of code gives me a nice coupon that looks something like this:
You’ll have your readers printing and clipping in no time.
Better Blockquotes
Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:
blockquote {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }
Just a touch of code, and voila… instant credibility!
Hunt Archaic Code
If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:
font, center, s, u, b, i {
color: #000;
font-weight: bold;
background-color: #f99;
border: 3px solid #c00; }
For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.
Round the Bend
So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:
div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!
Angle it In
Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.
CSS Drawings
And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.
This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!
There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.
Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.
Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.
If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!
CSS Art: The Flower
Today’s article is probably not the most practical tutorial I’ve ever written, but it was definitely one of the most fun to create. It also shows that, while CSS is often treated as a straightforward web development workhorse (and it’s a great workhorse, at that), it can also have a lighthearted, eccentric side as well. Today’s tutorial is about how to use CSS to create art.
Now, as I’ve mentioned numerous times, I am not an artist. If true CSS artists were likened to Salvador Dali or someone similar, I’d be more akin to the guy watching Bob Ross on public television and following along at home, creating wobbly little smudges and pretending they’re happy little trees. But! What my example above (and you can skip ahead and see the final version) shows is that it doesn’t take very many CSS rules to create some pretty cool CSS art.
And the best part about tackling CSS art is you’re likely to learn a lot about CSS along the way. Sure, this art form is probably only a step or two above the ASCII art generated in the nineties – but playing around with ASCII art taught me a decent bit about letter forms, line lengths and the rest. Likewise, practicing CSS art will teach you an awful lot about sizing, positioning and the use of color to create an effect.
To warn: my example flower makes extensive use of the border-radius property (which I’ve covered more in-depth here), which doesn’t work in Internet Explorer. The net result is that the IE version of my flower looks a bit Atari-esque… but the rest of the code still works fine.
So let’s get to the code!
The XHTML
I’ve attempted to keep my code as simple as possible, while still keeping each of my flower’s segments separated for easy adjustment. Here’s what my code looks like:
<div id="background"> <div id="flower"> <div id="topleft" class="petal"></div> <div id="topright" class="petal"></div> <div id="center"></div> <div id="bottomleft" class="petal"></div> <div id="bottomright" class="petal"></div> <div id="leftleaf" class="leaf"></div> <div id="stem"></div> <div id="rightleaf" class="leaf"></div> </div> </div>
The “background” div creates the blue sky and green grass, while the “flower” div contains the rest of my work. Each petal and leaf gets its own ID, while each group shares a class to reduce the number of rules I have to write. The stem and center circle are unique, and thus don’t have a class assigned.
I’ve written my code in the same order that it is to appear on the screen (assuming I move top to bottom, left to right). However, if you were willing to make more extensive use of positioning than I have, you could conceivably place the individual divs in any order you so chose.
The CSS
And now for the fun part! I’ll break my CSS into several parts so you can see how it all comes together. First, we’ll set up the background and the main flower div:
#background {
position: relative;
background-color: #9cf;
width: 600px;
height: 476px;
border-bottom: 10px solid #090;
margin: 0 auto; }
#flower {
position: absolute;
top: 20px;
left: 172px;
width: 256px; }
The background has been relatively positioned so that I can absolutely position my flower inside it, using the relative-absolute positioning trick. I’ve also given it a width and height, to provide my image’s frame. Then I’ve used a background color to simulate the blue sky and a border to provide the ground. My flower is absolutely positioned (which also means it becomes the containing div for any positioned divs nested inside), and is placed on top of the background.
Then we have the flower petals:
.petal {
background-color: #f33;
float: left;
margin: 1px 1px 0 0;
width: 125px;
height: 125px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; }
#topleft {
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom: 2px solid #c33;
border-right: 2px solid #c33; }
#topright {
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom: 2px solid #c33;
border-left: 2px solid #c33; }
#bottomleft {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top: 2px solid #c33;
border-right: 2px solid #c33; }
#bottomright {
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top: 2px solid #c33;
border-left: 2px solid #c33; }
This is the largest chunk of CSS (because each petal is slightly different), but it’s fairly repetitive in nature (because each petal is fundamentally the same). The “petal” class sets our basic rules: our petals are dark red, floated left, have a tiny bit of space on their top and left sides, are 125 pixels wide and tall, and have rounded corners.
The following four sets of rules simply specialize each of the petals to make them unique. I’m doing two things. First, I’m removing the curved border on the innermost corner; technically the center circle covers almost the entire inner corner, but it looks cleaner without the curve, and it also allows me to resize the center area without worrying about whether the curved border will show through. Then I’m adding a 2-pixel wide darker red border to the inner two sides of the flower petals, which adds a sense of depth and a bit of visual interest.
Next we have the center circle and the stem:
#center {
position: absolute;
left: 112px;
top: 112px;
background-color: #ff3;
width: 30px;
height: 30px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px; }
#stem {
float: left;
width: 12px;
height: 200px;
margin: 0 1px;
background-color: #093; }
Although the center area looks like a circle, like all XHTML elements, it is technically a rectangle. This particular rectangle is a square, 30 pixels wide and tall. And then all I’ve done is given each side a 15 pixel border radius, resulting in a perfect circle. Once the circle was made, I used absolute positioning to center the circle over the intersection of the four flower petals.
The stem was the most straightforward of my elements. It’s a true unrounded rectangle, given a green background color, a width, height, and margin, then floated left so I could place my leaves directly against it without having to resort to absolute positioning.
And speaking of the leaves, here’s how they were created:
.leaf {
float: left;
margin-top: 80px;
background-color: #093;
width: 60px;
height: 30px; }
#leftleaf {
clear: left;
margin-left: 10px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px; }
#rightleaf {
-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px; }
I was particularly proud of how the leaves turned out, even though they’re fairly simple in design. The leaf class sets some defaults: they’re floated left, given a top margin to push them down the stem, the background color matches the stem color, and the width and height give them a long, slender (if blocky) appearance.
The individual leaf IDs are what make them look so nice. Each leaf has two rounded corners on opposite sides. The rounded corners continue for exactly half the width of the box. The result is a very visually appealing curve. The left leaf also received two additional treatments: it gets a clear to ensure it doesn’t show up to the right of the petals, and has a left margin to push the stem exactly where I wanted it.
And that’s all there is to this flower! Even though it may seem complex, I’ve really only used a dozen or so CSS properties in a variety of different ways. As I said, this is a great exercise to tackle in order to gain a greater understanding of how positioning elements works (and it’s a lot of fun for the border-radius property as well).
Additional Challenges
So that’s what I was able to accomplish in less than 100 lines of code. So what can you do? I encourage you to show me up and share links to your masterpieces in the comments below. Here are some suggestions for challenges:
And no matter what: have fun!
