Красивый текст для блога

Понедельник, 22 Декабря 2014 г. 05:16 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

Красивый текст для блога

Используя возможности CSS можно работать с тенью текста, добиваясь удивительных результатов.
Атрибут font-size отвечает за размер шрифта. Например:
в font-size: 2em; вместо 2 подставляем любое другое значение. Если нужен курсив, то сам текст заключаем между "i" и "/i", меняя скобки " " на < >.

Вот примеры и коды некоторых шрифтов:

Текст будет таким

А это его код:

<p style="color: #fff;  font-size: 1.9em; font-family:&amp#39;ChunkFiveRegular&#39;;  margin: 20px auto;  text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 2px 0 #bbb, 0 3px 0 #b9b9b9, 0 4px 0 #aaa, 0 5px 1px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,.15);">Текст будет таким</p>

Текст будет таким

Его код:

<p style="color: #006633;  font-size: 1.9em; font-family:&amp#39;ChunkFiveRegular&#39;; margin: 20px auto; text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 2px 0 #bbb, 0 3px 0 #b9b9b9, 0 4px 0 #aaa, 0 5px 1px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,.15);">Текст будет таким</p>

Текст будет таким

Его код:

<p style="color: #663399;  font-size: 1.9em; font-family:&amp#39;ChunkFiveRegular&#39;; margin: 20px auto;  text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 2px 0 #bbb, 0 3px 0 #b9b9b9, 0 4px 0 #aaa, 0 5px 1px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,.15);">Текст будет таким</p>

Текст будет таким

Его код:

<p style="color: #FE6602;  font-family: &#39;Aclonica&#39;,serif; font-size: 1.9em;  margin: 20px auto;  text-shadow: 0 0px 0 #000000, 0 1px 0 #888888, 0 1.7px 0 #777777, 0 2.7px 0 #FFFFFF, 0 3.7px 0 #555555, 0 4.7px 0 #444444, 0 3.8px 0 #333333, 0 5px 4px #001135;">Текст будет таким</p>

Текст будет таким

Его код:

<p style="color: #4c6271; font-family: Arial; font-size: 1.9em; margin: 20px auto; text-shadow: -2px -1px 0 #ece2ca, -2px -2px 0 #5a5a5a;">Текст будет таким</p>

Текст будет таким

Его код:

<p style=" color: #707070; font-family: Times New Roman; font-size: 1.5em; margin: 0 auto; text-transform: uppercase; text-shadow: 1px 1px 0px #EEE, 2px 2px 0px #707070;">Текст будет таким</p>

Текст будет таким

Его код:

<p style="font-family: Georgia; font-size: 1.9em; text-shadow: 1px 1px 4px red,-1px -1px 4px yellow; color: #663300;">Текст будет таким</p>

Текст будет таким

Его код:

<p style="font-size: 1.9em; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;">Текст будет таким</p>

Текст будет таким

Его код:

<p style="font-size: 1.9em; text-shadow: 1.6px 1.7px 1.7px #000; color: #00CCFF;">Текст будет таким</p>

Текст будет таким

Его код:

<p style="font-size: 1.9em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;">Текст будет таким</p>

Источник: shpargalkablog.ru/2011/02/css-ten-teksta.html

Подготовила для вас Юлия Гурбер

Рубрики:

УРОКИ

Метки: оформление дневника шрифты уроки текст
Понравилось: 2 пользователям

<a href="https://www.liveinternet.ru/users/ermolenko_ludmila/post347255257/"> РљСЂР°СЃРёРІС‹Р№ С‚РµРєСЃС‚ РґР»СЏ Р±Р»РѕРіР°</a><br/>РљСЂР°СЃРёРІС‹Р№ С‚РµРєСЃС‚ РґР»СЏ Р±Р»РѕРіР°

РСЃРїРѕР»СЊР·СѓСЏ РІРѕР·РјРѕР¶РЅРѕСЃС‚Рё CSS РјРѕР¶РЅРѕ СЂР°Р±РѕС‚Р°С‚СЊ СЃ С‚РµРЅСЊСЋ С‚РµРєСЃС‚Р°, РґРѕР±РёРІР°СЏСЃСЊ СѓРґРёРІРёС‚РµР»СЊРЅС‹С… СЂРµР·СѓР»СЊС‚Р°С‚РѕРІ.
РђС‚СЂРёР±СѓС‚ font-size РѕС‚РІРµС‡Р°РµС‚ Р·Р° СЂР°Р·РјРµСЂ С€СЂРёС„С‚Р°. РќР°РїСЂРёРјРµСЂ: 
РІ font-size: 2em; РІРјРµСЃС‚Рѕ 2 РїРѕРґСЃС‚Р°РІР»СЏРµРј Р»СЋР±РѕРµ РґСЂСѓРіРѕРµ Р·РЅР°С‡РµРЅРёРµ. Р•СЃР»Рё РЅСѓР¶РµРЅ РєСѓСЂСЃРёРІ, С‚Рѕ СЃР°Рј С‚РµРєСЃС‚ Р·Р°РєР»СЋС‡Р°РµРј РјРµР¶РґСѓ "i" Рё "/i", РјРµРЅСЏСЏ СЃРєРѕР±РєРё " " РЅР° &lt; >.
Р’РѕС‚ РїСЂРёРјРµСЂС‹ Рё РєРѕРґС‹ РЅРµРєРѕС‚РѕСЂС‹С… С€СЂРёС„С‚РѕРІ:РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј  Рђ СЌС‚Рѕ РµРіРѕ РєРѕРґ:РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј
РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј  Р•РіРѕ РєРѕРґ:РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј
 РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј  Р•РіРѕ РєРѕРґ:РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј

РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј  Р•РіРѕ РєРѕРґ:РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј

РўРµРєСЃС‚ Р±СѓРґРµС‚ С‚Р°РєРёРј  Р•РіРѕ РєРѕРґ:РўРµРєСЃС‚ Р±СѓРґРµС‚... <a href="https://www.liveinternet.ru/users/ermolenko_ludmila/post347255257/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

Юлия_Гурбер обратиться по имени Понедельник, 22 Декабря 2014 г. 15:57 (ссылка)

Благодарю за цитирование!

Ответить С цитатой В цитатник

Среда, 24 Декабря 2014 г. 13:55ссылка

ermolenko_ludmila

Вам спасибо за урок! Все ясно, понятно и красиво! С наступающим Новым годом!

Спасибо за визит! Извините, что сразу не ответила, только сейчас разбираю почту.

11208350 (666x482, 887Kb)

Ответить С цитатой В цитатник Обратиться по имени

vdovuska2013 обратиться по имени Понедельник, 22 Декабря 2014 г. 20:04 (ссылка)

Вот это подарок к празднику. Спасибо Людочка за пост и благодарность автору. Цитирую

Ответить С цитатой В цитатник

Среда, 24 Декабря 2014 г. 13:58ссылка

ermolenko_ludmila

Спасибо за визит! Извините, что сразу не ответила, только сейчас разбираю почту.

11208350 (666x482, 887Kb)

Ответить С цитатой В цитатник Обратиться по имени

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Я - фотограф

РОССИЯ

-Видео

-Цитатник

-Метки

-Ссылки

-Музыка

-Фотоальбом

-Новости

-Поиск по дневнику

-Подписка по e-mail

-Статистика

Красивый текст для блога