Шаблон для выделения текстов в статьях сайтов

Шаблон для выделения текстов в статьях сайтов

Сообщение k0ttee »

Современный плоский дизайн с неестественно-яркими цветами, острыми углами блоков и тенями - как подвешенные над поверхностью цветные бумажки.
Для всех соскучившихся по такой штуке как скевоморфизм, выкатываю шаблон для выделения текстов в статьях сайтов.

Такое решение не будет выбиваться из плоского дизайна, по тому как объёмом не обладает. Его фишка в цветах:
фон бумажки - слоновая кость
текст - классические чернила
поля - цветом полей

Шрифтом Verdana абзацы ровно встают в строки. Малый вес кода обеспечивает сею симпатичность.

Шаблон для выделения текстов в статьях сайтов.png
Шаблон для выделения текстов в статьях сайтов.png (47.56 КБ) Просмотров: 24


Код: Выделить всё
<style>
body{background:#999}
.note{padding:.6em .1em 1em 4.1em;border-radius:.2em;background: linear-gradient(90deg,rgba(255,255,255,0)1.8em,rgba(135,206,235,.5)2em)2em 0 repeat-y,linear-gradient(rgba(255,255,255,0)1.9em,rgba(0,0,0,.15)2em)0 0;background-size:2em 2em;background-color:ivory;color:#002366;font:16px/2 'Trebuchet MS',Verdana,sans-serif;text-indent:2em}
.code{padding:.6em 1em .3em;border-radius:.2em;background:linear-gradient(rgba(255,255,255,0).9em,rgba(0,0,0,.15)1em)0 0,linear-gradient(90deg,rgba(255,255,255,0).9em,rgba(0,0,0,.15)1em)0 0;background-size:1em 1em;background-color:ivory;color:#002366;font:italic 16px/2 'Trebuchet MS',Verdana,sans-serif}
</style>
</head>
<body>
<p class='note'>На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах. На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах. На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах. На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах. На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах. </p>
<p class='note'>На полях ставят отметки. А как говорил один инженер, помечает собачка кустики. Вот так вот. Быстренько запиливаем по красоте и стартуем. Код можно допилить на ходу - важно чтобы работало быстро во всех браузерах.</p>
<p class='code'>
&lt;? echo 'hello world'; ?><br>
&lt;? echo 'hello world'; ?><br>
&lt;? echo 'hello world'; ?><br>
</p>
</body>

Аватара пользователя
k0ttee

 
Группа: Супермодераторы
Сообщения: 9257
Рефералы: 2
Зарегистрирован: 02 май 2014
Откуда: пам пари ру рам
Средств на руках: 7.15
Статус: бубны козыри
Спонсор
 
Re: Шаблон для выделения текстов в статьях сайтов

Сообщение birds »

чето не зашло мне это сочетание, может конечно под конец рабочего дня подустал... завтра гляну если не забуду на свежую голову.
Аватара пользователя
birds
Администратор
 
Группа: Администраторы
Сообщения: 19039
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: 8.60
Статус: летящий вперед
Спонсор
 

Вернуться в Верстка, дизайн, графика

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 11