MHunt Design » CSS

Adjacent Sibling Selector

admin — Tue, 24 Aug 2010 04:54:52 +0000

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.

Here is #block-2 as the first block:

#block-1 as the first block:

#block-2 .block-inner { border-top-right-radius :6px; border-top-left-radius :6px; }

#block-1 + #block-2 .block-inner {
border-radius :0px;
border-top: 0 none;
}

For more info see: http://reference.sitepoint.com/css/adjacentsiblingselector

Why didn’t I use the :first-child selector instead?

#sidebar-left .block:first-child .block-inner { border-top-right-radius:6px; border-top-left-radius:6px; }
I guess I could have. But the adjacent selector has better browser compatibility. Trust me I think that this code is much more effective because there is no guess work involved here, doesn’t matter what the block ID is:

Besides, it was more fun to see how the adjacent sibling selector can work with a decent selector combination.

Using the General Sibling Selector (CSS)

admin — Sun, 22 Aug 2010 19:50:46 +0000

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!

How to create a CSS3 border fadeout

admin — Sat, 17 Jul 2010 17:56:27 +0000

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

Web Design Resources: April 4th through April 8th

admin — Thu, 08 Apr 2010 16:02:31 +0000

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 -

Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS: 05-17-10 – 05-19-10

How to Create Books in Coda

admin — Fri, 06 Nov 2009 02:03:27 +0000

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

More information on adding books to Coda: