20 красивых примеров текста на css
20 красивых примеров текста на css

20 красивых примеров текста на css

Красивый, аккуратный текст сильно влияет на настроение посетителя. Например, когда Вы читаете рукопись длительное время, все привыкли к желтому фону. Или когда Вы читаете вещи, связанные с едой, вы можете заметить много красного цвета. Это потому, что цвет дает знак клеткам мозга, которые связаны с едой. Например, Burger King, KFC, Макдоналдс — все они имеют красный цвет в общем.

В сегодняшней статье, я расскажу о некоторых действительно интересные эффекты типографии вы можете использовать в своих проектах — или просто экспериментировать с ними! Я буду разделять код CSS — просто вставьте их в свою таблицу стилей!

Bold by Rafal Tomal

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; }

Orange Overstated by Chad Pierce

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 }

Don’t Taste Me Bro by Robert Neu

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; }

Legacy by Steve Stead

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; }

Early Night by Rafal Tomal

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; }

Bright Mix by Jon Perez

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; }

SureFire by Jon Perez

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; }

Heart Attack by Martin Hann

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; }

Classic Dark by Jason Weaver

.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; }

The Beauty of Words by Jim Rush

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; }

Arkadian by Jinson Abraham

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; }

Ardella by Joe Beason

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; }

The Truth by Martin Hann

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%; }

Peacock by Kayleen Mendenhall

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; }

Clean Slate by Rafal Tomal

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; }

Relax by Roberto Gomez

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; }

MilkShake by Jon Perez

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 }

Modern Sans by Justin Twerdy

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; }

Corporation by Steve Head

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; }

Sea Algae by Rafal Tomal

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", предложи свой вариант в комментариях! Спасибо!


Добавить комментарий

Ваш e-mail не будет опубликован.