Красиво оформляем рисунки
В этой статье вы узнаете 5 способов оформления рисунков с помощью CSS:
1. Изображение с тенью
2. Изображение с двойным обрамлением
3. Изображение в рамке
4. Изображение с защитным слоем (watermark)
5. Изображение с подписью...
5 способов как оформить изображение
1. Изображение с тенью
Для этого потребуется всего пару строчек кода и одна дополнительная картинка (тень). Пример.
HTML:
Code
<img class="shadow" src="ваш_рисунок.jpg" alt="" />
CSS:
Code
img.shadow {
background: url(shadow-1000x1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
2. Изображение с двойным обрамлением
Еще один очень простой, но очень хороший способ придать изображению эффектность. Пример.
HTML:
Code
<img class="double-border" src="ваш_рисунок.jpg" alt="" />
CSS:
Code
img.double-border {
border: 5px solid #ddd;
padding: 5px; /*ширина внутренней границы*/
background: #fff; /*цвет внутренней границы*/
}
3.Изображение в рамке
Очень красивый эффект, особенно если сделать красивую рамку. Пару строчек кода и получаем вот такой пример.
HTML:
Code
<div class="frame-block">
<span> </span>
<img src="ваш_рисунок.jpg" alt="">
</div>
CSS:
Code
.frame-block {
background: url(sample.jpg) no-repeat center top;
height:335px;
width: 575px;
display: block;
}[code]
.frame-block {
position: relative;
display: block;
height:335px;
width: 575px;
margin: 0 auto;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}
span { behavior: url(iepngfix.htc) }
4. Изображение с защитным слоем (watermark)
Чтобы создать визуальный эффект (исходная картинка не изменится) изображения с защитным слоем, можно использовать пример, описанный выше. Или попробовать второй способ:
HTML:
Code
<div class="transp-block">
<img class="transparent" src="ваш_рисунок.jpg" alt="" />
</div>
CSS:
Code
.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:0.75;
}
5. Изображение с подписью
Подписанное изображение лучше воспринимается визуально. Поэтому рассмотрим как сделать вот такой пример.
HTML:
Code
<div class="img-desc">
<img src="ваш_рисунок.jpg" alt="" />
<cite>Ваш текст, который будет на изображении...</cite>
</div>
CSS:
Code
.img-desc {
position: relative;
height:335px;
width: 575px;
}
.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;
}