Deerua about Coding: последние заметки с тегом «css3»

CSS3: Перевод больших строк в новый рядок (pre-wrap)

Fri, 11 Jun 2010 09:49:26 +0200

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Посмотреть Пример

Комментарии к заметке

Теги:
css3

CSS3: button

Mon, 19 Apr 2010 12:08:32 +0200

Проскала статья на хабре, а красивой кнопке, сделанной на css3.

Нам нужен html:

<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

И сам css:

a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	cursor: pointer;
	outline: none;
}
a.button:hover {
	text-decoration: none;
}
a.button,
a.button b.o,
a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	display: block;
}
a.button b.o {
	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);
}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover b.m {
	background-position: 0 -80px;
}
a.button:active b.m {
	background-position: 0 -160px;
	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button b.m b {
	display: block;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}

ps: работает только в ФФ3.6 и вебкитах последних ;)

Комментарии к заметке

Теги:
css3

CSS3: gradient

Wed, 14 Apr 2010 07:43:39 +0200

То что было в ИЕ всегда, хоть кривое, но было, в правильных браузерах появилось только сейчас

.gradient {
	/* for new webkit browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
	/* for firefox 3.6+ */
	background: -moz-linear-gradient(top,  #ccc,  #000);
	/* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}
.gradient_sample {
	background: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
	background: -moz-linear-gradient(top,  #ccc,  #000); 
}

Комментарии к заметке

Теги:
css3

CSS3: text-shadow

Wed, 13 Jan 2010 16:28:20 +0200

Везде уже модные крутые браузеры, которые хорошо поддерживают CSS3 (часть), картинок на сайтах скоро вообще не будет для декорации и выделения фонтов. Начнём с мелкого, рассмотрим text-shadow:

span{text-shadow: #color left top blur;}

По сути всё просто, указываем цвет, и отступы. Если указать минусовой отступ, тень поедет в другую сторону. Так же есть параметр blur, который тень размывает ;)

Выглядит довольно приятно
Простая тень
Обратная тень
Размазанная тень

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

Код примера выше, выглядит вот-так

.fire {
	text-shadow:0 0 4px white, 
		0 -5px 4px #ff3, 
		2px -10px 6px #fd3, 
		-2px -15px 11px #f80, 
		2px -25px 18px #f20;
}

зы: владельцы говнобраузеров ничего не увидят.

Комментарии к заметке

Теги:
css3