Philadelphia Freelance Web Designer: MHunt Design

I recently needed to style some Drupal blocks so that the first one in the series always received top rounded corners. I tested out how combining the adjacent sibling selector with decedent selectors would work. The declaration here acts more like a condition. block-2 is by default the top block in my sidebar.  Only the first block to show gets a rounded corner top.

(more…)

The general sibling selector can be very useful in reducing css code in your style sheets and in your html.

Example:

You have a thumbnail image to the left of a few paragraphs and you don’t want them to wrap below the image.

Instead of using a wrapper div for your paragraphs, you can simple use one declaration:

img ~ p {padding-left:122px;}

This means that all general siblings of an img element will have a left padding value of 122px.

What about older Browsers?

See: http://reference.sitepoint.com/css/generalsiblingselector

In my case, I was not planning on having more than 298 elements, seems excessive. In that case you would want to use a wrapper div for those paragraphs.  As for IE6, I say let the text wrap!

With CSS3, you can create a border that fades out gradually using the :before and :after css pseudo classes and css gradients.

I haven’t seen this technique done anywhere so I decided to post it. It was inspired by the Multiple Borders technique posted by Jeffery Way you can actually do a lot using the before and after pseudo classes, adding elements to one element that is not considered part of the html structure or the document flow(if positioned absolutely).

View the demo |   Download the source

My latest delicious bookmarks related to web design, development, drupal, wordpress, seo, freelance, design, typography, css, jquery and the list goes on…

• Color Inspiration: Go Green with Envy | Nettuts+ -
• Google Buzz -
• Ubercart | drupal.org -
• The New Hotness: Using CSS3 Visual Effects – Smashing Magazine -
• Safari DOM Extensions Reference -
• Safari HTML5 Audio and Video Guide: Introduction – “HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers.”
• Technical Note TN2262: Preparing Your Web Content for iPad – Use -webkit-user-select:none; to disable cut/copy/paste option in Safari on iPhone OS. Use -webkit-appearance: none to remove styling from form elements
• Apple – iPad-ready websites – “iPad features Safari, a mobile web browser that supports the latest web standards — including HTML5, CSS3, and JavaScript.”
• Plugins/Validation – jQuery JavaScript Library -
• WordPress › White Label CMS « WordPress Plugins – The White Label CMS plugin allows you to remove all the panels from the WordPress dashboard and insert your own panel, which you can use to write a personalised message to your client and link to the important elements in the CMS.
• WordPress Manual Plugin – Video Tutorials For Your Clients -

Coda allows you to add reference books under the ‘Books’ tab.

More information on adding books to Coda:

• Adding more coda books tutorial
• Google Groups: Coda Book Cover Template
• Adding Sitepoint Reference Books to Coda

Related Post: How to export or save sites in coda

1. Improve your performance with YSlow

http://developer.yahoo.com/yslow/

Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.

2. Compress Images with Smushit

http://developer.yahoo.com/yslow/smushit/

Compress images even further than saving for web in photoshop with Smushit.

3. Place Javascript at the bottom of your html document

Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.

4. Compress CSS and JS Files

http://www.cssoptimiser.com/

http://www.cleancss.com/

http://javascriptcompressor.com/

5. Use CSS Sprites

The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.

See How to use CSS Sprites: http://css-tricks.com/css-sprites/

Video: Exactly How to use CSS Sprites: http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Dave Shea explains CSS Sprites: http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

I know all of this has been written before, but this post has the best of the best in combating the ie6 and ie7 css issues.

Hate IE6?

I found an article that explains that this line of code can crash ie6:

< style >*{position:relative}< /style >< table >< input >< /table >

I have not tried this out. But I have one question: What in the hell was this guy doing to discover this? Either some really bad code or his page was fragmented some how.

How can I make IE6 behave like a normal Browser?

Enter Dean Edward’s IE7.js

This lightweight javascript library forces internet explorer 6 to accept a number of css selectors that standards-compliant browser allow.

(more…)

I put together a list of some nice css selectors.

More Browsers are starting to support CSS3.

Multiple background images for one element

1. .box {
2. background-image: url("top-left.gif"), url("top-right.gif"), url("bottom-left.gif"), url"(bottom-right.gif");
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. background-position: top left, top right, bottom left, bottom right;
5. }

Source: 24 ways

Media Querie

This Media Query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:”

1. @media screen and (min-width: 400px) and (max-width: 700px) {
2. property:value;
3. }

This Media Query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

1. @media handheld and (min-width: 20em) {
2. property:value;
3. }

Source: wc3

Sibling Selectors

Sibling Selectors will make it easy to style elements without having to add so much markup. Extra divs would not no longer necessary.

Child Selector (CSS2)

Matches all li’s that are immediate children of the ul.

1. ul>li {
property:value;
}

Adjacent Sibling Selector(CSS2)

This example targets the p when h2 is an adjacent sibling.

1. h2+p {
property:value;
}

General Sibling Selector (CSS3)

This example will match a p element if it’s a sibling of an h2 element

1. h2~p {
⋮ property:value;
}

Pseudo Elements

Some of these are really cool, it’s more posssible to target almost any element without using classes or wrappers.

1. :first-letter
   represents the first character of the first line of text within an element
2. 
:first-line
   represents the first formatted line of text
3. 
:before
   specifies content to be inserted before another element
4. 
:after
   specifies content to be inserted after another element
5. 
::selection
   represents a part of the document that’s been highlighted by the user

Psuedo Classes

1. :nth-child(N)
   matches elements on the basis of their positions within a parent element’s list of child elements
2. 
:nth-last-child(N)
   matches elements on the basis of their positions within a parent element’s list of child elements
3. 
:nth-of-type(N)
   matches elements on the basis of their positions within a parent element’s list of child elements of the same type
4. 
:nth-last-of-type(N)
   matches elements on the basis of their positions within a parent element’s list of child elements of the same type
5. 
:last-child
   matches an element that’s the last child element of its parent element
6. 
:first-of-type
   matches the first child element of the specified element type
7. 
:last-of-type
   matches the last child element of the specified element type
8. 
nly-child
   matches an element if it’s the only child element of its parent
9. 
nly-of-type
   matches an element that’s the only child element of its type
10. 
:root
    matches the element that’s the root element of the document
11. 
:empty
    matches elements that have no children
12. 
:target
    matches an element that’s the target of a fragment identifier in the document’s URI
13. 
:enabled
    matches user interface elements that are enabled
14. 
:disabled
    matches user interface elements that are disabled
15. 
:checked Pseudo-class
    matches elements like checkboxes or radio buttons that are checked
16. 
:not(S)
    matches elements that aren’t matched by the specified selector

Source: Sitepoint

I created a list of the best web design, development, and management books out there. No particular order of importance was assigned to these. I own all of these except Jason Beard’s Principles of Beautiful Web Design. His book is more for developer’s looking for help on aesthetics of websites. Anyone working freelance, I highly recommend Freelance Switch’s How to be a Rockstar Freelancer. As for CSS, nothing compares to CSS Mastery. Site Point’s Ultimate CSS Reference is a handy book to have for any web development team.

1. CSS Mastery (February 2006)
2. The Principles Of Project Management (March 2008)
3. Communicating Design: Developing Web Site Documentation for Design and Planning (September 2006)
4. The Principles of Beautiful Web Design (March 2007)
5. The Ultimate CSS Reference (February 2008)
6. How to be a Rockstar Freelancer (February 2008)
7. DOM Scripting (September 2005)
8. Web Design and Marketing Solutions for Business Websites (August 2007)
9. Web Standards Creativity (March 2007)
10. Transcending CSS: The Fine Art of Web Design (November 2006)