Рамки с информацией

Severniy · 19 января, 2018

CSS

.button {
  display: block;
  position: relative;
  padding: .75em 5em .75em 1em;
  border-radius: .25em;
  margin-bottom: .5em;
  background: #fff;
  box-shadow:
    /* regular bottom */
    0 .0625em .125em rgba(0, 0, 0, .125),
    /* inset bottom */
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    /* category color (left) */
    inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
    /* arrow background (right) */
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.teach-me {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.handyman {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.pick-up-delivery {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.item {
  font-weight: bold;
  color: #000;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
}

.meta {
  margin-left: .25em;
}

.category,
.expiry,
i {
  font-size: 8px;
  font-size: .5em;
  line-height: 2; /* 16 "px" */
}

.expiry {
  font-weight: bold;
}

.expiry:before {
  content: 'ext: ';
  font-weight: normal;
}

.cost {
  position: absolute;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 2em;
  right: 1.125em;
  top: 0;
  line-height: 2.083; /* 50 "px", should be same as button height */
}

.clock {
  display: inline-block;
  position: relative;
  width: 1.333em;
  height: 1.333em;
  margin-left: .333em;
  border: .25em solid #95979d;
  border-radius: 50%;
  vertical-align: middle;
}

.clock:before,
.clock:after {
  content: '';
  display: block;
  position: absolute;
  width: .125em;
  height: .25em;
  background: #95979d;
}

.clock:before {
  left: 50%;
  bottom: 47%;
  margin-left: -.0625em;
}

.clock:after {
  transform: rotate( 135deg );
  left: 63%;
  top: 47%;
}

.chevron {
  display: block;
  width: 1em;
  height: 1em;
  font-size: .75em;
  position: absolute;
  right: .667em;
  top: 50%;
  margin-top: -.6em; /* just eyeballing it */
}

.chevron:before,
.chevron:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, .125);
  width: .5em;
  height: .5em;
  right: .25em;
  top: 50%;
}

.chevron:before {
  transform: skewX( 45deg );
  top: 0;
  box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
  transform: skewX( -45deg );
  bottom: 0;
  box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}

HTML

<a class="button teach-me">
  <span class="item">Teach me to file my taxes</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Tutor my 2 daughters</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">Apr 2, 2013</span>
  <span class="meta cost">$40</span>
  <i class="chevron"></i>
</a>

<a class="button handyman">
  <span class="item">Painting Floor Boards
  </span>
  <span class="meta category">Handyman</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 10, 2013</span>
  <span class="meta cost">$15</span>
  <i class="chevron"></i>
</a>

<a class="button pick-up-delivery">
  <span class="item">Buy composting worms</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Dec 17, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Find a Boler trailer for sale</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">exp: Apr 1, 2013</span>
  <span class="meta cost">$10</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Make my Concordia COMPILATION</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button teach-me">
  <span class="item">Teach me Japanese</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

Образец можно глянуть тут

**Red** · 19 января, 2018

1 час назад, .V.I.P. сказал:

CSS


.button {
  display: block;
  position: relative;
  padding: .75em 5em .75em 1em;
  border-radius: .25em;
  margin-bottom: .5em;
  background: #fff;
  box-shadow:
    /* regular bottom */
    0 .0625em .125em rgba(0, 0, 0, .125),
    /* inset bottom */
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    /* category color (left) */
    inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
    /* arrow background (right) */
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.teach-me {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.handyman {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.pick-up-delivery {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.item {
  font-weight: bold;
  color: #000;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
}

.meta {
  margin-left: .25em;
}

.category,
.expiry,
i {
  font-size: 8px;
  font-size: .5em;
  line-height: 2; /* 16 "px" */
}

.expiry {
  font-weight: bold;
}

.expiry:before {
  content: 'ext: ';
  font-weight: normal;
}

.cost {
  position: absolute;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 2em;
  right: 1.125em;
  top: 0;
  line-height: 2.083; /* 50 "px", should be same as button height */
}

.clock {
  display: inline-block;
  position: relative;
  width: 1.333em;
  height: 1.333em;
  margin-left: .333em;
  border: .25em solid #95979d;
  border-radius: 50%;
  vertical-align: middle;
}

.clock:before,
.clock:after {
  content: '';
  display: block;
  position: absolute;
  width: .125em;
  height: .25em;
  background: #95979d;
}

.clock:before {
  left: 50%;
  bottom: 47%;
  margin-left: -.0625em;
}

.clock:after {
  transform: rotate( 135deg );
  left: 63%;
  top: 47%;
}

.chevron {
  display: block;
  width: 1em;
  height: 1em;
  font-size: .75em;
  position: absolute;
  right: .667em;
  top: 50%;
  margin-top: -.6em; /* just eyeballing it */
}

.chevron:before,
.chevron:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, .125);
  width: .5em;
  height: .5em;
  right: .25em;
  top: 50%;
}

.chevron:before {
  transform: skewX( 45deg );
  top: 0;
  box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
  transform: skewX( -45deg );
  bottom: 0;
  box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}

HTML


<a class="button teach-me">
  <span class="item">Teach me to file my taxes</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Tutor my 2 daughters</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">Apr 2, 2013</span>
  <span class="meta cost">$40</span>
  <i class="chevron"></i>
</a>

<a class="button handyman">
  <span class="item">Painting Floor Boards
  </span>
  <span class="meta category">Handyman</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 10, 2013</span>
  <span class="meta cost">$15</span>
  <i class="chevron"></i>
</a>

<a class="button pick-up-delivery">
  <span class="item">Buy composting worms</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Dec 17, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Find a Boler trailer for sale</span>
  <span class="meta category">Other</span>
  <i class="clock"></i>
  <span class="meta expiry">exp: Apr 1, 2013</span>
  <span class="meta cost">$10</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Make my Concordia COMPILATION</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

<a class="button teach-me">
  <span class="item">Teach me Japanese</span>
  <span class="meta category">Teach Me</span>
  <i class="clock"></i>
  <span class="meta expiry">Mar 12, 2013</span>
  <span class="meta cost">$30</span>
  <i class="chevron"></i>
</a>

Образец можно глянуть тут

А где там эти рамки?

Severniy · 19 января, 2018

В самом первом ответе там и рамка

**Red** · 19 января, 2018

15 минут назад, .V.I.P. сказал:

В самом первом ответе там и рамка

Я не про картинку а как выглядит на форуме )

Severniy · 19 января, 2018

1 минуту назад, Red сказал:

Я не про картинку а как выглядит на форуме )

Я тебе про что?

Заходил в тему та где эта рамка?

Войти

Рамки с информацией

Рекомендуемые сообщения

Severniy

Ссылка на комментарий

Red

Ссылка на комментарий

Severniy

Ссылка на комментарий

Red

Ссылка на комментарий

Severniy

Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Форумы

Файлы

Новости и статьи