ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Таблицы с информацией на CSS для сайта

Таблицы с информацией на CSS для сайта

Это информационные таблицы, которые будут настроены на разнообразные функций, чтоб информировать пользователя и гостей сайта. к вашему вниманию 5 цветовых вариантов информационных табличек для uCoz. Таблички помогут выделить нужную информацию на вашем сайта. Для более красивого эффекта мы использовали оригинальный шрифт font awesome (как установить шрифт вы можете посмотреть в этой статье - FontAwesome). Чтоб узнать больше о шрифтовых иконках, то переходим на статью где ознакомитесь.

Одно из плюсов, то таблички полностью адаптивны и подойдут под любой дизайн и тематику. Работают по такому принципу, здесь смотря как вы их настроите и поставите на информацию. Это к примеру стали скачивать и появится таблицы, где написано будет, что нужно зарегистрироваться. Пять оттенков цвета дадут вам их использовать по мере возможности, так сказать главные гаммы цвета, как красный и зеленый здесь присутствует.

Приступаем к установке:

Нужно стили на них поставить в CSS:

Код

.update-nag{ display: inline-block; font-size: 14px; text-align: left; background-color: #fff; height: 100%; width:100%; margin-bottom: 10px; border-radius: 3px;
} .update-nag > .update-text{ line-height: 19px;
padding: 6px;
} .redtable { background-color: rgba(192, 57, 43,0.4); color:#c0392b;
} .bluetable{ background-color: rgba(52, 152, 219,0.4); color:#3498db; } .greentable{ background-color: rgba(39, 174, 96,0.4); color:#27ae60; } .orangetable{ background-color: rgba(243, 156, 18,0.4); color:#f39c12; } .whitetable{ background-color: rgba(255,255,255,0.4); color:#000; }

Ставим там где вы считаете нужным их появление.

Оранжевая

Код

<div class="update-nag orangetable"> <div class="update-text"><i class="fa fa-lock" aria-hidden="true"></i> Для <b>скачивания</b> материала нужно зарегистрироваться.</div> </div>

Синяя

Код

<div class="update-nag bluetable"> <div class="update-text"><i class="fa fa-table" aria-hidden="true"></i> Информационные таблички от <b>zornet.ru</b> .</div> </div>

Зеленая

Код

<div class="update-nag greentable "> <div class="update-text"><i class="fa fa-font-awesome" aria-hidden="true"></i> С использованием шрифта <b>FontAwesome</b>. </div> </div>

Красная

Код

<div class="update-nag redtable"> <div class="update-text"> <b><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Важно!</b> При копировании материала нужно указывать источник.</div> </div>

Белая

Код

<div class="update-nag whitetable"> <div class="update-text"> <i class="fa fa-window-restore" aria-hidden="true"></i> Простая белая табличка</div> </div>

PS - перед каждым описанием будет стоять оригинальная кнопка, которую вы сможете сменить, как все сделать, вас ссылка дана в самой статье.

Источник: uon.ucoz.com

08 Февраля 2017 Просмотров: 3382 Комментариев: (17)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 17
Порядок вывода комментариев: Sтранник 08 Февраля 2017 00:18¹ +2 Не плохо получилось ))) изменен* Сопрано 08 Февраля 2017 00:20² 0 Согласен, а можно стилями еще ярче сделать, но тут нужно знать меру, чтоб по стилистике и по дизайн как свои были, как с шаблоном шли. Kosten 08 Февраля 2017 00:22³ 0 habib, ты хоть какие то правила напиши, там типа, что плеер с рекламой, так чтоб гости и пользователи знали, но все выставлять не нужно, хотя смотря какая информация и сколько будет. Sтранник 08 Февраля 2017 00:32⁵ 0 Лучше так оставлю в сайте с описанием )))) Kosten 08 Февраля 2017 00:35⁶ 0 А можно сделать, чтоб они показывались, как описал, что не зарегистрирован и нельзя увидеть код или скачать. FeStemBer 08 Февраля 2017 00:26⁴ 0 Лучше на главное изображение вывести, что в комментариях картинка, так намного понятнее и лучше смотрится. Kosten 08 Февраля 2017 00:36⁷ 0 Здесь как раз поменял, так как на темном фоне они намного лучше смотрятся, хотя изначально думал, что под светлый сделаны, и там и там должны визуально хорош смотреться. Sтранник 08 Февраля 2017 00:36⁸ 0 Цитата Kosten () А можно сделать, чтоб они показывались, как описал, что не зарегистрирован и нельзя увидеть код или скачать. Можно если знаешь Как сделать )))) Kosten 08 Февраля 2017 00:45⁹ 0 Вот как раз не знаю, может кто мануал небольшой по этой теме напишет. -SAM- 16 Мая 2017 04:26¹⁰ 0 Кто захочет на форум прикрутить такого рода bb-коды (без поддержки HTML), чтобы стильно оформлять свои сообщения с такими табличками, то вот пример как это можно сделать. Kolinkor 16 Мая 2017 04:38¹¹ 0 Здесь нужно еще подключить шрифтовые иконки FontAwesome, хотя можно и без них, но смысл таблица нести не так будет. -SAM- 16 Мая 2017 04:46¹² 0 В материале про это написано же. -SAM- 16 Мая 2017 05:00¹³ 0 А вообще, можно и по старинке картинку залить, да и не подключать fa... их нецелесообразно подключать, если на сайте только используются эти таблички, то есть нет смысла подключать fa, если еще что-то в дизайне не идёт от этого набора шрифтовых иконок (если они - как часть шаблона). Kolinkor 16 Мая 2017 05:18¹⁴ 0 Можно и так сделать, но сейчас больше видно, что шрифтовыми пользуются, хотя предпочитаю на ссылках, все же шрифты могут и глюк дать. -SAM- 16 Мая 2017 05:30¹⁵ 0 В этом и суть, что у кого эта библиотека подключена и выступает в качестве части дизайна сайта - тогда есть смысл ней пользоваться по полной, кому просто хочется такие таблички прикрутить и шрифтовых иконок больше нигде нет, то уже получаются довески и куда более правильно просто сделать картинкой. И правильно написали, что могут дать глюк - если уж заливать, то всё на свой сайт, а не чтобы были ссылки на другие источники (не работает тот источник - функционал отваливается у вас на сайте) + если подключать шрифтовые иконки, то без поддержки js они работать не будут на сайте, в отличии от картинок. Прелесть FA в том, что они векторные - можно легко поменять размер и перекрасить в нужный цвет. Как вариант - поставить FA, настроить блок этот, картинку снять с иконки (нужного размера и цвета) и залить себе потом в файловый менеджер (это чтобы FA не подключать). Kosten 16 Мая 2017 06:56¹⁶ 0 А, есть вообще еще другие шрифтовые иконки? Sтранник 16 Мая 2017 06:57¹⁷ 0 Незнаю :)