Красивый, аккуратный текст сильно влияет на настроение посетителя. Например, когда Вы читаете рукопись длительное время, все привыкли к желтому фону. Или когда Вы читаете вещи, связанные с едой, вы можете заметить много красного цвета. Это потому, что цвет дает знак клеткам мозга, которые связаны с едой. Например, Burger King, KFC, Макдоналдс — все они имеют красный цвет в общем.
В сегодняшней статье, я расскажу о некоторых действительно интересные эффекты типографии вы можете использовать в своих проектах — или просто экспериментировать с ними! Я буду разделять код CSS — просто вставьте их в свою таблицу стилей!
h1 { color: #111; font-family: ‘Helvetica Neue’, sans-serif; font-size: 275px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }
h2 { color: #111; font-family: ‘Open Sans’, sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin: 0 0 72px; text-align: center; }
p { color: #685206; font-family: ‘Helvetica Neue’, sans-serif; font-size: 14px; line-height: 24px; margin: 0 0 24px; text-align: justify; text-justify: inter-word; }
h1 { color: #7c795d; font-family: ‘Trocchi’, serif; font-size: 45px; font-weight: normal; line-height: 48px; margin: 0; }
h2 { color: #7c795d; font-family: ‘Source Sans Pro’, sans-serif; font-size: 28px; font-weight: 400; line-height: 32px; margin: 0 0 24px; }
.subheader { font-size: 26px; font-weight: 300; color: #ffcc66; margin: 0 0 24px; }
p { color: #4c4a37; font-family: ‘Source Sans Pro’, sans-serif; font-size: 18px; line-height: 32px; margin: 0 0 24px; }
a { color: #ff9900; background: #fff4a3; text-decoration: none; }
a:hover { color: #ffcc66 }
h1 { color: #ffffff; font-family: ‘Raleway’,sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; }
h2 { color: #ffffff; font-family: ‘Raleway’,sans-serif; font-size: 30px; font-weight: 800; line-height: 36px; margin: 0 0 24px; text-align: center; }
p { color: #f8f8f8; font-family: ‘Raleway’,sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }
a { color: #c8c8c8; text-decoration: underline; }
a:hover { color: #1c1c1c; text-decoration: underline; }
a,
a:visited { color: #93291b; text-decoration: none; }a:hover { text-decoration: underline }
h1 { font-family: ‘Enriqueta’, arial, serif; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; }
h1 a,
h1 a:visited { color: #333333 }h1 a:hover { color: #93291b; text-decoration: none; }
p { color: #333333; font-family: «Helvetica Neue»,Arial,sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5625; margin-bottom: 15px; }
a.read-more { background-color: #93291b; border: 1px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px #93291b inset; color: #f5f5f5; padding: 5px; }
a.read-more:hover { background-color: #be3523; border-radius: 3px 3px 3px 3px; text-decoration: none; }
h1 { color: #ffffff; font-family: ‘Lato’, sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; }
p { color: #adb7bd; font-family: ‘Lucida Sans’, Arial, sans-serif; font-size: 16px; line-height: 26px; text-indent: 30px; margin: 0; }
a { color: #fe921f; text-decoration: underline; }
a:hover { color: #ffffff }
.date { background: #fe921f; color: #ffffff; display: inline-block; font-family: ‘Lato’, sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 1px; margin: 0 0 30px; padding: 10px 15px 8px; text-transform: uppercase; }
h1 { color: #ff4411; font-size: 48px; font-family: ‘Signika’, sans-serif; padding-bottom: 10px; }
p { font-family: ‘Inder’, sans-serif; line-height: 28px; margin-bottom: 15px; color: #666; }
a { color: #ff4411; transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; }
a:hover { color: #a03c21 }
.date { float: left }
.author { float: right }
.entry-content { border-bottom: 3px solid #666; padding: 0 0 15px 0; margin-bottom: 8px; }
.meta-info { padding: 5px; overflow: hidden; }
.meta-info p { font-family: ‘Fenix’, serif; font-style: italic; color: #666; font-size: 16px; }
a { color: #ff6600; transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; font-family: ‘Muli’, sans-serif; }
a:hover { text-decoration: underline }
h1 { padding-bottom: 15px }
h1 a { font-family: ‘Open Sans Condensed’, sans-serif; font-size: 48px; color: #333; }
h1 a:hover { color: #ff6600; text-decoration: none; }
p { color: #333; font-family: ‘Muli’, sans-serif; margin-bottom: 15px; }
a.more-link { color: white; font-weight: bold; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 3px 10px; background-color: #ff6600; border-radius: 5px; float: right; }
a.more-link:hover { text-decoration: none; background-color: #666; border-radius: 0px; }
h1 { color: #F90B6D; font-family: ‘Open Sans’, sans-serif; font-size: 34px; font-weight: 300; line-height: 40px; margin: 0 0 16px; }
h2 { color: #F90B6D; font-family: ‘Open Sans’, sans-serif; font-size: 24px; font-weight: 300; line-height: 32px; margin: 0 0 14px; }
p { color: #222; font-family: ‘Open Sans’, sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }
a { background: #fff; color: #222; text-decoration: none; }
a:hover { background: #F90B6D; color: #eee; text-decoration: none; }
.post-header { margin-bottom: 30px; position: relative; }
h1 { color: #c9d0d4; font-family: ‘Helvetica Neue’, sans-serif; font-size: 46px; font-weight: 100; line-height: 50px; letter-spacing: 1px; padding: 0 0 40px; border-bottom: double #555; }
p { color: #bbc3c8; font-family: ‘Verdana’, sans-serif; font-size: 16px; line-height: 26px; text-indent: 30px; margin: 0; }
a { color: #c64119; border-bottom: 1px solid #c64119; text-decoration: none; }
a:hover { color: #993213; border-bottom: 1px solid #993213; }
.date { color: #bbc3c8; background: #292929; display: inline-block; font-family: ‘Georgia’, serif; font-style: italic; font-size: 18px; line-height: 22px; margin: 0 0 20px 18px; padding: 10px 12px 8px; position: absolute; bottom: -36px; }
blockquote { background-image: url(http://typespiration.com/wp-content/themes/typespiration/images/quote.png); background-position: 10px 10%; background-repeat: no-repeat no-repeat; padding: 150px 0; }
p { color: #f2f2f2; background: #ff4a4a; font-size: 75px; line-height: 74px; font-weight: 700; margin: 0 5px 24px; float: left; padding: 10px; margin: 0 5px 24px; font-family: ‘Libre Baskerville’, serif; }
.punchline p { background: #f2f2f2; color: #ff4a4a; }
a { color: #adadad; font-size: 25px; text-decoration: none; float: right; font-family: ‘Libre Baskerville’, serif; line-height: 4; }
a:hover { color: #ff4a4a; text-decoration: none; }
h1 { font-weight: 300; font-size: 38px; margin: 0px 0px 0px 0px; line-height: 120%; font-family: ‘Open sans’, sans-serif; }
p { font-family: ‘Open sans’, sans-serif; color: #777777; font-size: 14px; }
a { color: #f20553; text-decoration: none; }
a:hover { color: #D80649; text-decoration: none; }
/* Clearfix */
.cf:before,
.cf:after { content: » «; display: table; }
.cf:after { clear: both }blockquote { padding: 30px 40px; font-family: ‘Bitter’,serif; font-size: 18px; border-left: 5px solid #d0d0d0; margin: 20px 40px; color: #a9a9a9; }
.post { width: 800px; margin: 100px auto; background: #ffffff; -webkit-box-shadow: 0px 0px 25px 10px #a9a9a9; box-shadow: 0px 0px 25px 10px #a9a9a9; border-radius: 3px; }
.header-title { padding: 40px 40px }
.header-title h1 { color: #111111 }
.date { background: #f20553; width: 70px; height: 55px; border-radius: 35px; float: left; margin: 10px 30px 0px 0px; padding: 15px 0px 0px 0px; color: #ffffff; font-size: 24px; font-weight: 900; text-align: center; line-height: 100%; font-family: ‘Open sans’, sans-serif; }
.date span { font-size: 14px; text-transform: uppercase; font-weight: 400; display: block; color: #ffffff; }
.post-content { padding: 0px 40px 40px 40px; line-height: 24px; }
.post-meta { background: #f7f7f7; padding: 30px 40px 40px 40px; clear: both; border-top: 1px solid #d0d0d0; }
.meta-field { font-family: ‘Open sans’, sans-serif; width: 200px; float: left; margin-right: 20px; text-transform: uppercase; color: #111111; font-weight: 700; font-size: 12px; }
.meta-field span { font-size: 10px; font-weight: 400; display: block; color: #777777; text-transform: uppercase; }
h1 { color: #d54d7b; font-family: «Great Vibes», cursive; font-size: 165px; line-height: 160px; font-weight: normal; margin-bottom: 0px; margin-top: 40px; text-align: center; text-shadow: 0 1px 1px #fff; }
p { color: #7a7c7f; font-size: 29px; font-family: «Libre Baskerville», serif; line-height: 45px; text-align: center; text-shadow: 0 1px 1px #fff; padding-top: 20px; }
p.byline { font-style: italic; color: #B6B6B6; font-size: 24px; margin-top: 20px; text-align: center; text-shadow: 0 1px 1px #fff; }
h1 { color: #b48608; font-family: ‘Droid serif’, serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; }
p { color: #eee; font-family: ‘Droid Sans’, sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }
a { color: #b48608; text-decoration: none; border-bottom: 1px solid #4c3a07; }
a:hover { color: #fff; background: #b48608; }
.date { border-top: 1px solid #fff; position: relative; top: 20px; margin-bottom: 30px; }
.date span { color: #000; text-decoration: none; font-style: italic; font-size: 13px; text-align: center; padding: 2px 5px; background: #fff; width: 120px; margin: 0 auto; display: block; position: relative; top: -10px; font-family: «Droid serif», serif; }
a.btn { font-family: ‘Droid serif’, serif; background: #b48608; padding: 4px 7px; color: #000; text-decoration: none; margin: 0 auto; width: 100%; width: 120px; margin: 0 auto; display: block; text-align: center; font-style: italic; }
a.btn:hover { color: #000; background: #fff; }
.left { float: left; margin: 0 5% 30px 0; width: 30%; }
.right { float: right; margin: 0 0 30px 0; width: 30%; }
h1 { color: #CEF0D4; font-family: ‘Rouge Script’, cursive; font-size: 130px; font-weight: normal; line-height: 48px; margin: 0 0 50px; text-align: center; text-shadow: 1px 1px 2px #082b34; }
h2 { color: #a7e8f8; font-family: ‘Julius Sans One’, sans-serif; font-size: 22px; font-weight: bold; line-height: 32px; margin: 0 0 24px; text-shadow: 1px 1px 1px #082b34; }
p { color: #FFFFFF; font-family: ‘Carme’, sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; }
a { color: #CEF0D4; text-decoration: underline; }
a:hover { color: #a7e8f8; text-decoration: underline; }
h1 { color: #333333; font-family: ‘Bitter’, serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }
p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }
p:first-of-type { font-size: 26px; line-height: 36px; margin: 0 0 28px; }
a { color: #c73036; font-family: Georgia, serif; text-decoration: underline; }
a:hover { color: #333333; text-decoration: underline; }
.author { color: #8d8d8d; font-family: Georgia, serif; font-style: italic; font-size: 14px; margin-bottom: 28px; }
.author a { color: #c73036; font-family: «Helvetica Neue», sans-serif; font-weight: bold; text-decoration: none; text-transform: uppercase; }
h1 { color: #fff; font-family: ‘Righteous’, cursive; font-size: 65px; font-weight: normal; line-height: 60px; margin: 10px 0 20px; text-transform: uppercase; text-shadow: 2px 2px 0 #000, margin: 10px 0 24px; text-align: center; }
h2 { font-size: 30px; letter-spacing: -1px; color: #DFBF84; text-transform: uppercase; text-shadow: 1px 1px 0 #000, margin: 10px 0 24px; text-align: center; line-height: 50px; }
p { color: #f6f6f6; font-family: ‘Orienta’, sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; text-align: center; }
a { color: #e8d4a7; text-decoration: none; text-align: right; padding: 15px; font-size: 20px; }
a:hover { color: #da9650; text-decoration: blink; }
h1 { color: #d04764; font-family: ‘Lobster’, cursive; font-size: 36px; font-weight: normal; line-height: 48px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }
h2 { color: #2CA4B0; font-family: ‘Oleo Script’, cursive; font-size: 24px; font-weight: normal; line-height: 32px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }
p { color: #333; font-family: ‘Original Surfer’, cursive; font-size: 16px; line-height: 28px; margin: 0 0 24px; }
a { color: #d04764; font-family: ‘Original Surfer’, cursive; }
a:hover { text-decoration: underline }
h1 { color: #111; font-family: ‘Open Sans Condensed’, sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; }
h2 { color: #111; font-family: ‘Open Sans Condensed’, sans-serif; font-size: 48px; font-weight: 700; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; }
p { color: #111; font-family: ‘Open Sans’, sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; }
a { color: #990000; text-decoration: none; }
a:hover { text-decoration: underline }
.date { color: #111; display: block; font-family: ‘Open Sans’, sans-serif; font-size: 16px; position: relative; text-align: center; z-index: 1; }
.date:before { border-top: 1px solid #111; content: «»; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }
.author { color: #111; display: block; font-family: ‘Open Sans’, sans-serif; font-size: 16px; padding-bottom: 38px; position: relative; text-align: center; z-index: 1; }
.author:before { border-top: 1px solid #111; content: «»; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }
.date span,
.author span { background: #fdfdfd; padding: 0 10px; text-transform: uppercase; }.line { border-top: 1px solid #111; display: block; margin-top: 60px; padding-top: 50px; position: relative; }
.read-more { -moz-border-radius: 50%; -moz-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -webkit-transition: all 0.2s ease-in-out; background: #111; border-radius: 50%; border: 10px solid #fdfdfd; color: #fff; display: block; font-family: ‘Open Sans’, sans-serif; font-size: 14px; height: 80px; line-height: 80px; margin: -40px 0 0 -40px; position: absolute; bottom: 0px; left: 50%; text-align: center; text-transform: uppercase; width: 80px; }
.read-more:hover { background: #990000; text-decoration: none; }
h1,
h1 a,h1 a:visited { font-family: Georgia, arial, serif; font-size: 38px; }
h1 a,h1 a:visited { color: #605833; font-family: Georgia, arial, serif; }
h1 a:hover { color: #92864d; text-decoration: none; }
a,a:visited { font-family: Enriqueta; font-size: 16px; color: #92864d; text-decoration: none; }
a:hover { text-decoration: underline }
p { color: #605833; font-family: Enriqueta; font-size: 16px; padding: 10px 0; }
.post-info { border-top: 1px dashed #70673b; border-bottom: 1px dashed #70673b; font-size: 13px; margin: 15px 0 15px; padding: 3px; text-transform: uppercase; color: #bfb585; }
a.read-more { background-color: #605833; border-radius: 5px 5px 5px 5px; color: white; float: right; font-family: Enriqueta,Arial,sans-serif; text-transform: uppercase; font-size: 16px; padding: 3px 10px; }
a.read-more:hover { background-color: #92864d; border-radius: 5px 5px 5px 5px; text-decoration: none; }
blockquote p { color: #ffffff; font-family: ‘Merriweather’, serif; font-size: 30px; font-weight: 300; line-height: 40px; margin: 0 30px 40px; text-align: center; text-shadow: #2a8d7b -1px -1px; }
p.author { color: #217969; font-family: ‘Helvetica Neue’, sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 3px; text-align: center; text-shadow: #53b4a2 1px 1px; text-transform: uppercase; }
p.author span { color: #217969; font-family: ‘Helvetica Neue’, sans-serif; font-style: italic; font-weight: normal; letter-spacing: normal; text-transform: none; }
Поделись мнением о статье "20 красивых примеров текста на css", предложи свой вариант в комментариях! Спасибо!
