Digital Point Forums
Money Transfer

Go Back   Digital Point Forums > Design & Development > HTML & Website Design > CSS
Reload this Page CSS rounded corners without images!
Google Analytics
Log In to view
your analytics
Register FAQ/Rules Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old Jun 26th 2007, 3:11 am
deathshadow's Avatar
deathshadow deathshadow is offline
of the Nightfall
  
Join Date: Jun 2007
Location: Keene, NH
Posts: 2,324
deathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to all
Lightbulb CSS rounded corners without images!
This is something I've been playing with for years, and I just did a total rewrite on my 'howto' page on the subject.

http://battletech.hopto.org/html_tutorials/rounded_css_borders/template.html

the directory

http://battletech.hopto.org/html_tutorials/rounded_css_borders

is unlocked for ease of access.

This is the first semi-completed page for my upcoming site of web tutorials and guides. Only some 80-160 more pages to go...

Just thought I'd share. I'm rather proud of this one.
Reply With Quote
  #2  
Old Jun 26th 2007, 3:14 am
Clive's Avatar
Clive Clive is offline
Web Developer
  
Join Date: Jan 2007
Posts: 4,085
Clive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant futureClive has a brilliant future
Sounds interesting, will try
__________________
▌From 3 Hours Delivery
▌Coding PSD templates ~ Wordpress ~ Joomla ~ vBulletin ~ XHTML/CSS ~ Etc.
Reply With Quote
  #3  
Old Jun 26th 2007, 3:19 am
Edynas Edynas is offline
Twilight Vanquisher
Recent Blog: ABB Website Casestudies
  
Join Date: Oct 2005
Location: Netherlands
Posts: 797
Edynas will become famous soon enoughEdynas will become famous soon enough
Looking good. I like the Anti-Aliasing trick
I'll bookmark your site and check back to see if you have any other tricks I can use
__________________
234 Premium Wordpress Themes Premium Blog Templates - The Big List
| Create Amazon Niche Sites in a few minutes
Reply With Quote
  #4  
Old Jun 26th 2007, 6:24 am
ninjamuk's Avatar
ninjamuk ninjamuk is offline
Hand of A'dal
  
Join Date: May 2007
Location: Michigan, USA
Posts: 305
ninjamuk will become famous soon enough
I like the "out of the box thinking" on that technique - nice work.
__________________
Arrival Media: Professional Web Design - 10+ Years Experience - Websites, Logos, Banners, Custom Work
Get a Dot Com: Daily domain deals via twitter from Get a Dot Com
Reply With Quote
  #5  
Old Jun 26th 2007, 9:03 am
Digital Artist's Avatar
Digital Artist Digital Artist is offline
Hand of A'dal
  
Join Date: Jun 2005
Posts: 468
Digital Artist is on a distinguished road
Thanx it is too helpful i'll try on it and cool

i had work on it it is also cool kinldy check it out
CSS

