Grow your CSS skills. Land your dream job.

Drop cap with Small Caps first word & CMS

  • # July 11, 2013 at 12:03 pm

    So I can manually do this – http://codepen.io/iknowdavehouse/pen/vpfxz

    Using – p:nth-of-type(1):first-letter for the drop cap and a span for small caps but how would I deal with this within a CMS?

    Ideally I’d need to detect the length of the first word and apply the styling of the span from character 2 until the end of the first word. Possible?

    # July 11, 2013 at 12:12 pm

    Could you not wrap the whole first word in a span and then use `first-letter` on the span?

    # July 11, 2013 at 12:16 pm

    Found this on Stack Overflow

    http://stackoverflow.com/questions/5458605/first-word-selector

    Dunno if it will help.

    # July 11, 2013 at 12:27 pm

    Fake small caps using Georgia with Arial as a drop cap? Please, no.

    But as a side note, you know you can use `column-count` to get that paragraph separated effect, right?

    # July 11, 2013 at 12:30 pm

    Definitely a solution in there somewhere yes – got the first word sorted from that but it doesn’t like the drop cap. Very helpful though, thanks…

    # July 11, 2013 at 12:35 pm

    Hey Chris, don’t worry – that was just for a quick mockup, looks nice with the web fonts I’m using (that I can’t link to in code pen)

    Paragraph effect was also just a quick visual to show that I need it to only apply to the first letter / word of the first paragraph without the user having to add any spans in manually.

    Thanks though, I haven’t actually used column-count before…

    # July 11, 2013 at 12:40 pm

    Which webfonts? I’m having a hard time thinking that a sans-serif drop cap with a serif as the main text type would have any sort of typographic appeal.

    # July 11, 2013 at 3:29 pm

    It was actually inspired by the drop caps in “Type Matters”. I quite like it…

    [Photo](http://www.creativereview.co.uk/images/uploads/2012/02/raised_drop_caps_0.jpg “”)

    # July 11, 2013 at 4:12 pm

    …and nothing wrong with doing so. Funny thing is, design is subject, and different people prefer different styles.

    # July 11, 2013 at 6:19 pm

    That’s clearly what matters.

    Good luck, Dave.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".