Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 689
  • Last Modified:

Liquid CSS rounded corners CSS

Hello.
I need to modify a css in order to get a liquid rounded corner (top only) effect using a longer (compared with the box dimension) png image with both sides rounded.
Unfortunatelly I have poor to no possibility to modify the HTML, so I need to do everything by css.
This is the css code I am actually using
 
.block 
{
    margin-bottom: 15px;
	padding-bottom: 5px;
	padding-left: 0;
	color: #FFFFFF;
	background: transparent url(images/BlockHeader.png) no-repeat bottom right;
}

.block .title
{
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 7px 10px;
	color: #ff9933;
	background: transparent url(images/BlockHeader.png) no-repeat bottom right;
	
}

.block .listbox
{
	font-size: 11px;
	padding: 5px 10px 10px;
	line-height: 18px;
	
	background-color:#404040 ;
	margin: 0px;
}

.block .listbox ul
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	color: #3664A5;
	background-color: inherit;
}

.block a
{
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
}

.block li
{
    list-style: none;
}

.block li.separator
{
	height: 1px;
	line-height: 1px;
	background: #ff9933;
	width: 140px;
	font-size: 1px;
	margin: 5px 0 5px 0;
}



.block-category-navigation, .block-manufacturer-navigation, .block-recently-viewed-products, 
.block-info, .block-shoppingcart, .block-newsletter, .block-livechat, .block-popular-tags,
.block-popular-blogtags, .block-blog-archive
{
	
}

Open in new window

This is a box example:
 
<div class="block block-info">
    <div class="title">
    </div>
    <div class="clear">
    </div>
    <div class="listbox">

    </div>
</div>

Open in new window

As you can notice I would like to use the subclass (present in each box to sort out this problem.
Please help.
Thanks!
0
giuseppepi
Asked:
giuseppepi
1 Solution
 
Gene_CypCommented:
Most of the "rounding" tricks are actually done with a combination of CSS and the use of images.

A "curve" is essentially part of a circle.

Thus create an image of a circle (in whichever way you want it to look) and then use CSS to show only a section of that circle

Having said that, here are some tutorials that can help you:


http://www.search-this.com/2007/02/12/css-liquid-round-corners/

http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
0
 
giuseppepiAuthor Commented:
Hello Gene,
thanks for your answer.
I took a look to the sample but both are using multiple images. I have the necessity to show only the left side and only the right side of the same image.
Thanks for supporting
0
 
Gene_CypCommented:
Create a circle in photoshop or paint or Paint.Net (free downloadable paint with advanced settings)

Then using css show the top left "section" of that circle for the top elft corner and the top right section of that circle for the top right corner.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Gene_CypCommented:
You can even "cut" that part u want to show within photoshop / paint itself and save it as an image.
0
 
jchookCommented:
If you are able to use javascript I can recommend CurvyCorners: http://www.curvycorners.net/
0
 
Bob StoneIT GuruCommented:
Here are two alternate solutions

Pure CSS Rounded Box -
http://wizard-enterprises.com/CSSround.html

Single image auto resize -
http://www.schillmania.com/projects/dialog2/
0
 
bastianrCommented:
I've used the sliding doors approach with a single, very wide (1600px) image which I think is similar to your goal here. You need to align the background image to opposite sides on the two elements and then set a right or left margin on one of the elements so that the rounded corner shows through from behind. Try something like this:
.block .title {
background: transparent url(images/BlockHeader.png) no-repeat bottom left;
margin: 0 6px 0 0;  /* adjust px value to show corner */
}
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now