Alexander Sperl » css http://www.alexandersperl.de Thu, 24 Feb 2011 23:50:04 +0000 en hourly 1 http://wordpress.org/?v=3.1 Don’t use the emboss effect on body text http://www.alexandersperl.de/2010/11/dont-use-the-emboss-effect-on-body-text/ http://www.alexandersperl.de/2010/11/dont-use-the-emboss-effect-on-body-text/#comments Mon, 15 Nov 2010 09:08:27 +0000 Alexander Sperl http://www.alexandersperl.de/?p=715 Why? Well, I’m almost certain that it messes up the readability of longer texts.

I came across a couple of websites recently that use the following CSS bits on dark body text

text-shadow: 0 1px 0 #fff;

or some such thing. Of course, sometimes including the vendor-specific extensions as well.

Please, don’t that. I pretty sure that it makes body text harder to read and I’m not quite sure whether it really looks that good. I mean, I haven’t got any scientific studies at hand and it somehow looks good in the beginning but once you try to read it, your eyes are complaining sooner or later. At least my eyes are.

I will conduct a non-representative study about this but until then: Please only use this effect for headlines. Please!

Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2010/11/dont-use-the-emboss-effect-on-body-text/feed/ 2 Oncoming: New Semester http://www.alexandersperl.de/2010/10/oncoming-new-semester/ http://www.alexandersperl.de/2010/10/oncoming-new-semester/#comments Tue, 12 Oct 2010 20:13:50 +0000 Alexander Sperl http://www.alexandersperl.de/?p=681 Oh my, it’s that time of the year again. The semester is almost here. Knee-deep in preparation work again. Here’s an overview of the courses I’m going to give this semester:

Presenting Content – Group 1 (LA) on Wednesdays

Presenting Content – Group 2 (MA) on Thursdays

Techniques of Scientific Work on Fridays (three dates)

Web Technologies on Mondays

Starting tomorrow we’ll—Anna Maria Schäfer and I that is—be holding an HTML/CSS preparatory course until Friday for MA Linguistics and Web Technology students.

Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2010/10/oncoming-new-semester/feed/ 0 Double Feature: What I love about Weebly – What I hate about Weebly http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/ http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/#comments Wed, 14 Jul 2010 08:00:54 +0000 Alexander Sperl http://www.alexandersperl.de/?p=635 When I confronted my course Presenting Content this semester with the basics of HTML and CSS, they and I had a couple of frustrating sessions. I’m doing this for some semesters now and never had quite such an experience. I was thinking: Am I this bad a teacher to not get the stuff across (it’s not that hard, after all) or did I hint at Weebly.com too early and most of the classes just switched off as early as this?

It also made me think about Weebly.com itself, I mean, from the perspective of a web designer. So here are two lists: “What I love about Weebly” and “What I hate about Weebly”.

What I love about Weebly

  • quick results that look nice
  • you can concentrate on the content more
  • no need to have a deep insight into HTML and CSS (which was the killer reason for most in my courses this semester to use it)
  • no need to deal with HTML and CSS at all if you don’t want to
  • it doesn’t need to be tweaked to get a ‘normal’ website, like you would tweak WordPress (you know, get rid of the calendar, the comments on each page and so on)
  • you have a couple of options that would require some work to include it in an HTML document of your own (Google maps, YouTube videos, etc.)
  • it’s free (and in most cases you don’t need the pro features)

What I hate about Weebly

  • invalid HTML (try validating a Weebly page… I mean, <font> in an XHTML 1.1 document? <style> within the <body>? Come on!)
  • invalid CSS
  • you can still do everything wrong concerning a clearly structured layout
  • no need to deal with HTML and CSS at all if you don’t want to
  • the fact that you can include so many different (multimedia) elements leads to the fact that they are often used in abundance, i.e. too often
  • using Weebly is not a guarantee to create a usable and well designed website

It might seem a bit harsh to only pick up Weebly and thrash it like this, however, I will do the same with other website generators with a focus on websites and not so much on blogs or wikis (like webs.com, which also has a free option, or squarespace.com, which doesn’t have a free option) in some of the next courses. If you have any suggestion which generators I should have a look at, please feel free to write a comment.

Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/feed/ 1 Styling the VCT’s Microprojects Feed Box http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/ http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/#comments Sat, 03 Apr 2010 19:44:57 +0000 Alexander Sperl http://www.alexandersperl.de/?p=534 Welcome to the first episode of a series of HTML/CSS tutorials that deal with the application of CSS techniques in a real life setting. The series is supposed to be used in an upcoming course at the University of Marburg, students will be able to try to figure out how to do this.

And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

And here’s how the result will look like:

Microprojects Feed Box result

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/feed/ 0 7 minutes to spare… http://www.alexandersperl.de/2007/11/7-minutes-to-spare/ http://www.alexandersperl.de/2007/11/7-minutes-to-spare/#comments Thu, 22 Nov 2007 12:21:26 +0000 Alexander Sperl http://www.alexandersperl.de/blog/2007/11/22/7-minutes-to-spare/ … and you really, really, really don’t know what to do? Well, let’s see how many CSS properties you can name.

This is how I did in this quiz:

61

Where did that time come from???

Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2007/11/7-minutes-to-spare/feed/ 0 Interesting Links #1 http://www.alexandersperl.de/2006/06/interesting-links-1/ http://www.alexandersperl.de/2006/06/interesting-links-1/#comments Sun, 11 Jun 2006 12:04:00 +0000 Alexander Sperl http://www.alexandersperl.de/blog/?p=4 I decided to post links in my blog from time to time that are too interesting to get thrown into my del.icio.us vault. Let’s start off with three of them:

  1. There are a lot of things to be discovered at Dan Fietsam’s site, although there are far too many Bud ads there. At least for someone from Germany like me. No offence… ;)
  2. Molly Holzschlag talks about the future of web standards at Vitamin. It’s a must read.
  3. Interesting navigation solution: XRS Nowe Media from Poland.
Save this to:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MisterWong
  • Netvibes
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
]]> http://www.alexandersperl.de/2006/06/interesting-links-1/feed/ 0