from:"Dan King"

Re: [css-d] How to make rounded corners box with one image?

2009-05-07 Thread Dan King


The values you need will depend on the radius of your corners and on  
the offset of the drop shadow. If you don't use it already I would  
strongly recommend familiarising yourself with firebug.

Thanks for the tip on using firebug; it made creating the rounded corners box 
so much easier. Previously, I had only used it for debugging
javascript. I wonder how one would do things like rounded corners boxes
without such as tool as firebug.

-Dan


  

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to make rounded corners box with one image?

2009-05-02 Thread Dan King


Hi Brian,

Thank you for the link to your blog post. Your method explanation is well put 
together and clear. Unfortunately, however, it's not quite what I'm looking 
for. 

I found an example online: 
http://modxcms.com/about/blog/rthrash/simple-rounded-corner-css-boxes.html that 
seemingly matches what I'm looking for. The concept is clear, but I need some 
help in figuring out how to determine margins/padding for the respective image 
used. If you or anyone else has used or understands the method demonstrated in 
the link provided, could you help clarify how to determine the needed 
margins/padding? Thanks.

Regards,
Dan



- Original Message 
From: Jones, Brian bjo...@ur.ua.edu
To: css-d@lists.css-discuss.org css-d@lists.css-discuss.org
Sent: Friday, May 1, 2009 1:57:22 PM
Subject: Re: [css-d] How to make rounded corners box with one image?


Hi Dan,

Here's a recent post I wrote on our web design blog here at University of 
Alabama:  

http://webtide.wordpress.com/2009/04/21/one-way-to-do-rounded-rectangles-with-css-background-images/

I don't know if it would match what you are looking for because it's more than 
one image - but it's 2 instead of 4.  It's pretty simple and seems to be 
working fine unless I missed something in my testing.

Hope this helps.

Brian  

Brian Jones
Web Communications Specialist
The University of Alabama
bjo...@ur.ua.edu
205.348.8315

 -Original Message-
 From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
 discuss.org] On Behalf Of Dan King
 Sent: Friday, May 01, 2009 12:25 PM
 To: css-d@lists.css-discuss.org
 Subject: [css-d] How to make rounded corners box with one image?
 
 
 I'm relatively new to css and for the past few weeks, I've been trying to
 create a rounded corners box with one image. I've searched online but
 nothing I've found so far clearly explains how to use one image to create
 the rounded corners box. They all suggest to use four 'hooks' i.e. divs
 and use background positioning to give each of the hooks a background
 position of a corner. While I understand the concept, I'm at a loss for
 moving thehooks into proper position using margins/padding.
 
 I'd like to learn/figure out how to logically/mathematically determine how
 much margin/padding to use in order to position the background image
 properly to create the rounded corners effect.  Currently, I've been
 guessing/checking.
 
 I was able to piece together from web searches html and css for a round
 corners box. The end product does create a rounded corners box but, the
 css used causes issues when floating the containing div and more
 importantly, I don't understand how it works/comes together.
 
 Below is the html and css for the rounded corners box. If anyone could
 review the code and help me understand how to properly (with clean and
 simple css) put together a rounded corners box it would be appreciated.
 
 Thanks.
 
 HTML:
 div class=profileBox
 div class=title
 h3Title/h3
 /div
 div class=content
 pContent/p
 /div
 /div
 
 CSS:
 ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox
 .content {
 background: #FF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
 }
 
 ..profileBox{
 min-width: 225px;
 max-width: 500px;
 margin: 10px 5px;
 padding: 0 10px 0 0;
 }/* Bottom right */
 
 ..profileBox .title{
 background-position: 100% 0;
 margin: 0 -10px 0 0;
 padding: 0 10px 0 0;
 max-height: 4.5em;
 overflow:hidden;
 } /* Top right */
 
 ..profileBox .title h3{
 background-position: 0 0;
 float:left;
 color:#FF;
 margin: 0;
 padding: 8px 15px 16px;
 } /* Top left */
 
 ..profileBox .content{
 background-position: 0 100%;
 margin: 0;
 padding: 5px 5px 10px 15px;
 overflow: hidden;
 } /* Bottom left */
 
 -Dan
 
 
 
 
 
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



  

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to make rounded corners box with one image?

2009-05-01 Thread Dan King


I'm relatively new to css and for the past few weeks, I've been trying to 
create a rounded corners box with one image. I've searched online but nothing 
I've found so far clearly explains how to use one image to create the rounded 
corners box. They all suggest to use four 'hooks' i.e. divs and use background 
positioning to give each of the hooks a background position of a corner. While 
I understand the concept, I'm at a loss for moving thehooks into proper 
position using margins/padding. 

I'd like to learn/figure out how to logically/mathematically determine how much 
margin/padding to use in order to position the background image properly to 
create the rounded corners effect.  Currently, I've been guessing/checking.

I was able to piece together from web searches html and css for a round corners 
box. The end product does create a rounded corners box but, the css used causes 
issues when floating the containing div and more importantly, I don't 
understand how it works/comes together. 

Below is the html and css for the rounded corners box. If anyone could review 
the code and help me understand how to properly (with clean and simple css) put 
together a rounded corners box it would be appreciated. 

Thanks.

HTML:
div class=profileBox
div class=title
h3Title/h3
/div
div class=content
pContent/p
/div
/div

CSS:
..profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content {
background: #FF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
}

..profileBox{
min-width: 225px;
max-width: 500px;
margin: 10px 5px; 
padding: 0 10px 0 0;
}/* Bottom right */

..profileBox .title{
background-position: 100% 0; 
margin: 0 -10px 0 0; 
padding: 0 10px 0 0; 
max-height: 4.5em; 
overflow:hidden;
} /* Top right */

..profileBox .title h3{
background-position: 0 0; 
float:left; 
color:#FF; 
margin: 0; 
padding: 8px 15px 16px;
} /* Top left */

..profileBox .content{
background-position: 0 100%; 
margin: 0; 
padding: 5px 5px 10px 15px; 
overflow: hidden;
} /* Bottom left */

-Dan



  

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to make rounded corners box with one image?

Re: [css-d] How to make rounded corners box with one image?

[css-d] How to make rounded corners box with one image?

3 matches

Site Navigation

Mail list logo

Footer information