This is a simple tutorial to demonstrate how easily rounded corners can be created within a webpage using HTML, CSS and four images.
Category Archives: Web Design
CSS Rounded Corners Tutorial
CSS Dropshadows
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.
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.
Colour blind web page filter
Colour blindness is often one of the many areas of accessibility which is overlooked but as it effects somewhere between 7% and 10% of the adult population it’s certainly something that we should be considering when designing web-pages.
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.
Nevermind the Accessibility
I’ve not spoken about accessibility for quite a while but there’s been a lot of interest in the topic, both for and against accessibility mainly due to this little bit of news “ Judge allows class action against Target Web site“.
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.
Block and Inline elements: Part two
In Block and Inline elements: Part one, I explained the difference between block and inline elements and how the default display for these elements is presented.
Within this part, I’ll explain how you can use CSS to alter the display of these elements to help with the presentation. Continue reading
Block and Inline elements: Part one
CSS is an important part of any web designer’s skills and therefore it’s extremely important that a designer understands how block elements and inline elements work together and how they can be styled using CSS. This article will explain the default display values of the most commonly used HTML elements whilst part two of this article will explain how CSS can be used to alter the display and visual appearance of these elements.