Создать блог

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

    1. Наложение затемнения/осветления/цвета на фоновое изображение CSSshoogrblog

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

      .img-bg-color {
      background-image:linear-gradient(rgba(0, 188, 212, 0.78), rgba(0, 188, 212, 0.78)),url('http://background_image/');
      }
    2. Прозрачный фон для формы на CSSshoogrblog

      Buzz
      1637 Просмотров
      Работает во всех браузерах
      Код HTML:
      .form-back{
       background: rgba(255,255,255,.5);
        font-size: 14px;
        margin: 0 0 22px;
        overflow: auto;
        padding: 20px;
        text-align:center;
      }
    3. Как создать CSS Бейдж (Notification Badge)shoogrblog

      Buzz
      3029 Просмотров
      Что такое бейдж?
      Наглядный пример как это будет выглядеть:
      Нажмите на изображение для увеличения.  Название:	badge-300x153.png  Просмотров:	1527  Размер:	14.9 Кб  ID:	15506

      Добавляем 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;
      ...
    4. Строгое оформление цитат CSSshoogrblog

      31.07.2014 | Дизайн |
      Buzz
      1448 Просмотров
      Код:
      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;
      }
    5. Полупрозрачные счетчики для сайтаshoogrblog

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

      Итак, нужно всего лишь добавить в файл стилей
      Код:
      #banners a img {opacity:0.3; filter:alpha(opacity=30);}
      #banners a:hover img {opacity:1.0; filter:alpha(opacity=100);}
      Затем в div'е со счетчиками поставить id="banners"
    6. CSS: тень текстаsidash

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