I’ve not written anything about CSS3 for a while so have taken the opportunity today to write a short post on the text-shadow property, how it works and what browsers currently support it.
Category Archives: CSS
CSS Dropshadows
CSS Tabs Menu with Dropdowns
I’ve previously written a tutorial which demonstrated how to create accessible tab navigation menu’s. Within this tutorial, I’m going to explain how this menu can be expanded further to create dropdowns when the top level menu item is hovered over.
Firefox scrollbar fix
If you’ve ever developed a site which is centrally aligned and only requires a vertical scrollbar on some pages then you’ll have experienced the problem in Firefox where the page appears to jump to allow for the appearance and disappearance between pages.
However, there is a fix which can force the scrollbar to appear all the time which prevents the jumping of the page and it’s really simple to implement.
CSS Tabs Menu
Using an unordered list and a couple of images, we can use CSS to create effective tabbed navigational menu’s which this tutorial will demonstrate.
This demonstration uses the Sliding Doors technique which not only allows for long text but also enables the user to enlarge the text within their browser without breaking the tabs.
CSS colour tip
Whenever I’m browsing the web and come across a certain website where something is interesting or I’m curious as to how something has been done, I’ll take a look in the source code and CSS to see how the designer solved a certain problem or created part of the page.
This morning I came across an interesting idea on 456 Berea Street whilst looking at the CSS created by Roger Johansson.
IE CSS Conditional Comments
Consistency across browsers is obviously extremely important and Internet Explorer 6 just won’t go away so unfortunately from time to time we need to use hacks to get around certain bugs and that’s where conditional comments can come in extremely useful.
Accessible CSS Contact Form
Forms are probably the most misunderstood areas when it comes to accessibility however with a properly marked up form it isn’t difficult to create form elements which can easily be styled using CSS.
Are we getting carried away with CSS3?
I’ve been trying to catch up a lot recently with the progress of CSS3 and how it can be used positively to improve code and simplify both the HTML and CSS.
CSS.info is a great resource for this kind of information and a lot of the content is useful, but the recent post on Lists to get more decorative which contains information on the new lists module got me thinking that some of the modules being talked about may not be all that useful and we might just be getting carried away with the buzz and excitement.
Box model hacking
There’s always been different rendering issues within different browsers. From the problems with Netscape 4.2 and Internet Explorer 5 right upto the differences today with Firefox and IE7. But one of the biggest problems that always seems to crop up is when a website has to support IE5.x and the issue of the box model versus the broken box model.
Converting px to em or percentage
I’ve always created font sizes and elements of a page that I need to resize in % or em but when you’ve created a mock-up of what the site will look like in Photoshop then it can sometimes be a bit of a pain trying to figure out what size % or em you need to use in order to replicate your design within a web browser. Continue reading