body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2em; color:#000000;}
#xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#f7f7f7; border-left:1px solid #a32118; border-right:1px solid #a32118;}
.xb1 {margin:0 5px; background:#a32118;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#f7f7f7; border:0 solid #a32118; border-width:0 1px;}
</style>
HTML
</head>

<body>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1> nice</h1>
<h2>nice</h2>
<p> nice</p>

</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
Reply With Quote
  #6  
Old Jun 26th 2007, 3:21 pm
deathshadow's Avatar
deathshadow deathshadow is offline
of the Nightfall
  
Join Date: Jun 2007
Location: Keene, NH
Posts: 2,324
deathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to alldeathshadow is a name known to all
Quote:
Originally Posted by Digital Artist View Post
Thanx it is too helpful i'll try on it and cool

i had work on it it is also cool kinldy check it out
CSS
Someone on opera forums linked me to a site written by an Italian gentleman that he did that with the bold tag about two months after my original... While cute, it has a few 'issues' to me.

High global line-height will mess it up again in both opera 8.x and IE5.x - which is why you also need a 1px line-height.

the use of a inline element that has semantic meaning, then making it display:block doesn't seem very... SEO

It's class heavy... The object is to move data OUT of the HTML and into the CSS.

But it is interesting to see how different people approach the same problem. Gets one thinking in different directions.
Reply With Quote
  #7  
Old Jun 26th 2007, 11:27 pm
bnandika's Avatar
bnandika bnandika is offline
Twilight Vanquisher
  
Join Date: Jun 2007
Location: Buenos Aires
Posts: 911
bnandika will become famous soon enoughbnandika will become famous soon enough
Thanks for sharing, it's very useful
__________________
Free banner background proud to be a Drupaler Miss DK
Reply With Quote
  #8  
Old Jun 27th 2007, 7:19 pm
duilen's Avatar
duilen duilen is offline
Hand of A'dal
  
Join Date: Feb 2005
Location: Colorado
Posts: 355
duilen will become famous soon enough
I like the concept. I may use it for a few simple corners with a 5px radius but for the most part I think I'll stick with image alternatives.
__________________
[B]My Landing Page Blog
Reply With Quote
  #9  
Old Jun 27th 2007, 11:16 pm
nwk's Avatar
nwk nwk is offline
Hand of A'dal
  
Join Date: Feb 2007
Location: Birthplace of Buddha,Krishna......-India
Posts: 292
nwk is on a distinguished road
Its really a great work Deathshadow .. I'll be using imageless rounded corners from now on..And Thanks for the sharing.
Reply With Quote
  #10  
Old Jun 27th 2007, 11:20 pm
kojakfilth's Avatar
kojakfilth kojakfilth is offline
Starcaller
  
Join Date: Mar 2006
Location: www.bandstreaming.com
Posts: 2,906
kojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to beholdkojakfilth is a splendid one to behold
nice.. ive been looking for this kind.. im studying css right now..
__________________
Nice to be Back!
Acne Solution | Cleaning Business | |
Reply With Quote
  #11  
Old Jun 27th 2007, 11:26 pm
ansi's Avatar
ansi ansi is offline
of the Nightfall
Recent Blog: Myakka River State Park
  
Join Date: May 2007
Location: Tampa, Florida
Posts: 1,459
ansi is a jewel in the roughansi is a jewel in the roughansi is a jewel in the rough
very nice. bookmarked it. green to you for sharing.
__________________
Freelance graphic design and web development.
Professional XHTML Coding Starting at $99
My Website: Travis Ballard Photography : Adobe Lightroom Presets
Reply With Quote
  #12  
Old Jun 28th 2007, 9:56 pm
Dan Schulz's Avatar
Dan Schulz Dan Schulz is offline
Astral Walker
Recent Blog: What Can You Do With $2,890 in Pennies?
  
Join Date: Nov 2006
Location: Aurora, Illinois
Posts: 6,036
Dan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond reputeDan Schulz has a reputation beyond repute
You all should see what else he's working on. Too bad his schedule is conflicting with mine right now, otherwise I'd let him bounce ideas off of me again.
Reply With Quote
  #13  
Old Jun 29th 2007, 7:33 am
reyna12 reyna12 is offline
Grunt
  
Join Date: Feb 2007
Location: UK
Posts: 40
reyna12 is on a distinguished road
Also

Code:
-moz-border-radius: 25px;
Reply With Quote
  #14  
Old Jun 29th 2007, 7:36 am
lokotex lokotex is offline
Banned
  
Join Date: Jan 2007
Posts: 437
lokotex is on a distinguished road
im lovin it
Reply With Quote
Reply

Bookmarks

« Previous Thread | Next Thread »
Thread Tools

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
Rounded Corners or Not? huenemeca HTML & Website Design 10 Jun 19th 2007 7:15 am
Rounded Corners Help Hobbit2 CSS 13 Apr 2nd 2007 3:30 pm
Modules with rounded corners and borders using images. Grump HTML & Website Design 0 Sep 17th 2006 11:58 pm
CSS Rounded Corners w/Single Call from HTML North Carolina SEO CSS 4 May 16th 2006 5:41 pm
Anti-aliased rounded corners using pure CSS. No images. No Javascript. Greg-J CSS 7 Mar 27th 2006 11:23 pm


All times are GMT -8. The time now is 2:27 pm.

Digital Point Solutions - Library - Top