Последние записи блогов

Для того чтобы затемнить или осветлить изображение, наложить полупрозрачный цвет на него, можно использовать класс:

.img-bg-color {
background-image:linear-gradient(rgba(0, 188, 212, 0.78), rgba(0, 188, 212, 0.78)),url('http://background_image/');
}

Работает во всех браузерах

Код HTML:

.form-back{
 background: rgba(255,255,255,.5);
  font-size: 14px;
  margin: 0 0 22px;
  overflow: auto;
  padding: 20px;
  text-align:center;
}

Что такое бейдж?
Наглядный пример как это будет выглядеть:


Добавляем HTML код

Код HTML:

<button class="badge1" data-badge="6">Badge Notification Example</button> <br> <a href="" class="badge1" data-badge="27">Badge Notification Example</a>

Теперь стили CSS

Код:

.badge1 {
   position:relative;

...

Код:

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

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

Итак, нужно всего лишь добавить в файл стилей

Код:

#banners a img {opacity:0.3; filter:alpha(opacity=30);}
#banners a:hover img {opacity:1.0; filter:alpha(opacity=100);}

Затем в div'е со счетчиками поставить id="banners"

Какие же чудеса можно сделать с помощью css! В этой статье я хочу рассказать Вам как сделать тень в тексте при помощи css свойства text-shadow (если Вы пользуетесь IE то можете дальше не читать). Тень можно сделать цветной, размытой, расположенной слева, справа, сверху,...