Lowter

Breadcrumbs

1. Home
2. Categories
3. CSS

CSS

• Do We Really Need Proprietary CSS Properties?

  Author

  Ethan Poole

  Date

  Tue 17 Feb 2009 at 21:55

  Type

  Blog Entry

  Comments

  5 comments

  

  Recently, I was working on a project that utilised Webkit's CSS transforms to create a cool effect as a little extra to anyone viewing the page in Safari. Firefox 3.1 will also introduce CSS transforms to Firefox. However, Webkit uses the -webkit-transform property and Firefox uses the -moz-transform property. The question I ask is: what is wrong with just transform? Do we really need proprietary CSS properties? Isn't that entirely counterintuitive to web standards? Basically, the answer boils down to that, yes, proprietary CSS properti…

• New SitePoint Book: Everything You Know about CSS Is Wrong!

  Author

  Ethan Poole

  Date

  Wed 22 Oct 2008 at 12:49

  Type

  Blog Entry

  Comments

  3 comments

  SitePoint has released their latest book about CSS titled Everything You Know about CSS Is Wrong! I've been very pleased with SitePoint lately for releasing a lot of books outside the typical beginner range. When they first started to publish books, most of their books were pretty basic (although still well written) and were certainly geared towards beginners in that particular subject. However, I guess since they already have books covering these beginner areas, they have been publishing a lot more intermediate and advance level books l…

• Multi-Column Lists with CSS

  Author

  Ethan Poole

  Date

  Mon 29 Sep 2008 at 23:36

  Type

  Blog Entry

  When redesigning Lowter's homepage, one of the first decisions was to move the category list somewhere else because it took up a lot of valuable space. I decided to move the category list from the left-hand menu to the centre column towards the bottom of the page because, in the grand scheme of things, the category list is not very important. However, it would look horribly awful for the category list to remain vertical as it previously was in the left-hand menu. It made more sense to break the long category list into two columns to take adv…

