TECH BORED? rounded corners exercise

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
i'd like to see how you guys do this. so here's a little exercise...

use this image, slice it up however you want (photoshop)
corners.png


create a rounded corner effect like so:
result.png


it should be able to scale horizontally and vertically with the text.

post up your code however you do it. i am aware you can google it, but that's not the point. i'm just interested in seeing everybodies styles

edit: i mean, slice up the image however you want, write the xhtml and the css, post it
 
Last edited:

hurleyint1386

Someone has sand in their vagina
Jan 6, 2005
3,646
Rochester, NY
i'd like to see how you guys do this. so here's a little exercise...

use this image, slice it up however you want
corners.png


create a rounded corner effect like so:
result.png


it should be able to scale horizontally and vertically with the text.

post up your code however you do it. i am aware you can google it, but that's not the point. i'm just interested in seeing everybodies styles

Do you mean slice it up into Photoshop and use 4 separate images, or slice it up using php?
 

kingtoad

Well-Known Member
Sep 2, 2003
55,788
Los Angeles
:hsughno:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="Object" xml:lang="Object">

<head>
  <title>sup</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      color: #fff;
      font: normal 11px helvetica, verdana, arial;
    }
    #container {
      width: 325px;
      background: #000;
    }
    #container p {
      padding: 5px;
    }
  </style>
  <script type="text/javascript" src="niftycube.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      Nifty("div#container", "big");
    }
  </script>

</head>
<body>

  <div id="container">
  
    <p>this is not what you asked for, lol.  sup #container:has(p:not(a))</p>
    
  </div>
		
</body>
</html>
 
TS
TS
biawokauns

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
:hsughno:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="Object" xml:lang="Object">

<head>
  <title>sup</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      color: #fff;
      font: normal 11px helvetica, verdana, arial;
    }
    #container {
      width: 325px;
      background: #000;
    }
    #container p {
      padding: 5px;
    }
  </style>
  <script type="text/javascript" src="niftycube.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      Nifty("div#container", "big");
    }
  </script>

</head>
<body>

  <div id="container">
  
    <p>this is not what you asked for, lol.  sup #container:has(p:not(a))</p>
    
  </div>
		
</body>
</html>

doesn't degrade broseph
 

Falconer

Well-Known Member
Jun 23, 2006
65,535
<noob> I don't even understand what the threadstarter is asking </noob>
 

whup

I wish you had children and.. so that I could step
Feb 12, 2007
1,592
Usually end up with a cluster fuck of multiple divs and css similar to what pkr posted.

There's lots of new workarounds for simple rounded panels with solutions like javascript, CSS, SVG etc.

However the need to be able to cut up an image and make a fluid panel out of it still exists and there's no elegant standards way of doing this and there should be imo.
 
TS
TS
biawokauns

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
here's what i've done

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>round corner exercise</title>
	<style type="text/css" media="screen">
	
		.container {
			background-color: orange;
		}

		.container p {
			margin: 0 10px;
		}

		.top { 
			background: url(tr.gif) no-repeat top right; 
		}

		.bottom {
			background: url(br.gif) no-repeat top right; 
		}

		.corner {
		   width: 15px;
		   height: 15px;
		   border: none;
		   display: block !important;
		}
		
	</style>
</head>

<body>
	<div class="container">
	   <div class="top">
		 <img src="tl.gif" alt="" width="15" height="15" class="corner" />
	   </div>

	   <p>sup</p>

	   <div class="bottom">
		 <img src="bl.gif" alt="" width="15" height="15" class="corner" />
	   </div>
	</div>
</body>

</html>
 

kingtoad

Well-Known Member
Sep 2, 2003
55,788
Los Angeles
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="Object" xml:lang="Object">

<head>
  <title>sup</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      color: #fff;
      font: normal 11px helvetica, verdana, arial;
    }
    #container {
      width: 325px;
      height: 157px;
      background: #211f21;
      position: relative;
    }
    #container p {
      padding: 10px;
    }
    .corner {
      width: 9px;
      height: 10px;
      position: absolute;
    }
    .top { top: 0; }
    .bottom { bottom: 0; }
    .left { left: 0; }
    .right { right: 0; }
    .tl { background: url("tl.gif") no-repeat; }
    .tr { background: url("tr.gif") no-repeat; }
    .bl { background: url("bl.gif") no-repeat; }
    .br { background: url("br.gif") no-repeat; }
		
  </style>

</head>
<body>

  <div id="container">
    <div class="corner top left tl"></div>
    <div class="corner top right tr"></div>
    <div class="corner bottom left bl"></div>
    <div class="corner bottom right br"></div>

    <p>sup</p>

  </div>

</body>
</html>

Something I just thought of. No idea if it works in IE.
 
TS
TS
biawokauns

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="Object" xml:lang="Object">

<head>
  <title>sup</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      color: #fff;
      font: normal 11px helvetica, verdana, arial;
    }
    #container {
      width: 325px;
      height: 157px;
      background: #211f21;
      position: relative;
    }
    #container p {
      padding: 10px;
    }
    .corner {
      width: 9px;
      height: 10px;
      position: absolute;
    }
    .top { top: 0; }
    .bottom { bottom: 0; }
    .left { left: 0; }
    .right { right: 0; }
    .tl { background: url("tl.gif") no-repeat; }
    .tr { background: url("tr.gif") no-repeat; }
    .bl { background: url("bl.gif") no-repeat; }
    .br { background: url("br.gif") no-repeat; }
		
  </style>

</head>
<body>

  <div id="container">
    <div class="corner top left tl"></div>
    <div class="corner top right tr"></div>
    <div class="corner bottom left bl"></div>
    <div class="corner bottom right br"></div>

    <p>sup</p>

  </div>

</body>
</html>

Something I just thought of. No idea if it works in IE.

doesnt work in ie6
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
174
Guests online
44
Total visitors
218

Forum statistics

Threads
369,680
Messages
16,907,614
Members
86,875
Latest member
DSimnovec