Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS - Box with smooth rounded corners


  • Please log in to reply

#1
bengaluru

bengaluru

    Member

  • Member
  • PipPipPip
  • 143 posts
I know how to make a box with smooth rounded corners without using the "gif"'s for the corners. But does anyone know how I can bring in the shadow effect and look more raised ??

Thanks for your help.
  • 0

Advertisements


#2
Allsortgroup

Allsortgroup

    I SPAMMED Too Much!

  • Banned
  • PipPipPip
  • 905 posts
Don't have a clue, but...

How do you make a box with smooth rounded corners without using the "gif"'s for the corners?
  • 0

#3
Paradox924X

Paradox924X

    Member

  • Member
  • PipPipPip
  • 208 posts
Yea, I'd like to know also >.<
  • 0

#4
lil_cat_luver

lil_cat_luver

    Member

  • Member
  • PipPipPip
  • 296 posts
http://pro.html.it/esempio/nifty/
All you had to do was search google :tazz:

EDIT: this is for Paradox924S and Allsortshop

Edited by lil_cat_luver, 21 November 2005 - 09:50 PM.

  • 0

#5
Allsortgroup

Allsortgroup

    I SPAMMED Too Much!

  • Banned
  • PipPipPip
  • 905 posts
Thanks lil cat luver!

I like the demo page here http://pro.html.it/e...fty/nifty1.html.

Its preatty good, i will probably use this for like an information page on my site, like say a page is under construction, i will use this.

:tazz:
  • 0

#6
Paradox924X

Paradox924X

    Member

  • Member
  • PipPipPip
  • 208 posts
Thanks~!
:tazz:

BTW, it's Paradox924X, not Paradox924S... :)
  • 0

#7
bengaluru

bengaluru

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 143 posts
Sorry for the delay.

Do you guys still need the code. I can post it if you want. Let me know
  • 0

#8
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
Sure, go ahead and post it.

There are a couple of ways of dealing with the shadow effect (mentioned in your original post) - but it wouldn't hurt to see your code first, to be sure I'm on the right track.
  • 0

#9
Paradox924X

Paradox924X

    Member

  • Member
  • PipPipPip
  • 208 posts
Yea, we'd like to see it :tazz:
  • 0

#10
Allsortgroup

Allsortgroup

    I SPAMMED Too Much!

  • Banned
  • PipPipPip
  • 905 posts
Yes, i would like to see it too! :tazz:
  • 0

Advertisements


#11
Paradox924X

Paradox924X

    Member

  • Member
  • PipPipPip
  • 208 posts
:tazz: Everyone wants to see it.. lol
  • 0

#12
bengaluru

bengaluru

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 143 posts
Sorry for the delay. I had not seen this post that so many of you wanted to see the code.

The code is for 5 different types of boxes and the code is not mine. It was provided to me by a friend on another forum.

You can customize it as you wish with different colors, size etc.,

CSS

body {background:#e0e0e0;}
/* Inset 3D Raised */
.raised {background: transparent; width:40%;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff;}
.raised p {padding-bottom:0.5em;}

.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}



/* Inset 3D Curved */
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.5em;}

.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}




/* Curved cutout Borders*/
.curved {background: transparent; width:40%;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff;}
.curved p {padding-bottom:0.5em;}

.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px; font-size:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}

.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}


/* flared serif */
.serif {background: transparent; width:40%;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff;}
.serif p {padding-bottom:0.5em;}

.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}

.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}

.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}

/* Pillar type */
.pillar {background: transparent; width:40%;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff;}
.pillar p {padding-bottom:0.5em;}

.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}

.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}

.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}



</style>
</head>

HTML

<body>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 1</h1>
<p>A box with cutout corners</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

<div class="boxcontent">
<h1>Example 2</h1>
<p>Corners to give a serif effect.</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>

<div class="boxcontent">
<h1>Example 3</h1>
<p>Corners to give a rounded pillar effect.</p>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 4</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<p></p>

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 5</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>



</body>
</html>


Let me have your feedback.
  • 0

#13
The Architect

The Architect

    Member

  • Member
  • PipPip
  • 58 posts
As Darth Vader said, "Most impressive."
I'll be filing this away!

Are you still looking for help with the raised shadow issue?
  • 0

#14
bengaluru

bengaluru

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 143 posts
Yes. Architech. Please help me.
  • 0

#15
bengaluru

bengaluru

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 143 posts
Hello The Architect..........Do you have the code? Can you post it please
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP