Breadcrumbs
Tag: "css"
-
Do We Really Need Proprietary CSS Properties?
- Author
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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.
Sponsored By:
Categories
-
Code
-
Design
-
Programming
-
Miscellaneous