Рационально ли?

MC WEST · October 18, 2010

Сегодня потребовалось создать, вот такой ярлычок с датой:

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

Вот мой способ:

HTML:

<div class="news-img"><img src="/img/post1.png" /><span></span><div class="date">
Oct 18, 2010</div></div>

CSS:

.news-img {
  position: relative;
}

.date {
  padding-right: 24px;
  background: url('../img/date-arrow.png') no-repeat right; 
  position: absolute;
  top: 20%;
}

.date p {
  background: #2da8d2;
  padding: 5px 6px 6px 0;
}

.news-img > span {
  width: 14px;
  height: 55px;
  display: block;
  position: absolute;
  left: -14px;
  top: 20%;
  background: url('../img/date-bg.png') no-repeat;
}

date-bg.png - изображение загибающегося уголка

date-arrow.png - изображение стрелочки справа

psywalker · October 18, 2010

Я бы лично сделал из двух контейнеров, например див, в него спан - правый уголок. Текст по середине.

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

Great Rash · October 18, 2010

Я бы эту ленточку сделал вообще без картинок.

MC WEST · October 18, 2010

Вот так?

HTML

<div class="news-img"><img src="/img/post2.png" /><div class="date1">
Oct 16, 2010<span></span></div></div>

CSS

.date1 {
  padding-left: 14px;
  height: 55px;
  position: absolute;
  top:20%;
  left: -14px;
  background: url('../img/date-bg.png') no-repeat left;
}

.date1 p {
  background: #2da8d2;
  padding: 5px 6px 6px 0;
  float: left;
}

.date1 span {
  width: 24px;
  height: 41px;
  display: block;
  float: right;
  background: url('../img/date-arrow.png') no-repeat right;
}

rash · October 18, 2010

Я бы эту ленточку сделал вообще без картинок.

Гм, интересно.

Даже без фонов? Полностью кроссбраузерно?

Правда интересно узнать, как.

SelenIT · October 18, 2010

Видимо, подразумевалось что-то вроде

<!DOCTYPE html>
<title>Pseudo-banner</title>
<meta charset="windows-1251" />
<style type="text/css">
.date {
	color: #fff;
	background: #08f;
	float: left;
	position: relative;
	font: bold 24px/1 arial, sans-serif;
	text-shadow: #000 1px 1px 2px;
	padding: .25em 10px;
}
.date:before, .date:after {
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	content: '';
}
.date:before {
	border-right: solid #00c 10px;
	border-bottom: solid transparent 10px;
	left: 0;
	bottom: -10px;
}
.date:after {
	border-top: solid #08f .75em;
	border-bottom: solid #08f .75em;
	border-right: solid transparent .75em;
	top: 0;
	right: -.75em;
}
</style>
<div class="date">Oct 18, 2010</div>

только с реальными элементами вместо псевдов — для поддержки многострадального IE7...

rash · October 18, 2010

А, ну да.

А с псевдоэлементами еще и весьма красивый код.

psywalker · October 18, 2010

Прикольно

Sign In

Рационально ли?

Question

MC WEST

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

MC WEST

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information