• PNG (2.39Мб)
• PDF (9.76Мб)

Эффект тени

Добавляет простую тень к изображению, используя изображение с тенью и внутренний отступ.

HTML:

<img class="shadow" src="sample.jpg" width="575" height="335" alt="" />

CSS:

img.shadow{
  background: url(shadow-1000x1000.gif) no-repeat right bottom;
  padding: 5px 10px 10px 5px
}

Демо

Эффект двойной рамки

HTML:

<img class="double-border" src="sample.jpg" width="575" height="335" alt="" />

CSS:

img.double-border{
  border: 5px solid #ddd;
  padding: 5px; /*Размер внутренней рамки*/
  background: #fff; /*Цвет внутренней рамки*/
}

Демо

Эффект декоративной рамки

Эффект заключается в наложении на изображение полупрозрачной рамки. Более подробно об этом способе можно почитать здесь. Также необходимо, одним из возможных способов, решить проблему отображения полупрозрачных PNG изображений в IE6.

HTML:

<div class="frame-block">
  <span>&nbsp;</span>
  <img src="sample.jpg" width="575" height="335" alt="" />
</div>

CSS:

.frame-block{
  position: relative;
  display: block;
  width: 575px;
  height:335px
}
.frame-block span {
  background: url(frame.png) no-repeat center top;
  width: 575px;
  height:335px;
  display: block;
  position: absolute
}

Демо

Эффект водяных знаков

Данный эффект можно получить путём увеличения прозрачности основного изображения и использования в качестве фона изображения с водяным знаком.

HTML:

<div class="transp-block">
  <img class="transparent" src="sample.jpg" width="575" height="335" alt="" />
</div>

CSS:

.transp-block{
  background: #000 url(watermark.jpg) no-repeat;
  width: 575px;
  height: 335px
}
img.transparent{
  filter:alpha(opacity=75);
  opacity:0.75
}

Демо

Описание изображения

Добавляет небольшое описание к изображению.

HTML:

<div class="img-desc">
  <img src="sample.jpg" width="575" height="335" alt="" />
  <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS:

.img-desc{
  position: relative;
  display: block;
  width: 575px;
  height:335px
}
.img-desc cite{
  background: #111;
  filter:alpha(opacity=55);
  opacity:0.55;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 555px;
  padding: 10px;
  border-top: 1px solid #999
}

Демо

Источник: 5 Ways to Spice up Your Images with CSS

Шаг 1: Создание прозрачного PNG изображения

Для создания можно использовать Gimp или Photoshop и набор бесплатных кистей:

• Free Grunge Style Brushes
• BrushKing Grunge Set 1 : 14 Hi-Res Brushes
• GetBrushes.com

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

Поэтому мы будем создавать эффект для текста на черном фоне.

Шаг 2: CSS

Теперь добавим нужный эффект к элементу <h1>. Для этого необходимо добавить в содержимое заголовка, после текста, элемент <span>.

<h1>Какой то заголовок в стиле грандж<span></span></h1>

Теперь CSS. Элемент <span> имеет абсолютное позиционирование, а <h1> относительное. Созданное ранее изображение, является фоном элемента <span>, что и придает желаемый стиль тексту.

h1 {
    position:relative;
    color:#aeef33;
    font-family:Georgia
}
h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('grunge.png')
}

Результат перед вами.

Какой-то заголовок в стиле грандж

Оригинал: Add grunge effect to text using simple CSS

Монохромный дизайн

Монохромный дизайн — это дизайн с одним ключевым цветом. Вы выбираете один базовый цвет, а затем делаете его более светлым или более темным для получения различных оттенков.

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

Есть несколько инструментов готовых помочь вам в выборе цветов.

Преимущества монохромного дизайна

• Монохромную палитру очень легко сделать. Достаточно выбрать один цвет и сделать нужные оттенки.
• Отсутствие цветов, которые не сочетаются друг с другом.
• Дизайн становится более простым. Простота расширяет цветовую гамму в самой конструкции. Нет конкурирующих цветов, что делает дизайн более приятным для восприятия.
• Достаточно просто выделить важные элементы. Хотя основная часть дизайна должна быть выполнена с использованием выбранной монохромной палитры, вы можете использовать контрастные цвета для одного или двух элементов, которые вы хотите выделить. Например, вашу RSS иконку.

Минусы монохромного дизайна

• Меньше разнообразия в дизайне. Отсутствие разнообразия и контраста снижает визуальный интерес. Пытаясь создать простой дизайн, в итоге вы можете получить визуально скучный сайт. Вы должны добиться того, чтобы элементы выглядели нормально.
• Трудно читать текст. Нередко бывает недостаточно контраста между текстом и фоном. Будьте с этим особенно осторожны и убедитесь, что ваша страница легко читается.
• Разочарование. Ограниченная палитра может разочаровать вас в начале работы и вы вероятно захотите добавить больше цветов. Иногда это может быть правильным решением, но не всегда. Работа с монохромной палитрой требует некоторого времени для привыкания.

Примеры монохромного дизайна

Ахроматический дизайн

Развитием монохромного является ахроматический дизайн. В ахроматическом дизайне присутствуют лишь оттенки серого.

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

Примеры ахроматического дизайна

Достаточно трудно найти в интернете примеры с абсолютно ахроматическим дизайном. В большинстве примеров присутствуют дополнительные цвета для выделения некоторых элементов и для избавления от монотонности.

Вывод:

Хороший дизайн не подразумевает множество цветов. Нет необходимости использовать все цвета радуги при создании дизайна сайта.

Если Ваш блог является достаточно простым или у вас «легкие» для восприятия тексты, то монохромной или ахроматический дизайн то, что вам нужно.

А что вы думаете о монохромном дизайн?

Оригинал: Make The Web a Less Colorful Place

Минимализм = Меньше загроможденности = Меньше отвлекающих элементов = Больше внимания на важные вещи.

Но, действительно ли простые дизайны, создаются в соответствии с этими правилах? Не было ли у вас иногда ощущения, что дизайнер просто соединил два дива вместе и назвал это минимализмом.

Минимализм в дизайне блога

Читабельность приоритетна для большинства блоггеров. Т.к. если пользователю трудно прочитать ваш пост, то стоило ли его писать? Поэтому в попытке увеличить читабельность, возникает желание убрать все лишнее.

Это все просто, однако вот еще один момент, который вы скорее всего знаете, но не думаете об этом, когда речь идет о минимализме.

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

Минимализм является средством, а не целью

Цель в данном случае — это сайт, который позволяет пользователям с легкостью находить нужную им информацию и в то же время производит впечатление при первом посящении. Если минимализм является средством достижения этого, то в этом случае все хорошо.

Не стоит делать минимализм самоцелью. Минимализм имеет свои минусы в определенных ситуациях, а конец приходит только тогда, когда вы достигли все свои цели, какими бы то ни было средствами.

Итак, если вы выбираете тему для блога, вы хотите чтобы она была простой, или же вы хотите чтобы она была удобной?

Оригинал: «Minimalism» Is Just Designer Speak for Laziness