3

I'd like to recreate the menu effect seen at http://www.thedecoratorsource.co.uk using CSS fonts and drop caps.

I know that I can use

p.introduction:first-letter {
font-size : 300%;
}

which will give me the first word with a larger first characerer but I want to apply it to each word. I'm guessing there isn't a way to do this with CSS(3). Would my best bet with javascript? I've already got Moo on the page so this would be my preferred method.

I don't want to add extra HTML to my links to achieve this.

Thanks

Jeepstone
  • 2,591
  • 5
  • 22
  • 38

6 Answers6

2

This isn't drop caps (that's when you have a big capital letter at the start of a paragraph that takes three or four lines). This is Small Caps.

Easiest way is to find a small caps font, and capitalise every word. Sadly the only font I can find on google web font api that has small caps might not have the right character:

http://code.google.com/webfonts/family?family=Walter+Turncoat&subset=latin

Spacedman
  • 92,590
  • 12
  • 140
  • 224
  • Close but the font-variant: small-caps does the job, but the font needs to be suitable. Closest answer so far though. I'll see if anyone can recommend a font. – Jeepstone Jan 18 '11 at 17:02
1

Why not try this in your menu:

li {text-transform: uppercase;}
li:first-letter { font-size:150%; }
jacobangel
  • 6,896
  • 2
  • 34
  • 35
0

It looks like Lettering.js would help with that, although it's for jQuery, not Moo.

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
0

you can use toUpperCase(); javascript function to make all the letters capitalize. Example:

var str="This is my 1st new tutorial 123";
var a1 = str.toUpperCase();
document.write(a1);

so, in your case i would grab all the elements' contents that you wish to capitalize and apply the toUpperCase() function to the letters.

Mootools Version: HTML:

<ul id='mylist'>
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 4</a></li>
    <li><a href='#'>test 5</a></li>
</ul>

Mootools JS:

$$('#mylist li').each(function(el) {
    console.log(el.getElement('a').innerHTML.toUpperCase());
});

Here is the jsfiddle

KJYe.Name
  • 16,969
  • 5
  • 48
  • 63
0

Based on these other answers, I'm not sure I understand the question. BUT, based on my understanding this must be done with JS if you want that exact effect. Not much moo to it though.

This will add a span around the first letter of each word and apply a class to it. You can do whatever you want to the first letters in your css after that.

  $$('p.introduction').each(function(el) {
    var text = el.textContent || el.innerText;
    el.innerHTML = text.replace(/\b(\w)([^\b]*?)/g, function(match, first, remainder) {
      return ['<span class="first-letter">', first, '</span>', remainder].join('');
    });
  });
Hemlock
  • 6,130
  • 1
  • 27
  • 37
0

Try this:

font-variant: small-caps;

It works in all browsers.

Salas
  • 1