WEB BORED? rounded corners exercise

Discussion in 'OT Technology' started by biawokauns, Oct 3, 2008.

  1. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    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)
    [​IMG]

    create a rounded corner effect like so:
    [​IMG]

    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: Oct 3, 2008
  2. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    Do you mean slice it up into Photoshop and use 4 separate images, or slice it up using php?
     
  3. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    photoshop
     
  4. Die Antwoord

    Die Antwoord New Member

    Joined:
    Nov 5, 2007
    Messages:
    7,913
    Likes Received:
    0
    Location:
    Orlando, FL
    Why not just use CSS? :dunno:
     
  5. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    maybe I was not clear...i have edited the original post to reflect this
     
  6. pkr

    pkr Guest

  7. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    56,155
    Likes Received:
    166
    Location:
    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>
    
     
  8. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    doesn't degrade broseph
     
  9. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,491
    Likes Received:
    6
    <noob> I don't even understand what the threadstarter is asking </noob>
     
  10. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
    border-radius? :wiggle:
     
  11. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    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.
     
  12. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    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>
    
     
  13. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    56,155
    Likes Received:
    166
    Location:
    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.
     
  14. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    doesnt work in ie6
     
  15. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    56,155
    Likes Received:
    166
    Location:
    Los Angeles
    i must have been using the wrong selectors
     
  16. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,376
    Likes Received:
    0
    Location:
    Utah
    border-radius: 3px; :mamoru:
     
  17. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
    we r winnars. But seriously, let the IE users suffer the pains of squared edges
     
  18. biawokauns

    biawokauns Active Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    have fun explaining that to a company that you're interviewing for :rofl:
     

Share This Page