CSS
CSS tests, tips and stuff
There are 19 articles published in this category. Please try the search if you can't fint what you're looking for.
A follow-up to "An alternative to div overlays"
Friday, February 13, 2009
"Cancel Bubble" pointed out in my previous post one thing that I hadn't thought of; users can still interact with the page behind when you don't use an actual element to cover it.
So, to solve this, but still use the same .dimmed-class on body, I simply added an empty div-element to body using JS:
.... code ...
<script type="text/javascript">
var div = document.createElement('div');
div.id = 'body-overlay';
document.body.appendChild(div);
</script>
</body>
And styled it, too, under body.dimmed:
#body-overlay {
background: #000;
opacity: .8;
z-index: 1;
position: fixed;
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
}
body.dimmed #body-overlay {
display: block;
}
Together with the .dialog-styling I still only need to switch body's class to display a centered, modal dialog on top of a (now) non-interactive, dimmed page.
IE6 won't understand position: fixed; but I'm one of those that no longer care about IE6.
- Comments are off
- Filed under CSS, Javascript
An alternative to DIV overlays
Tuesday, February 10, 2009
When displaying a modal dialog it's pretty common to dim the rest of the page to focus the user's attention on the dialog in question.
A common way to solve the dimming is to overlay the entire page with a 100% wide, 100% high div-element with a little opacity and then display the dialog on top of the overlay.
Recently at work I tried a different aproach for solving the dim and it worked out quite nicely.
Instead of overlaying a semi-transparent div on top of the page I instead made the actual page semi-transparent and simply changed body's background to something a little darker.
The semi-transparent #wrapper and darker body are both styled under body.dimmed so whenever I need to dim out the page I simply give body a class of "dimmed".
The benefit here is that you don't need to play around with JS to create a div that always covers the entire viewport in every browser but instead you simply toggle a class-name on body.
Benefit number 2 is that since everything on your page (including the dialog) are contained within the body-element they too can be styled differently when body is dimmed and when it's not.
So the simple CSS turns out something like this:
/* Normal styling */
body {
background: #369;
}
#wrapper {
background: #fff;
width: 960px;
margin: 0 auto;
}
div.dialog {
background: #fff;
display: none;
position: absolute;
left: 50%;
top: 15%;
width: 400px;
margin: 0 0 0 -200px;
}
/* Dimmed styling */
body.dimmed {
background: #111;
}
body.dimmed #wrapper {
opacity: .1;
}
body.dimmed div.dialog {
display: block;
}
As you can see all you need to do now to display a centered dialog on top of a dimmed page is to give body a class of "dimmed". With jQuery it couldn't be easier:
$('<a href="#">toggle dialog</a>').appendTo('#content').click(function() {
$(document.body).addClass('dimmed');
});
Happy coding!
Laters
- Comments are off
- Filed under CSS, Javascript, jQuery
Handy CSS Constants
Friday, October 03, 2008
I've used my CSS-constants class in quite a few different projects now and I've built up a pretty nice set of genereic constants that I use for pretty much every site I create.
/**
* Underlined
* Makes element underlined and removes on :hover
*/
$underlined {
text-decoration: underline;
}
$underlined:hover {
text-decoration: none;
}
/**
* Not Underlined
* Makes element not underlined and removes on :hover
*/
$not-underlined {
text-decoration: none;
}
$not-underlined:hover {
text-decoration: underline;
}
/**
* Data Definition List
* Used on DLs to turn them into Key: Val
* Bold key with : after
*/
$data-definition {
margin-left: 0;
padding-left: 0;
}
$data-definition dt {
float: left;
clear: left;
font-weight: bold;
margin: 0 5px 5px 0;
}
$data-definition dt:after {
content: ": ";
}
$data-definition dd {
margin: 0 0 5px;
}
/**
* Pipe Menu
* Turns a UL into foo | bar | zaz
*/
$pipe-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$pipe-menu li {
display: inline;
}
$pipe-menu li:after {
content: " | ";
}
$pipe-menu li:last-child:after {
content: "";
}
/**
* Dash Menu
* Turns a UL into foo - bar - zaz
*/
$dash-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$dash-menu li {
display: inline;
}
$dash-menu li:after {
content: " - ";
}
$dash-menu li:last-child:after {
content: "";
}
/**
* Pagination
* Turns a UL into < prev | 1 | 2 | 3 | next >
*/
$pagination {
margin-left: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
$pagination li {
display: inline;
}
$pagination li:after {
content: " | ";
}
$pagination li:last-child:after {
content: "";
}
$pagination li:first-child a:before {
content: "< ";
}
$pagination li:last-child a:after {
content: " >";
}
/**
* Previous/Next Menu
* Turns a UL with 2 LIs into < prev | next >
* (Should add support for $constant = $constant)
* (to avoid duplicate self-clear-styling)
*/
$previous-next-menu {
_height: 1%;
*display: inline-block;
_display: block;
}
$previous-next-menu:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
$previous-next-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$previous-next-menu li {
float: right;
}
$previous-next-menu li:first-child {
float: left;
}
$previous-next-menu li a:after {
content: " >";
}
$previous-next-menu li:first-child a:after {
content: "";
}
$previous-next-menu li:first-child a:before {
content: "< ";
}
/**
* Arrow-list
* Prepends an arrow to every list-item
*/
$arrow-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$arrow-list li {
margin-bottom: 5px;
}
$arrow-list li:before {
content: "> ";
font-size: 8px;
}
/**
* Dash-list
* Prepends a dash to every list-item
*/
$dash-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$dash-list li {
margin-bottom: 5px;
}
$dash-list li:before {
content: "- ";
font-size: 8px;
}
/**
* Plain list
* A list without margin, padding or bullets
*/
$plain-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
/**
* A11y hide
* Hides and element in an accessible way
*/
$a11y-hide {
position: absolute;
left: -10000px;
top: -10000px;
}
/**
* Self Clear
* Classic self-clear
*/
$self-clear {
_height: 1%;
*display: inline-block;
_display: block;
}
$self-clear:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
This file is automatically included in every aFramework-project (along with other shared CSS and JS-files) so whenever I need a self-clear, or a pipe-separated-menu or whatever I simply go:
#navigation ul = $pipe-menu;
#wrapper = $self-clear;
// etc...
Without constants I'd have to give #wrapper a .self-clear class and #navigation ul a .pipe-menu class. This would require me to change my HTML every time I wanted to change design. Which totally defeats the entire purpose of CSS.
Try it out. It really helps keep design-related information out of your HTML.
Laters
- Comments are off
- Filed under aFramework, CSS
Prefix CSS-selectors PHP Class
Thursday, April 24, 2008
Recently at work I had to combine a site's existing design and a PHPBB-template.
If you've ever worked with PHPBB (front or back-end) you'll know it's no dream.
The hardest part with combining PHPBB (or any other third-party-software) with your own code is to make sure your CSS-rules (well JS as well I suppose) don't collide.
PHPBB styles h1:s, you style h1:s, PHPBB styles a:s, you style a:s. It's a right mess when both are trying to style elements on such a general level.
As most websites nowadays, most of PHPBB's themes has a wrapper-div around the entire website so I had an idea to manipulate all of PHPBB's CSS-code before output and add that wrapper-div's ID-name in front of every selector.
So instead of PHPBB styling all the h1:s in a document, it would only style (in this case) #wrap h1:s (#wrap is the name of the wrapper-div in the prosilver-theme).
Recent versions of PHPBB include a similar type of CSS-compression as I've explained before in CSS compression and constants PHP-class so you have access to every line of CSS code in a variable before it's outputted. The merging of CSS happens in PHPBB3/style.php. Look at the very bottom and you'll see something like echo $theme['themedata']; The themedata-index in the $theme-array is what contains all of the CSS for that theme. What you want to do here is run my function on that variable before output:
So instead of:
echo $theme['theme_data'];
You want:
require_once 'CSSSelectorPrefixer.php';
echo prefixCSSSelectors($theme['theme_data'], '#wrap');
The function will then add #wrap at the beginning of every selector in the string.
One problem with this though is that #wrap isn't the root-element of the document, the html-element is. So any styling on body or html will have no effect as they will be changed to #wrap body and #wrap html. I believe this is what you want in most cases as you've probably styled both elements in your own CSS.
The function will also remove duplicate #wrap:s (if the PHPBB-style contained something like #wrap a the function will turn it in to #wrap #wrap a, but before it returns the new code it will remove all duplicate #wrap:s (or whatever you set)).
This really simplified the design-move and hopefully it will help someone looking to do the same thing.
You can as usual get the code from my Google Code repository.
Laters
- Comments are off
- Filed under CSS, Development, PHP
CSS Constants and Compression PHP Class
Tuesday, January 15, 2008
I've mentioned my take on CSS-constants before but I haven't come around to actually creating the back-end needed, until now.
Download CSSCompressor and demo-files
The way I see CSS-constants differs a bit from what I've seen over the internet before, which is basically just about storing property-values in variables. That's all good and very basic to implement using any server-side language. What I wanted, tho, was a replacement for classes (CSS-classes that is), so this is how I see constants:
- Continued...
- Comments are off
- Filed under CSS, PHP
Opera Mini Better CSS-support than Opera?
Friday, November 23, 2007
I was checking my site in the Opera Mini 4 Simulator and noticed that Opera Mini has support for the :last-child pseudo class. Something that Opera (9.24) still does not have.
TF?
The CSS3 Advanced Layout Module
Monday, November 19, 2007
I've only looked briefly at the new CSS3 advanced layout module, but what I've read seems really cool.
Using floats, absolute/relative positioning and (negative) margins you can create basically any layout without the use of tables. But many times your markup still reflects your layout.
The markup exscale.se consists of is pretty much limited to 1, 2 or 3 column layouts due to the grouping of all sub-content widgets in the #sub-content div and everything else in the #content div. Using the new layout module I could place every widget in the #wrapper-div and still create fluid, scalable 1, 2, 3, 4, whatever-column layouts. I could move widgets around however I felt like without ever touching my markup.
With the new layout module in CSS3 complete separation of content and design is possible.
- Continued...
- Comments are off
- Filed under CSS, Design
Using display: table to Create Full Width Navigations
Saturday, November 03, 2007
Sometimes you need a navigation to span the entire width of its parent:
Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.
A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).
Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Semantics
Why Can't We Select Parent Elements with CSS?
Tuesday, July 24, 2007
Yea, why is that? And are they working on letting us do it?
It's a breeze with JavaScript and it could be extremely useful in CSS I think.
- Continued...
- Comments are off
- Filed under CSS
IE Double Padding Bug
Wednesday, June 13, 2007
Couldn't find anything about this on Google but there seems there's not only a double margin bug in IE but also a double padding bug.
I haven't been able to recreate the bug (although haven't tried much) but it seems to occur when an element is used to clear other elements. Then the clearing element will get double padding-top.
I've experienced this a few times but, as i said, never found any information about it.
Perhaps someone reading this knows more about it? What exactly triggers the bug and if there's a fix (part from simply reducing padding by 50% in IE).
I'll try to recreate the bug and post a demo-page.
Update
IE8 fixes this.
From: http://msdn.microsoft.com/sv-se/library/cc304082(en-us,VS.85).aspx (emphasis mine)
Floats
Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the hasLayout property. The hasLayout functionality has been removed in Internet Explorer 8. The following are some of the issues fixed:
- Cleared elements don't clear other nested floats when they don't share a parent.
- Cleared elements after floats have doubled top padding.
- Comments are off
- Filed under CSS
Creating Pipe-Separated Menus with Unordered Lists
Sunday, May 27, 2007
Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Semantics, Web Standards
CSS Boxar Med Rundade Hörn, Toning Och Skugga
Thursday, May 24, 2007
I denna korta artikel tänkte jag beskriva ett sätt att bygga boxar med rundade hörn, skuggor och toning med enbart en div och ett rubrik-element.
Boxen kommer såklart vara flexibel i höjd, men däremot ha en fast bredd. Krävs flexibel bredd så krävs fler än 2 bakgrundsbilder, vilket då (i nuläget) kräver fler än 2 element.
Om några år (förhoppningsvis) så kommer browsers ha stöd för flera bakgrundsbilder i ett element, och då kan vi bygga hur avancerade boxar vi vill med en enda div, men i dagsläget får vi antingen nästa div:ar, eller nöja oss med fast bredd.
Boxen i exemplet kommer att se ut såhär:
Men kan som vanligt enkelt ändras genom att pilla lite i CSS:n och ändra bilderna.
Boxen kommer bestå av två bilder, den ena placerar vi i div:en, och den andra i rubrik-elementet.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Design
Bra CSS-Menyer
Sunday, March 11, 2007
Med den här guiden ska jag försöka förklara hur man med CSS kan bygga menyer som kan se ut i princip hur som helst, utan att använda något mer än de obligatoriska HTML-elementen ul, li och a.
Jag har sett många exempel på dåliga CSS-menyer, och ska nu försöka bevisa att man sällan behöver förstöra sin HTML med en massa divs och spans för att göra snygga menyer.
Vill du kolla in koden direkt kan du göra det här.
Den färdiga menyn i exemplet ska bli såhär:
Men kan enkelt ändras till vilket utseende som helst genom att ändra bilderna och tweaka CSSn därefter.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Design, Semantics, Web Standards
CSS Wish List
Thursday, February 22, 2007
Often times when programming CSS i think of stuff i would really like to see in future versions of the language.
I know some (most?) of these have been mentioned around the web before, but these are the ones I would really like to see in the future.
- Continued...
- Comments are off
- Filed under CSS
Fade an Entire Design Using jQuery
Saturday, February 17, 2007
I've been using jQuery lately at work to create some pretty cool effects and tabs, and I must say I'm starting to like it more and more.
I had an idea to morph a website's design from one to another, so i created this little test (Click anywhere on the page to fade to the other design).
It didn't turn out exactly as cool as I first had hoped, because all I really do is fade out body, change its class and fade it back in.
You could however potentially animate every CSS attribute that differs in the two design, and create a really fuckin neat morph.
I could not be arsed though, cus that would mean putting all the CSS in the js-file.
Also the fade is a bit sketchy. I don't understand why the "Round" design jumps up and down like that, but i guess it's something i have to live with.
I can't use this on my style-switcher though, because changing a style on my site not only changes CSS attributes, but includes other JS-files etc.
And also i can't be arsed to go through every design i've made and put a body.design-n in front of every selector.
Anyhoo, check it out.
Edit: i just realized that instead of changing the class of the body (and having to use body.design-n in the CSS) one could simply change the href attribute of the link element with media "screen".
I can't be bothered to change the example though.
- Comments are off
- Filed under CSS, Javascript, jQuery
A Really Old School Design
Thursday, February 01, 2007
Just finished coding this really old-school design i initially made a couple of years ago.
It looks horibble, but it was a pretty good CSS excersise to get my current HTML to look like that through CSS.
I actually had to use some JS aswell to add a div for the bottom-left image in the content-area (home/archives etc).
I had the 2 year old source code zipped up and saved for reference, but the page wouldn't render properly in FF, which isn't strange when you consider the code; table based design, inline styles, attribute values without quotes etc.
I tried it in IE7 and there it rendered just fine. Too bad IE has better support for crappy code, than for modern standards.
Anyway, it's pure CSS now so check it out on the styles page or click here to apply it right away
Laters
- Comments are off
- Filed under CSS, Design, Old School, Web Work
CSS3 Multiple Background Images
Sunday, October 08, 2006
I quite recently found out that Safari for Macintosh supports multiple background images in one element. I immidiatly got very excited and created this box using 12 jpg-images, a div and a h2.
The box is stretchable in any direction (including text-resizing).
At work i get to create plenty of boxes in almost every design and i constantly have to bloat my HTML with unnecessary spans and divs. I wish all browsers could support multiple background images now! That would make my job so much easier =)
Anyway, check it out, it wont look very cool if you're not on safari tho.
The Ultimate Website Pt. 2
Sunday, April 02, 2006
Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.
If you haven't read part 1 of this article, i suggest you do so before you continue reading.
So, we have the main-structure for the "Ultimate Website". But it doesn't look very fancy does it? Here's where the CSS comes in.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, PHP, Web Standards
The Ultimate Website Pt. 1
Wednesday, March 29, 2006
Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.
After having programmed PHP, (X)HTML and CSS for a few years now, I've finally come up with a website-structure that I'm satisfied with. A website that uses valid markup, dynamic PHP and a completely CSS-driven design. So it can be used over, and over again with very little changes.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, PHP, Web Standards
