PDA

Click to See Complete Forum and Search --> : How to create bg as enclosed image?

toplisek
03-12-2009, 05:12 AM
I would like to create bg but pure code with CSS.
Is this possible to achieve to control rounded corners (how much rounded corners will be) and add colour in the middle?
One solution is to add bg image but I would like to control with pure HTML and css code without image as text within this area will be floated.
MichaelF10
03-12-2009, 09:07 AM
I would like to create bg but pure code with CSS.
Is this possible to achieve to control rounded corners (how much rounded corners will be) and add colour in the middle?
One solution is to add bg image but I would like to control with pure HTML and css code without image as text within this area will be floated.

Let me know if this wasn't what you wanted.


Quote:
Information

Having seen Alessandro Fulciniti's excellent tutorial on Nifty Corners, I thought that it should be possible to have Nifty Corners AND Snazzy Borders.

So here it is. No images and fixed or fluid as required. Just change the colours as you wish and put snazzy borders on your nifty corners.

Now works in IE5.5 and just 1px out (try spotting it) in IE5.01

Link:
http://www.cssplay.co.uk/boxes/snazzy.html

More useful links:
http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/
http://www.html.it/articoli/nifty/index.html
http://www.spiffycorners.com/
toplisek
03-12-2009, 09:39 AM
Hi this is nice example. Very good link. Why is not seen rounded corners as at website that you provided. Is there some trick to do this and add?

I enclose code that I used completely the same:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
body{padding: 20px;background: #FFF;color: #333;text-align: center;
font:85%/1.45 "Lucida Sans Unicode","Lucida Grande",Arial,sans-serif}
h1,h2,p{margin: 0;padding: 0 10px}
p{padding: 0 10px 1em}
h1,h2{letter-spacing: -1px;font-weight:100;color: #111}
h1{font-size: 200%}
h2{font-size: 140%;line-height:1.05}
div#container{width:450px;margin: 0 auto;padding:10px 0;text-align:left}
div#content{float:left;width:300px;padding:10px 0;background: #BAFB80}
div#nav{float:right;width:145px;padding:10px 0;background:#DBCAEE }

/*]]>*/
</style>
<script type="text/javascript" src="niftycube.js"></script>
</head>

<body>
<div id="container">
<div id="content">

<h1>Nifty Corners</h1>
<p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o eoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
</div>
<div id="nav">
<h2>Simple. Just Javascript and CSS.</h2>
<p>Aoioeou eeeu ueeiuiii uoauiioi uae eoeoioe ouiui oieouoo uioo uaieeoe oe eouoiea a oou uiu.</p>
</div>

</div>


</body>

</html>
MichaelF10
03-12-2009, 12:01 PM
Try this, No Javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:150px 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:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div align="center" class="xboxcontent">
<h1>Michael F10</h1>
<p>Let me know if you need anything else!<br />
<a href="http://www.ziptank.com">http://www.ziptank.com</a> (Coming Soon!)</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body></html>

Tested in:
Firefox
Opera
Safari
Chrome
Internet Explorer 7.0
Internet Explorer 6.0
toplisek
03-12-2009, 02:23 PM
Can be rounded corners more quality or all is limited to current stage of CSS technology?
MichaelF10
03-12-2009, 04:13 PM
Can be rounded corners more quality or all is limited to current stage of CSS technology?

There are no limits in what you can do.

But you would save yourself quite a head ache by just drawing 4 corners in photoshop and using those instead.
toplisek
03-13-2009, 02:48 AM
Where to put image bg in your script to achieve rounded images from Photoshop?
MichaelF10
03-13-2009, 12:26 PM
Where to put image bg in your script to achieve rounded images from Photoshop?

Try to Google things before asking. The best method to learning is not relying on others.

http://kalsey.com/2003/07/rounded_corners_in_css/