Advanced CSS Design Resources - last-child.com » CSS3 http://www.last-child.com CSS Toys for Professional Web Developers Mon, 19 Dec 2011 18:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 CSS3 Gradient Backgrounds and Controlling Their Height http://www.last-child.com/gradient-backgrounds-height/ http://www.last-child.com/gradient-backgrounds-height/#comments Thu, 02 Dec 2010 21:42:28 +0000 Ted http://www.last-child.com/?p=268 Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.

First off, I’m going to use the excellent Colorzilla gradient creator to establish the colors.

div#gradientbg { /*the following rules are from colorzilla*/
background: #e6f0a3; /* old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#FFFFFF); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=1 ); /* ie */
}

This works great for applying a background to the entire page. But we want to limit this to just the header. We’ll need two declarations. First a browser-specific rule (background-size). This, however could cause a series of gradient bands to tile across the screen. so simply add the no-repeat as well.

-moz-background-size:100% 100px;
...
background:no-repeat;

Final CSS


div#gradientbg {
display:block; width:500px; height:400px; border:1px solid #ccc;
/*the following rules are from colorzilla*/

background: #e6f0a3; /* old browsers */

background: no-repeat -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%);
-moz-background-size:100% 100px;/* firefox */

background: no-repeat -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638),
color-stop(51%,#c3d825), color-stop(100%,#FFFFFF));
-webkit-background-size:100% 100px;/* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}

View the example page

]]> http://www.last-child.com/gradient-backgrounds-height/feed/ 0 A quick CSS3 sibling test with the video tag http://www.last-child.com/css3-sibling-with-video-tag/ http://www.last-child.com/css3-sibling-with-video-tag/#comments Tue, 15 Jun 2010 15:56:31 +0000 Ted http://www.last-child.com/?p=240 <video>...</video> <p>...</p> </li> I wanted the paragraph to appear when the video is [...]]]> I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup


<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS


section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

]]> http://www.last-child.com/css3-sibling-with-video-tag/feed/ 1 Dive into HTML5 should be everyone’s intro to the standard http://www.last-child.com/dive-into-html5/ http://www.last-child.com/dive-into-html5/#comments Tue, 20 Apr 2010 22:30:50 +0000 Ted http://www.last-child.com/?p=224 I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

]]> http://www.last-child.com/dive-into-html5/feed/ 1 HTML5 Helpful Links http://www.last-child.com/html5-helpful-links/ http://www.last-child.com/html5-helpful-links/#comments Sat, 03 Apr 2010 18:55:45 +0000 Ted http://www.last-child.com/?p=216 I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

Related articles by Zemanta

]]> http://www.last-child.com/html5-helpful-links/feed/ 1 HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5 http://www.last-child.com/html5-quick-notes/ http://www.last-child.com/html5-quick-notes/#comments Thu, 01 Apr 2010 16:43:27 +0000 Ted http://www.last-child.com/?p=207 I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.
HTML5
Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

  • Ben Galbraith, Co-founder at Ajaxian.com
  • Brad Neuberg, Developer at Google
  • Chet Haase, Adobe Flex SDK team member
  • Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

  • CSS3
  • webGL
  • geolocation
  • web workers
  • web storage
  • web sockets
  • canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

]]> http://www.last-child.com/html5-quick-notes/feed/ 0 HTML5 Resource: HTML5 Doctor http://www.last-child.com/html5-resource-html5-doctor/ http://www.last-child.com/html5-resource-html5-doctor/#comments Wed, 31 Mar 2010 17:54:25 +0000 Ted http://www.last-child.com/?p=204 I used to think HTML5 was just a pipe dream; something that was a nice idea but had no legs. However, the recent advancement of smart phones makes this the perfect approach for building web-based phone apps. Hence, my interest now in joining the HTML5 game.

There’s a great resource for those like me starting to dip their toes into the HTML5 pool: HTML5 Doctor. This web site is a collaboration between some of the biggest and brightest stars of web development: Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The article How to use HTML5 in your client work right now has some interesting suggestions on adding HTML5 functionality to your existing projects. This works hand in hand with using advanced CSS3 rules. Don’t break IE6, but start letting the advanced browsers and platforms give your users more functionality.

Here’s a summary of HTML5 bits that you can begin using today.

  • Use the HTML5 doctype and character set.
  • Use the simplified <script> and <style> elements.
  • Use semantic class names that are representative of the new HTML5 elements. See @boblet’s cheat sheet for more on this.
  • Use block level links.
  • Use the new form attributes and input types.
  • Use the new <audio> and <video> media elements (but make sure they degrade gracefully).
  • Plug the gaps with something like Modernizr.

How to use HTML5 in your client work right now – Richard Clark

Related articles by Zemanta

]]> http://www.last-child.com/html5-resource-html5-doctor/feed/ 0 CSS3 Attribute Selector Presentation http://www.last-child.com/css3-attribute-selectors/ http://www.last-child.com/css3-attribute-selectors/#comments Thu, 09 Oct 2008 20:46:11 +0000 Ted http://www.last-child.com/?p=162 During the fog of a summer cold and pressing deadlines… I gave a presentation today at the Yahoo! Front End Engineering Summit about CSS3 Attribute Selectors. The presentation briefly touched on some of my previous posts on this site as well as a few new concepts and ideas.

Here is the full presentation (HTML): CSS3 Attribute Lovin’. Feel free to copy, share, or do whatever you like with it.

I’ll post some more information on the new topics soon. Right now I’ve got to get back to my massive list of outstanding bugs on my project.

Related articles by Zemanta
]]> http://www.last-child.com/css3-attribute-selectors/feed/ 0 Adding style to your rel attributes with CSS http://www.last-child.com/rel-attribute-display/ http://www.last-child.com/rel-attribute-display/#comments Wed, 25 Jun 2008 15:03:00 +0000 Ted http://www.last-child.com/?p=153 View the finished example: Adding style to your rel link.

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.



We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

Sample HTML Code

  • This link is ignored by search engines (rel="no-follow")
  • (rel="tag")

    • Sample CSS


    a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
    a[rel~="help"] {background-position: 0 -350px ;}
    a[rel~="license"] {background-position: 0 -1347px ;}
    a[rel~="no-follow"] {background-position: 0 -1200px ;}
    a[rel~="tag"] {background-position: 0 -47px ;}

    It’s all fun and games

    I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

    1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
    2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

    So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

    View the finished rel attribute style example.

    Related Information

    ]]>     http://www.last-child.com/rel-attribute-display/feed/ 2     Progressive enhancement of links using the CSS attribute selector http://www.last-child.com/css-attribute-selector/ http://www.last-child.com/css-attribute-selector/#comments Wed, 04 Jun 2008 20:13:00 +0000 Ted http://www.last-child.com/?p=152 Attribute Selector Test Page

    We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

    I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

    So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

    Attribute Selectors

    CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

    There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

    Announce the file type of a link with CSS

    I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

    First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:


    Foo presentation (.pdf, 5kb)

    That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

    We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:


    It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

    Now, let’s look at the CSS:


    a[href$="zip"],
    a[href$="pdf"],
    a[href$="doc"],
    a[href$="exe"],
    a[href$="png"],
    a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;}
    a[href$="png"]{background-position: 0 -48px;}
    a[href$="pdf"] {background-position: 0 -99px;}
    a[href$="mp3"]{background-position: 0 -145px;}
    a[href$="doc"]{background-position: 0 -199px;}
    a[href$="exe"]{background-position: 0 -250px;}

    a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;}
    a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;}
    a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;}
    a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}
    a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;}
    a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;}
    a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}

    See the final test page.

    Pattern matching in the attribute selector

    We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
    Patrick Hunlon has a good summary of the pattern matching:

    • [foo] — Has an attribute named “foo”
    • [foo="bar"] — Has an attribute named “foo” with a value of “bar” (“bar”)
    • [foo~="bar"] — Value has the word “bar” in it somewhere (“blue bar stools”)
    • [foo^="bar"] — Value begins with “bar” (“barstool”)
    • [foo$="bar"] — Value ends with “bar” (“I was at the bar”)
    • [foo*="bar"] — Value has bar somewhere (“I was looking for barstools”)

    Attach icons to anything with CSS

    The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

    Adding an icon to the link

    First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

    There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or foo.zip.

    Adding the descriptive text

    Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
    We will also adjust the color and give it a bit of spacing.

    A big step forward with a small chunk of work

    There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

    This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

    ]]>     http://www.last-child.com/css-attribute-selector/feed/ 5     IE7 and IE8 hack behavior http://www.last-child.com/ie7-and-ie8-hack-behavior/ http://www.last-child.com/ie7-and-ie8-hack-behavior/#comments Wed, 05 Mar 2008 22:59:53 +0000 Ted http://www.last-child.com/ie7-and-ie8-hack-behavior/ We’ve had the luxury of hacks to fine tune Internet Explorer bugs. Internet Explorer 7 disabled the majority of hacks, with the exception of the * hack. This hack allowed you to send a style only to Internet Explorer by prefacing an attribute with an asterisk.


    /*this is for all browsers*/
    #main p {color:black;}
    /* this is for Internet Explorer */
    #main *p {color:red;}
    /*this is ignored by IE7 and will target IE6 */
    #main _p {color:green;}

    This set of hacks allowed us to control IE7 and IE6. However, IE8 does not recognize the * hack. Special IE8 rules will either need to be defined with conditional comments, the Microsoft proposed meta tag, or some new hack to be discovered. Let’s hope the mature version of IE8 will reduce the need for these hacks.

    For more information on the above hacks, visit an earlier post: IE7 Hacks

    ]]>     http://www.last-child.com/ie7-and-ie8-hack-behavior/feed/ 4