Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Rounded corners with just one image - My 2 cent share
Old 02-28-2011, 06:48 PM Rounded corners with just one image - My 2 cent share
Skilled Talker

Posts: 83
Trades: 0
Here is a method I use for rounded corners. I only have a solid color method as of now also this does not work in IE6

I dont really feel like explaining selectors so you might want to look that up if you dont understand.

This will expand by height and width and requires only one image.

Code:
*{ padding:0; margin:0;}
html  { background: #45473f; height: auto; }
body  { width: 80%; margin: 20px auto; font-size:10px; font-family: Arial, Helvetica, sans-serif; }
p     { font-size: 1.2em; line-height: 1.2em;}
p ~ p { margin: 1.2em 0 0 0; }

/* *** Round Corners  #ffc658  - (background-position: -28px 0;) + (width: 12px;) or (height: 12px;) = background width *** */
.round_container div { background: #ffc658 url(images/sprite-round_corner.png) no-repeat; overflow: hidden; min-height:12px; line-height: 12px; padding:0; }
div.round_corners    { background-position: 0 0; background-color: transparent; float: left; width: 12px; height:12px; padding:0; }
.round_corners + div { background-position: -28px 0; background-color: transparent; float:right; width: 12px; height:12px; padding:0; }
div.round_content    { padding: 0 12px; }
.round_content + div.round_corners { background-position: 0px -28px; }
.round_content ~ div { background-position: -28px -28px; }
Code:
<div class="round_container">
    <div class="round_corners"></div><div></div><div>&nbsp;</div><!-- Round Corner Top -->
    <div class="round_content">
        <h2>Without Shadow</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu erat ac urna facilisis dignissim vel sed urna. Integer facilisis tortor hendrerit velit interdum volutpat nec ut arcu. Suspendisse purus leo, gravida ac condimentum nec, rhoncus ut felis. In hac habitasse platea dictumst. Etiam convallis metus nec odio mollis sed lacinia mi molestie. Donec interdum euismod nisi, non viverra felis laoreet vel. Phasellus libero sapien, vestibulum vel volutpat id, pharetra et augue. Praesent feugiat sollicitudin neque, eget facilisis dui hendrerit in. Donec ut augue justo, in fringilla orci. Curabitur ultrices, nulla varius vulputate eleifend, elit augue ullamcorper magna, vel interdum nibh sapien vitae dui. Donec tincidunt rhoncus magna, eu suscipit ipsum pharetra a. Mauris tempus nisi a ante tincidunt luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae mi nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sollicitudin feugiat augue a porta. Nulla mattis nibh at dui malesuada dapibus. Duis ullamcorper, sem quis tempus lobortis, tellus lacus convallis nisl, nec suscipit lectus sem ut quam.</p>
        <p>Pellentesque vestibulum consequat rhoncus. Nunc pretium, odio a venenatis accumsan, ante libero lobortis ipsum, non mollis sem lacus ac lectus. Mauris placerat mollis orci, et tempus ipsum adipiscing vel. Fusce auctor neque et neque gravida rhoncus. Cras ac orci odio. Suspendisse potenti. In vel lorem ac nunc ornare suscipit. Curabitur a nibh nec diam aliquet viverra consequat at nunc. Maecenas lacinia sapien lobortis odio convallis nec imperdiet augue cursus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis volutpat enim.</p>
        <p>Sed et orci arcu, mattis interdum enim. Cras felis libero, consequat sit amet sodales in, ornare eget ante. Nullam eu leo quis velit suscipit fringilla a vitae dui. Fusce sem orci, aliquam sed dictum eget, sollicitudin non velit. Praesent nisl magna, consequat eu imperdiet sed, placerat vel ligula. Phasellus pulvinar magna et diam vehicula et pellentesque urna porta. Aliquam interdum, nulla sit amet viverra adipiscing, leo ligula condimentum tellus, et ultrices nunc est in ipsum. Vivamus sit amet nisl magna, ac aliquam erat. Suspendisse euismod, nisl non suscipit rhoncus, enim purus ullamcorper orci, eget fermentum lorem mauris sed nunc. In eu mi elit, sit amet dapibus orci. Phasellus vulputate varius ligula, at imperdiet sem adipiscing id. Curabitur eu erat quis quam cursus consectetur eget ac ligula. Donec ullamcorper ligula sit amet purus rutrum et accumsan quam vehicula. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras in interdum justo. Vivamus cursus, ligula vel posuere gravida, erat est fringilla libero, vitae accumsan libero turpis ut libero. Vivamus vestibulum congue magna non dignissim. Vestibulum quis mi tortor, eget</p> 
    </div>
    <div class="round_corners"></div><div></div><div>&nbsp;</div><!-- Round Corner Bottom -->
</div>
Here is a link of how it will look
http://www.chefcss.com/examples/rounded_corners.html

Any new ideas to add to this will be appreciated.
__________________
»
Please login or register to view this content. Registration is FREE
- Interactive maps for websites
»
Please login or register to view this content. Registration is FREE
for web developers
DmitryS is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 02-28-2011, 06:54 PM Re: Rounded corners with just one image - My 2 cent share
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,376
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Why care about IE6.

Just use the CSS border-radius property and they will simply degrade to square corners in browsers that don't support it.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 03-01-2011, 11:28 AM Re: Rounded corners with just one image - My 2 cent share
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
I have to agree..using CSS3 for rounded corners is far easier and supported by GOOD browsers. IE users will just get square corners.. poor them
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-01-2011, 12:43 PM Re: Rounded corners with just one image - My 2 cent share
Experienced Talker

Posts: 34
Name: Larry Morgan
Trades: 0
I'll try this piece of code. Looks like it's useful in our site.
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
usrecord is offline
Reply With Quote
View Public Profile Visit usrecord's homepage!
 
Old 03-01-2011, 02:38 PM Re: Rounded corners with just one image - My 2 cent share
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
Interesting technique, but I'm with these two:

Quote:
Originally Posted by chrishirst View Post
Why care about IE6.

Just use the CSS border-radius property and they will simply degrade to square corners in browsers that don't support it.
Quote:
Originally Posted by LadynRed View Post
I have to agree..using CSS3 for rounded corners is far easier and supported by GOOD browsers. IE users will just get square corners.. poor them
The sooner the web design community stops supporting IE6 & 7, the sooner we can all move on. I now tell my clients their will function in IE, but they won't look great - I simply let things like rounded corners degrade into square ones, as Chris suggests.
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 03-01-2011, 04:36 PM Re: Rounded corners with just one image - My 2 cent share
Skilled Talker

Posts: 59
Name: Lisa Forgan
Location: Colorado
Trades: 0
Quote:
Originally Posted by edgray View Post
Interesting technique, but I'm with these two:

The sooner the web design community stops supporting IE6 & 7, the sooner we can all move on. I now tell my clients their will function in IE, but they won't look great - I simply let things like rounded corners degrade into square ones, as Chris suggests.
And here is a great article on this subject:
Progressive Enhancement
Puddlemut is offline
Reply With Quote
View Public Profile
 
Old 03-01-2011, 05:59 PM Re: Rounded corners with just one image - My 2 cent share
Skilled Talker

Posts: 83
Trades: 0
Quote:
Originally Posted by chrishirst View Post
Why care about IE6.
well i love to forget IE6. it is a real pain in my ***. but according to google analytics 20% of my visitors using IE6. its a huge number
__________________
»
Please login or register to view this content. Registration is FREE
- Interactive maps for websites
»
Please login or register to view this content. Registration is FREE
for web developers

Last edited by DmitryS; 03-01-2011 at 06:02 PM..
DmitryS is offline
Reply With Quote
View Public Profile
 
Old 03-02-2011, 11:15 PM Re: Rounded corners with just one image - My 2 cent share
vivekar's Avatar
Webmaster Talker

Posts: 612
Trades: 0
Quote:
Originally Posted by DmitryS View Post
well i love to forget IE6. it is a real pain in my ***. but according to google analytics 20% of my visitors using IE6. its a huge number
Then, it is good to show them an alert message to upgrade or use Firefox/Chrome.

Also, check from which countries those visitors are. If those visitors are in your target market, then you can try developing an alternate version for them. Otherwise, it is as good as bot traffic.
__________________

Please login or register to view this content. Registration is FREE
(Active since 2003) |
Please login or register to view this content. Registration is FREE
vivekar is offline
Reply With Quote
View Public Profile Visit vivekar's homepage!
 
Reply     « Reply to Rounded corners with just one image - My 2 cent share
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.30034 seconds with 12 queries