Over 16,508,958 people are on fubar.
What are you waiting for?

THIS WILL GIVE YOU A STITCHED LOOK:.stitched {   padding: 5px 10px;   margin: 10px;   background: #ff0030;   color: #fff;   font-size: 21px;   font-weight: bold;   line-height: 1.3em;   border: 2px dashed #fff;   border-top-left-radius: 3px;   -moz-border-radius-topleft: 3px;   -webkit-border-top-left-radius: 3px;   border-bottom-right-radius: 3px;   -moz-border-radius-bottomright: 3px;   -webkit-border-bottom-right-radius: 3px;   border-top-right-radius: 3px;   -moz-border-radius-topright: 3px;   -webkit-border-top-right-radius: 3px;   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);   text-shadow: -1px -1px #aa3030;   font-weight: normal;}

THIS WILL REMOVE AN ITEM FROM THE PAGE, WITHOUT AFFECTING FLOW OR CAUSING SCROLL BARS.MUCH BETTER THAN display:none; OR EVEN visibility:hidden; 


#content {    junk;    top: -9999px;    left: -9999px;}

Make “Pre” Text Wrap:

/* Browser specific (not valid) styles to make preformatted text wrap */
pre { white-space: pre-wrap;       /* css-3 */ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */ white-space: -pre-wrap;      /* Opera 4-6 */ white-space: -o-pre-wrap;    /* Opera 7 */ word-wrap: break-word;       /* Internet Explorer 5.5+ */}

Multiple Borders:
HTML:
<img src="http://placedog.com/200/200">?

CSS:img {    /* #1 */    border: 5px solid hsl(0, 0%, 40%);        /* #2 */    padding: 5px;    background: hsl(0, 0%, 20%);        /* #3 */    outline: 5px solid hsl(0, 0%, 60%);        /* #4 AND INFINITY!!! (CSS3 only) */    box-shadow:        0 0 0 10px hsl(0, 0%, 80%),        0 0 0 15px hsl(0, 0%, 90%); 

Noise Data URI Image:
background-image: url(data:image/png;base64,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);
How To Use It
The simplest implementation is to paste the code into your existing CSS, then give any HTML elements that you want to apply noise to a class="noise" attribute. Yes, I know that’s an unsemantic use of markup, but there is a workaround that I will detail later.If you want to apply noise to the body element, use class="body-noise" instead.

Spinny Leaf Menu

<nav>  <ul class="top-menu">    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>  </ul></nav>nav { width: 960px; height: 100px; margin: 120px auto; text-align: center;}.top-menu li { display: inline-block; text-align: center; margin: 30px 5px; position: relative; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}.top-menu li:hover { margin: 30px 20px; }.top-menu li:active { margin: 30px 33px; }.top-menu li a  { width: 100px; height: 100px; 9999; junk; top: 35px; font-weight: bold; display: block; text-decoration: none; font-size: 20px; color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1); -webkit-transition: all 0.1s linear;  -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear;}.top-menu li:active a { font-size: 26px; top: 30px; text-shadow: none;}.top-menu li div.menu-item { width: 100px; height: 100px; display: block; -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-border-top-left-radius: 100px;  -webkit-border-bottom-right-radius: 100px;  -moz-border-radius-topleft: 100px;  -moz-border-radius-bottomright: 100px;  border-top-left-radius: 100px;  border-bottom-right-radius: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);}.top-menu li:hover div.menu-item{  -webkit-border-top-left-radius: 80px;  -webkit-border-bottom-right-radius: 80px;  -moz-border-radius-topleft: 80px;  -moz-border-radius-bottomright: 80px;  border-top-left-radius: 80px;  border-bottom-right-radius: 80px;  -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg);}.top-menu li:active div.menu-item{  -webkit-border-top-left-radius: 50px;  -webkit-border-bottom-right-radius: 50px;  -moz-border-radius-topleft: 50px;  -moz-border-radius-bottomright: 50px;  border-top-left-radius: 50px;  border-bottom-right-radius: 50px; 
}#home { background: #41D05F; }#cataloge { background: #E42B2B; }#price { background: #ff8400; }#about { background: #a800ff; }#contact { background: #49a7f3; }               /* If you could do pseudo elements        you could get a few more... */        /* Also, HSL is awesome but don't use it if       you need super old browser support */}?












