» »

Красивая таблица с информацией CSS3

Красивая таблица с информацией CSS3

Красивая таблица с информацией на CSS3. Под нее можно создать что угодно, от сводки правил, до кнопок и прочего функционала для сайта. Я сделал ее под кнопку скачать. И так, код таблицы легко поменять и нету не чего сложного. Для нормальной работы таблицы нужны шрифтовые иконки. Kosten много раз говорил как из поставить, не вижу смысла повторять.

Код

Код
<div class="swettertable redcolor15">  
  <span><i class="fa fa-download"></i></span>  
  <p>Вы можете скачать данный материал с нашего ресурса.

<?if($FILE_URL$)?><a href="$FILE_URL$" class="swetterbutton ahref" title="Скачать с нашего ресурса">Скачать <i class="fa fa-arrow-down" aria-hidden="true"></i></a> <?else?><a href="$RFILE_URL$" class="swetterbutton ahref" title="Скачать безопасно">Скачать <i class="fa fa-arrow-down" aria-hidden="true"></i></a><?endif?></p>  
   
  </div>  
  <style>  
/* Автор Александр Г. */  
  .swetterbutton{  
  text-decoration:none;  
  text-align:center;  
  padding:12px 48px;  
  border:none;  
  -webkit-border-radius:5px;  
  -moz-border-radius:5px;  
  border-radius: 5px;  
  font:15px Arial, Helvetica, sans-serif;  
  font-weight:bold;  
  color:#ffffff;  
  background:#00aeff;  
  -webkit-box-shadow:3px 3px 20px #bababa, inset 0px 0px 1px #ffffff;  
  -moz-box-shadow: 3px 3px 20px #bababa, inset 0px 0px 1px #ffffff;  
  box-shadow:3px 3px 20px #bababa, inset 0px 0px 1px #ffffff;  
  opacity:0.8;  
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
  filter: alpha(opacity=80);  
  }  
  .swettertable {  
  position: relative;  
  padding: 3em;  
  color: #fff;  
  width: 100%;  
  height: 150px;  
  background: #303030;  
  text-align: center;  
  margin-bottom: 1em; }  
  .swettertable.redcolor15 {  
  background: #e55137; }  
  .ahref:hover {text-decoration: none; color: white;}  
  </style>

Возможно что-то буду совершенствовать, но это не факт.
Автор: Александр Г.
2018-03-09 Просмотров: 821 Комментарий: (8)

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

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

Комментарий: 8
Kashirina
Kashirina 2018-03-09 21:541
0
Обьясните зачем для 1 кнопки делать такую огромную платформу ....
Kosten
Kosten 2018-03-09 22:152
0
Но, может у кого то место позволяет.
Kashirina
Kashirina 2018-03-09 22:383
0
Ааааа ... Ну может быть ))
-SAM-
-SAM- 2018-03-10 08:394
0
Нет тут никакого авторского решения. А кто выложил - рипер и плагиатор (вот и так далее, смотрим репутацию... бесполезно просто что-то объяснять таким).
Это как тонкий намёк на то, что он его не делал - просто стили выдрал откуда-то и присобачил себе (и названия классов тонко на это намекают). Ну, а кто считает это красотой - очень сомнительно, но кто я такой, чтобы утверждать обратное - это субъективно.
bundy
bundy 2018-03-10 14:035
-1
Это не рип. Я сам делал, если найдешь оригинал, то желаю удачи.
bundy
bundy 2018-03-10 14:066
-1
И этот материал - это только практика. Я учусь еще, а это просто выложил что-бы получить оценку. А баны обходить могу вечно, у меня запас почт безграничен.
bundy
bundy 2018-03-11 13:107
0
По сути я ей нашел такое применение, можно под фон < body > подогнать и будет довольно красиво смотреться в материале.
(Фон на скриншоте "Темно-мандариновый" #ffa812 )
bundy
bundy 2018-03-11 13:118
0
avatar