Jon Rohan » CSS

Using CSS3′s :target pseudo-class to Make a Slideshow

Jon Rohan — Mon, 28 Sep 2009 18:00:09 +0000

CSS3 has a lot of cool pseudo-classes. For this experiment I used the :target pseudo-class which lets you target css element based on the element targeted at the end of a url, for example.

http://example.com/page#article1

The :target on this page would be the element with the id="article1". So if you wanted to place a red dotted border around article1, then you would use something like this.

:target { 
  border: 1px dotted #FF0000; 
}

So I decided to try an experiment and make a slideshow using nothing but HTML and CSS.

Demo

Sorry, but no IE’s allowed. You prob won’t see anything.

Start Slideshow

Taming CSS

by Jon Rohan

Slide 1 of 3
Next
Never Assume you’ve mastered it

Slide 2 of 3
Last Next
The End

Slide 3 of 3
Last

Code


  
    
      Taming CSS
      by Jon Rohan
    
    Slide 1 of 3
    Next
  
  
    
      Never Assume you've mastered it
    
    Slide 2 of 3
    Last
    Next
  
  
    
      The End
    
    Slide 3 of 3
    Last

The HTML is a basic unordered list. Each list item will be the slide. Inside each slide is the controls to navigate backward and forward. And a span to display the current slide number.

The main CSS that controls the slideshow, is to just display the current slide, like this.

.book-pages li:target {
  display:block;
}

And here’s the rest of the CSS.

.book-pages, .book-pages li {
  list-style-type:none;
  margin:0;
  padding:0;
}
ul.book-pages {
  margin:30px 0;
}
.book-pages li {
  background-color:#111111;
  display:none;
  height:350px;
  margin:0 auto;
  position:relative;
  text-align:center;
  width:510px;
  color: #ffffff;
}
.book-pages div {
  font-size:1.8em;
  padding:120px 25px 0;
  line-height:2em;
}
.book-pages li:target {
  display:block;
}
.book-pages .next {
  position:absolute;
  right:0;
  bottom:-20px;
}
.book-pages .last {
  position:absolute;
  left:0;
  bottom:-20px;
}
.book-pages .slide-info {
  position:absolute;
  bottom:-20px;
  left:44%;
  color:#333333;
}

Creating Triangles in CSS

Jon Rohan — Tue, 15 Sep 2009 17:00:59 +0000

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.

Demo

How it works

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.



.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.
border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

Now for application:

Buongiorno!

This is a classic chat bubble, no images used.



  Buongiorno!
  
  


.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.

  /* IE6 */
.chat-bubble-arrow {
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

CSS Class Naming Semantic Approach

Jon Rohan — Tue, 18 Aug 2009 16:30:16 +0000

The Semantic Web

With the rise of web standards we have seen the rise of the semantic web. This applies to the HTML elements selected as well as the class names chosen for the HTML. When choosing semantic elements and class names you want to pick a name considering the function or meaning of the element as it is on your page, not the position or style of the element.

The Meaning

What exactly am I talking about “meaning” or “function”? This means that when picking a name you want to pick one regardless of where it is, only what it contains or what you’re using it for.

example: Imagine we have some markup that represents a search result

THE BAD WAY


  My Search Result
  This is the best search result
  1 comment 12 views

There is a lot of things wrong with this. To name a few, there are too many unnecessary DIV’s; The class names have style and position specific properties; Since this is a search result, multiples of these makes me want to pass out.

THE SEMANTIC WAY


  My Search Result
  This is the best search result
  1 comment 12 views

using the semantic way, I don’t need as many divs and when I do use a div I try to pick a name that describes what I’m putting in the tag. I’m calling it “meta” because that info is the meta data for that search result. It has nothing to do with the bottom, and it doesn’t need “search-result” in the name because it is a child of search-result anyways.

I also selected h3 and p elements because an h3 refers to a heading, which the title of the search result is certainly a heading, and p, because this is a paragraph of text which describes the search result.

You may ask, “What’s the big deal? It’s all gonna render the same in the browser anyways?” The benefits for semantic code translate into faster development time, javascript traversal becomes easier and it makes me happy. :)