Don't forget about the outline property. While it's a bit more limited than border (goes around entire element no matter what) it's an extra free border if that's what you need.
outline: 5px solid red;
If you are down with CSS3, you can use box-shadow (one of the deepest supported properties of CSS3) to get infinite (!) box shadows, by comma separating values.
box-shadow:  0 0 0 10px hsl(0, 0%, 80%),  0 0 0 15px hsl(0, 0%, 90%);


3D CSS FOR TEXT
<link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" ><style>h1{font-family: 'Aclonica', serif;color: #fff;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;}</style>
CSS 3 box-shadow property:
border-radius: 50%;box-shadow: inset 0.3em 0.3em 0.9em black; RAINBOW EFFECT SHADOW:
 0.5em -0.5em 0.4em red, 0.5em  0.5em 0.4em gold,-0.5em  0.5em 0.4em lime,-0.5em -0.5em 0.4em blue;
/* If shadow color is omitted,   the browser must use text color.   WebKit is buggy and ignores this rule.
  This bug is fixed in WebKit 536.7  and therefore in Chrome 20 and Safari 6
*/
0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;
0.3em 0.3em silver;
0.3em 0.3em 0 0.6em silver;
0 1.5em 0 -0.7em silver;
2em 1.5em 0 -0.7em silver;
0 0 1em maroon;
0 0 1em 0.5em maroon;
0 0 1em 1em maroon;
-0.4em -0.4em 1em olive;
0.4em 0.4em 1em olive;
0.4em 0.4em 1em -0.2em olive;
0.4em 0.4em 1em 0.4em olive;
0 1.5em 0.5em -1em olive;
inset 0.2em 0.4em red, inset -1em -0.7em red;
inset 11em 0 red;
inset -1em 0 red;
inset 13em 0 3em -3em orange,inset -3em 0 3em -3em blue;
inset 11em 0 2em orange;
inset 0 0.3em red;
inset 0 -1.1em red;
inset 1em 0 1em -1em blue;
inset 0 0 0.5em blue;
inset 0 0 2em blue;
inset 0 2em 3em -1em green;
inset 0 2em 3em -2em green;
inset 0 2em 3em -3em green;
inset 0 0 1em khaki;
inset 0 0 1em khaki, inset 0 0 1em khaki,
inset 0 0 1em khaki, inset 0 0 1em khaki;
inset 0 0 0.5em 0.5em khaki;
/* similar to above */
/* almost seamless if <blur-radius> = <spread-radius> */
inset 0 0 0.5em 0.5em khaki;
/* background: black */
inset 0 0 2em 2em khaki;
/* background: red; padding: 2em */

0 0 0.5em 0.5em teal; /* background: teal */

inset 0 0 0.5em 0.5em indigo,0 0 0.5em 0.5em indigo;  /* padding: 1em */

inset 0 0 1em black, inset 0 0 1em black,

inset 0 0 1em black, inset 0 0 1em black;inset 0 0 0.7em 0.5em black;

/* should be very similar to above in CSS conforming browsers like Firefox 4+ */

inset 0 2em 3em -1.5em green,inset 0 -2em 3em -2em blue;

inset 1em 1em 2em -1em blue;

inset 1em 1em 2em -1em blue,inset -1em -1em 2em -1em red;

inset 0 2em 3em -2em white,inset 0 -2em 3em -2.5em black; /* background:red */

inset 1em 1em 1em -1em white,inset -1em -1em 1em -1em black; /* background:red */


inset -1em -1em 1em -1em black,inset 1em 1em 1em -1em white; /* background:red */

inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5),inset 0.3em 0.3em 0.6em rgba(256,256,256,0.7);

inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5),inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);


0.2em 0.2em 0.7em black, inset 0 0 0.7em red;

Leave a comment!
html comments NOT enabled!
NOTE: If you post content that is offensive, adult, or NSFW (Not Safe For Work), your account will be deleted.[?]

giphy icon
last post
11 years ago
posts
3
views
4,504
can view
everyone
can comment
everyone
atom/rss

followers

other blogs by this author

official fubar blogs
 8 years ago
fubar news by babyjesus  
 13 years ago
fubar.com ideas! by babyjesus  
 10 years ago
fubar'd Official Wishli... by SCRAPPER  
 10 years ago
Word of Esix by esixfiddy  

discover blogs on fubar

blog.php' rendered in 0.0598 seconds on machine '195'.