indiePaper MyBB Premium Themes

Toggle Panel

Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Border and Outline (and other thoughts on CSS(3)?)
11-28-2009, 07:25 PM
Post: #1
Border and Outline (and other thoughts on CSS(3)?)
This thread might not be very interesting, or new. But this are the kind of things people that happends to people that does not google every word and that likes to think and over-complicate an issue (like me Tongue)

So about a month ago I knew about the existence of outline as a CSS property. And I was like, "so is just another border?". But I realized the diference like two weeks ago! The border is like inside the element, while the outline is outside (oh that's huge). But anyways, the borders get rounded when you use border-radius, but the outline doesn't.

In the design I was workin on, the ideal thing would be to have a border and an outline in order to achieve the 2px pop technique w/o any images. But it was rounded with CSS. So it was not possible, because the outline would remain as an square. So I thought of others way of making it, the first one was to add an extra wrapper, but I'm not killing my semantics for this, so it was a no. Then, it was the CSS3 borders with images... it'd make the trick, but not in IE (and other browsers) and this same property would make many others things possible, even an alternate CSS3 method of making rounded corners, and many other neat things with a little of imagination. So, I could only make a 1px*1px white image (that would make the line to contrast with the dark border) and set is as background of the element, I set it to repeat-x and be 1px away of the top. And there it was done, but I had to use another image, another HTTP request, slower.

So that lead me to think, when we'll be able to work with CSS3 and unleash our creativity with it. Having faster loads, and cleaner markups and CSS. I wanted to go the CSS3 conference in New York that took place this year Tongue

But, there's also some light on the no-so-far-away future, Microsoft recently announced IE9 would have CSS3 support Big Grin The bad thing is, when will people upgrade? Probably never, or when their computers completely crashes and they are forced to buy new licenses.

Find all posts by this user
Quote this message in a reply
01-24-2010, 12:52 AM
Post: #2
RE: Border and Outline (and other thoughts on CSS(3)?)
The way I do this is I separate it in images and make a border that way. Out of 8 images.

Find all posts by this user
Quote this message in a reply
01-31-2010, 01:10 AM
Post: #3
RE: Border and Outline (and other thoughts on CSS(3)?)
borders uses image? Smile i might try it soon.. thanks combus.. Big Grin i really learn a lot from you buddy! Smile

Find all posts by this user
Quote this message in a reply
01-31-2010, 05:53 PM
Post: #4
RE: Border and Outline (and other thoughts on CSS(3)?)
Well, not on CSS 2.1. But borders can use images in CSS3, it's actually pretty cool since it give your the chance to make a whole bunch of things Big Grin (and keeping a very clean markup)

Find all posts by this user
Quote this message in a reply
02-01-2010, 01:32 AM
Post: #5
RE: Border and Outline (and other thoughts on CSS(3)?)
one example of image border done @ mybbsource blue rush theme, right? Smile
its pretty cool.. i like the new concept done by CSS3..

Find all posts by this user
Quote this message in a reply
02-02-2010, 09:20 PM
Post: #6
RE: Border and Outline (and other thoughts on CSS(3)?)
Not exactly, I did use border and outline there though. But table elements can't have an outline, so I had to wrap the tables into divs to make the effect.

And yeah, I really like the many things you can do with CSS3, but I'm not as exited as a major part of design community on CSS animations. I prefer to use JS on that, since it's a bit more supported and I already know how to make it Tongue

Find all posts by this user
Quote this message in a reply
02-04-2010, 08:36 PM (This post was last modified: 02-04-2010 08:36 PM by AndrewPH.)
Post: #7
RE: Border and Outline (and other thoughts on CSS(3)?)
cool.. give it a shot then.. and let see how it works Smile nice idea combus!

Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: