Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Liquid CSS rounded corners CSS

Posted on 2010-09-23
8
Medium Priority
?
685 Views
Last Modified: 2013-12-25
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
Comment
Question by:giuseppepi
8 Comments
 
LVL 7

Accepted Solution

by:
Gene_Cyp earned 2000 total points
ID: 33743428
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
 
LVL 3

Author Comment

by:giuseppepi
ID: 33743691
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
 
LVL 7

Expert Comment

by:Gene_Cyp
ID: 33743720
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Gene_Cyp
ID: 33743728
You can even "cut" that part u want to show within photoshop / paint itself and save it as an image.
0
 
LVL 3

Expert Comment

by:jchook
ID: 33749990
If you are able to use javascript I can recommend CurvyCorners: http://www.curvycorners.net/
0
 
LVL 9

Expert Comment

by:Bob Stone
ID: 33753297
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
 
LVL 4

Expert Comment

by:bastianr
ID: 33754216
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
 
LVL 4

Expert Comment

by:acashok
ID: 33755897
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question