attention-catching techniques

4
Drop Caps p:first-child:first-letter { /*typography*/ font-family:'Merriweather', serif; font-size: 3.4em; font-weight: 900; line-height: 45px; color: #202020; /*position*/ float: left; line-height: 45px; padding-top: 8px; padding-right: 6px; padding-left: 3px; }

Upload: lo-mat

Post on 18-Jul-2015

12.237 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Attention-catching techniques

Drop Capsp:first-child:first-letter {

/*typography*/

font-family:'Merriweather', serif;

font-size: 3.4em;

font-weight: 900;

line-height: 45px;

color: #202020;

/*position*/

float: left;

line-height: 45px;

padding-top: 8px;

padding-right: 6px;

padding-left: 3px;

}

Page 2: Attention-catching techniques

Pull Quotes.has-pullquote:before {/* Reset metrics. */padding: 0;border: none;

/* Content */content: attr(data-pullquote);

/* Pull out to the right, modular scale based margins. */float: right;width: 260px;margin: 12px 10px 12px 24px;

/* Baseline correction */position: relative;top: 6px;

/* Typography (30px line-height equals 25% incremental leading) */font-size: 23px;font-style: italic;color: #666666;line-height: 30px;}

<p class="has-pullquote" data-pullquote="2014 will be more a year of attempts than of successful products.">Not quite. At least not at the moment. Most of wearable technology are still in their concept/early stages. “2014 will be more a year of attempts than of successful products. And for a lot of manufacturers it will be a matter of waiting to see what Apple does,” said Carolina Milanesi, a consumer tech analyst at Kantar Worldpanel regarding wearable gadgets. Therefore, most still have some basic drawbacks.</p>

Page 3: Attention-catching techniques

Block Quotes.quote {

/*typography*/

font-family: Georgia, serif;

font-size: 1.5em;

color: #323232;

text-indent: 0;

text-align: left;

padding: 12px 0 0 54px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

/*Block Quote as img*/

background-image: url("/Ybzn96hcq/quotemarks.png");

background-position: -25px -35px;/*quotemarks position*/

background-repeat: no-repeat;

}<blockquote class="quote">{Quote}</blockquote>

Page 4: Attention-catching techniques

Sources• Drop Caps - http://css-tricks.com/snippets/css/drop-caps/

• Pull Quotes - http://miekd.com/articles/pull-quotes-with-html5-and-css/

• Block Quotes - http://css-tricks.com/examples/Blockquotes/