• Magazine-style CSS Drop Caps

  Author

  Daniel Malmqvist

  Date

  Mon 1 Sep 2008 at 19:09

  Type

  Blog Entry

  Today I'm going to share a quick technique to spice up your paragraphs. If you have an extreme amount of text on a webpage, you know it can be awfully boring to look at. With some simple CSS you can really spice up your paragraph, from styling the first letter to floating an image within your paragraph. The possibilities are endless. However, today I am going to focus on showing you how to style the first letter of a paragraph, using CSS's :first-letter pseudo-element, to make it drop down, like in a magazine article: p { font: 11pt/…

• CSS Image Rollovers with One Image

  Author

  Ethan Poole

  Date

  Tue 13 May 2008 at 7:36

  Type

  Blog Entry

  CSS image rollovers are common amongst web designers because they are easy to setup and they do not require mucking up the HTML. To change the background image on a rollover, one simply has to use the :hover pseudo-class on the target element, changing the background image when the element is hovered over. Note that in IE6 and in previous versions of IE, the :hover pseudo-class only works on anchor (<a>) elements. Anyhow, your code will look something like this: div#banner { background: url('canada.png'); height: 200px; widt…

• Content Box Using CSS and Photoshop

  Author

  Daniel Malmqvist

  Date

  Mon 28 Apr 2008 at 23:46

  Type

  Blog Entry

  Today we are going to create a simple and stylish content box using CSS and Adobe Photoshop! Many people don't realise the possibilities of combining Photoshop and CSS. So today we are going to make a basic content box using CSS and then style it using Photoshop! You ready? Great, let's get this thing going! CSS We will start off with the HTML for our box: <div id="content"> <h1>Your Header</h1> <p> Your text goes here. </p> </div> Now, if you save this and look at it, it looks p…

• 8 Useful CSS Techniques

  Author

  Ethan Poole

  Date

  Thu 10 Apr 2008 at 9:44

  Type

  Blog Entry

  Comments

  1 comment

  Sitepoint just recently published a new article about some cool CSS techniques: Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know. Overall, the article presents some documentation on various CSS selectors and goodies that you might find interesting. Not all of them have great browser support, but the article shows examples of how they degrade peacefully in non-supported browsers. Personally, I wish the attribute selectors of CSS worked across browsers as they would be extremely useful for so many things. For example, on Lowter,…

• Characters in CSS Generated Content

  Author

  Ethan Poole

  Date

  Thu 11 Jan 2007 at 22:57

  Type

  Blog Entry

  Generated content is one of those abilities of CSS that has been around for quite some time, but I had never really found a useful situation in which to use it. However, this recently changed. When I was coding the new Lowter layout, I focused intently on having semantic markup. With this focus in mind, I found a productive use for generated content: to add presentational characters to various elements. I immediately ran into a problem. I was attempting to add a "»" after a link, which really did not fit semantically into the marku…

• Styling <legend> Tags

  Author

  Ethan Poole

  Date

  Fri 22 Dec 2006 at 23:11

  Type

  Blog Entry

  Recently, when coding Lowter's new layout, I ran into an issue trying to use absolute positioning on a <legend> tag. I was attempting to apply these particular styles to it: legend { left: -2000px; position: absolute; width: 990px; } I wanted to hide the <legend> tag from visitors on a certain form. Using display: none would not have sufficed because then screen-readers would have ignored the form instructions I wanted them to read aloud. The stylings worked fine in Opera, Safari, and Internet Explorer. The brow…

• Clearing Floats With Ease

  Author

  Ethan Poole

  Date

  Sat 4 Mar 2006 at 21:04

  Type

  Blog Entry

  One of the many difficulties of CSS is that parent containers of elements with a float property do not take up vertical space, or wrap around the content it contains. Rather, the container will appear as an element with no height. This creates some styling difficulties for designers, unless they want to add extra markup. Clearing floats is very useful in a variety of situations, as the majority of CSS layouts involve placing smaller elements inside a larger wrapping element. Overtime, many techniques for clearing floats have developed; so…

• Working With Two Classes

  Author

  Ethan Poole

  Date

  Sat 29 Oct 2005 at 18:32

  Type

  Blog Entry

  Comments

  4 comments

  It is very easy to assign an element two classes, as mentioned in the Lowter article, Four Quick CSS Tips. Another neat little tip is assigning styles to an element as long as it belongs to two specific classes. First, assign the element two classes: <div class="one two">...</div> Then, use the following CSS to apply styling to an element of both classes: div.one.two { ... } These styles will only be applied to an element that is assigned both classes, one and two in this case. You can also use this metho…

• Four Quick CSS Tips

  Author

  Matt Oakes

  Date

  Sat 17 Sep 2005 at 22:10

  Type

  Article

  Matt Oakes, Lowter Editor, shows you four quick CSS tricks to help improve your website. Learn how to set up printer friendly versions of your content, assign two classes to an element, deal with Internet Explorer rendering bugs, and tolerate Mac Internet Explorer.

• CSS In HTML Emails

  Author

  Ethan Poole

  Date

  Wed 14 Sep 2005 at 16:53

  Type

  Blog Entry

  HTML emails are crippled by the lack of standard rendering across the hundreds of email clients, desktop and online. Web designers only have to deal with maybe five web browsers, at the most, but it's ten times worse when designing HTML emails. There is absolutely no standard methods to render HTML emails, and each email client does it differently. With the lack of HTML support, you'd think that CSS emails would be completely out of the question. Campaign Monitor has published an article about using CSS in HTML emails According to this…

• Review: The CSS Anthology

  Author

  Ethan Poole

  Date

  Wed 3 Aug 2005 at 15:37

  Type

  Article

  So you've learned the basics of CSS, but want to learn how to actually use it? The CSS Anthology is a great book from SitePoint full of practical, everyday ways to use CSS.

• Review: HTML Utopia - Designing Without Tables Using CSS

  Author

  Ethan Poole

  Date

  Fri 8 Jul 2005 at 9:42

  Type

  Article

  Read a review on HTML Utopia - Designing Without Tables Using CSS before you purchase it! This great CSS book packs a real punch, but let's see what Ethan has to say about the ups and downs of HTML Utopia.

• Absolute Clearance

  Author

  Ethan Poole

  Date

  Sat 12 Mar 2005 at 10:52

  Type

  Blog Entry

  A problem that many people face is trying to make a footer when using absolute positioning in the design. The simplest fix is to use floats as you're able to clear the footer, but this isn't available in absolute positioning. One advantage of using absolute positioning though is that you can place your page elements in any order on the page, usually with the content first. The ideal median is being able to place your content first and have a way to clear for a footer. There are two hacks or workarounds to this - absolute clearance and neg…

• CSS Basics

  Author

  Ethan Poole

  Date

  Sun 30 Jan 2005 at 7:39

  Type

  Article

  Are you still using bothersome font tags and bgcolor attributes in your markup? Don't! Learn the fundamentals of CSS and rid yourself forever of intermixing markup and display.

• CSS Background Properties

  Author

  Ethan Poole

  Date

  Sun 30 Jan 2005 at 7:39

  Type

  Article

  Use CSS to add backgrounds to HTML elements, including image based backgrounds. Learn to rid yourself forever of HTML background attributes!

• Styling Links

  Author

  Ethan Poole

  Date

  Sun 30 Jan 2005 at 7:39

  Type

  Article

  Links are a core aspect of a webpage and you want your links to match your layout. The default blue and underlined links are not sufficient for everything, so learn how to use CSS to style your hyperlinks.