Some more bad names that I have witnessed: .padding5px, .topBorderGreen, .redErrorText. What happens if you want a padding of 4px, or suddenly the border becomes blue, or if the error text becomes yellow. Then you’ll need to go back through all your html and re-name classes. May I suggest names like .content, .important, or .error.

CSS 3 @font-face

CSS Clear Fixes

Jon Rohan — Sat, 01 Aug 2009 19:18:22 +0000

There is a common problem in front end engineering where, when you float an element it is actually removed from it’s parents’ flow. This can cause the elements below the floating element to run into the floating elements. Like below. The green box is floating and it’s parent has the red border. The blue box is below the red border box.

There are a few solutions to this, but I have heard of a new solution that I don’t think is widely published. overflow:hidden;

First lets go through the other solutions.

clear:both

This is the most common that I’ve found, and the one I’ve used the most. The style in this code is inline, but typically you can just create a class called .clear and apply these styles.

In this example you place another element at the end of the child elements in the red border box. This last element gets applied the style clear:both which disallows any floating elements on either side of it.

This can run into problems if you have multi-column layouts this can clear the content in the other columns

clearfix hack

This is essentially taking the previous method and adding to it. I don’t use this very often.

.clearfix :after  {
  content :  "." ; 
  display :  block ; 
  clear :  both ; 
  visibility :  hidden ; 
  line-height :  0 ; 
  height :  0 ; 
} 
 
.clearfix  { 
  display :  inline-block ; 
} 
 
html[ xmlns]  .clearfix  { 
  display :  block ; 
} 
 
*  html .clearfix  { 
  height :  1 % ; 
}

This method works but it feels like a lot of overhead, and now my CSS is non-standard.

overflow:hidden

In this method you apply overflow:hidden to the parent element which is the red border box. And that’s it!

Pretty simple! And it doesn’t require extra div tags. I’ve tested this in IE7, Firefox, Safari, and Chrome works in all.

CSS 3 @font-face

Jon Rohan — Fri, 24 Jul 2009 01:47:54 +0000

Surprisingly embed-able opentype fonts have been included in Internet Explorer since version 4. But with the recent release of Firefox 3.5 and Safari, you can now embed Opentype and Truetype fonts across all major browsers. It’s pretty simple and here’s how it’s done.

First you must define your font, basically tell the browser where to get the font file, and what you’re going to call it.

/* For IE */

@font-face {
font-family: 'Komika Display';
src: url('Komika_display.eot');
}

/* For Other Browsers */

@font-face {
font-family: 'Komika Display';
src: local('Komika Display Regular'),
     local('KomikaDisplay-Regular'),
     url('Komika_display.ttf') format('truetype');
}

@font-face {
font-family: 'Komika Display';
src: local('Komika Display Bold'),
     local('KomikaDisplay-Bold'),
     url('Komika_display_bold.ttf') format('truetype');
font-weight: bold;
}

@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Regular'),
     local('KomikaDisplayKaps-Regular'),
     url('Komika_display_kaps.ttf') format('truetype');
}

@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Bold'),
     local('KomikaDisplayKaps-Bold'),
     url('Komika_display_kaps_bold.ttf') format('truetype');
font-weight: bold;
}

ok, now that you have defined your font, you can use it.

body {
  font-family: Komika Display Kaps, sans-serif;
}

And here’s what it looks like:

This should be the demo font face

The second part of this tutorial is should you use font-face?

This is another call to your server, which when u have a huge website, isn’t a great thing. But compared to most things on a website, this size is tiny.

You have to consider too, for the designers who need the exact font everywhere this is a better alternative than to cut images for every heading on the website, or for the nav. And bonus! The text is still crawl-able by search engines.

Jon Rohan » CSS

Using CSS3′s :target pseudo-class to Make a Slideshow

Demo

Taming CSS

Never Assume you’ve mastered it

The End

Code

Taming CSS

Never Assume you've mastered it

The End

Creating Triangles in CSS

Demo

How it works

CSS Class Naming Semantic Approach

The Semantic Web

The Meaning

My Search Result

CSS Clear Fixes

clear:both

clearfix hack

overflow:hidden

CSS 3 @font-face