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

CSS: математические операции в величинах

Wed, 31 Mar 2010 09:07:04 +0200

Сутра был удивлён, css хорошо для всех величин понимает простые математические операции.

.menu div div{
	width: 1000px-28px;
}

зы: работает на ура даже в ИЕ6 и ниже.
ззы: думал что есть только деление для фонтов ;)

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

Теги:
css

Утилиток нужных пост: CSS и JS уменьшаторы (minifier)

Wed, 27 Jan 2010 17:46:03 +0200

Последнее время часто пользуюсь, и так же часто не могу найти рабочие сайты. То домен пропал, то домен украли, то тупо сайт лежит. По этому сделал два зеркала для себя (если кому-то ещё пригодится, я не против ;) + любимый сайт для сжатия скриптов.

CSS Formatter and Optimiser (csstidy 1.3)

Dean Edwards p.a.c.k.e.r 3.1

JS Compressorrater

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

Теги:
css
javascript
УПП > tools

CSS: СЕО-колонка :)

Tue, 26 Jan 2010 18:56:45 +0200

SEO-колонка спросите вы? Ничего тут страшного нет. Это просто колонка которая идёт за контентом. По сути контент поисковик видит сразу, и сайт более СЕО-дружен ;)

<html>
	<head>
		<title>Column page</title>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<span>text</span>
			</div>
			<div class="sidebar">
				<span>text</span>
			</div>
		</div>
	</body>
</html>

Как же сделать колонку?

указываем длину текстового блока (для чтения рекомендовано не больше 600px на 14й фонт)
указываем блоку маржин с нужной стороны в длину колонки
оба летают слева, а у колонки левый маржин 100%

В цсс всё выглядит вот так

.wrapper {
	width: 960px;
	margin: 0 auto;
	clear: both;
	position: relative;
	zoom: 1;
}
.wrapper span{
	display: block;
	margin: 30px;
}
	.content{
		float: left;
		margin-left: 230px;
		width: 730px;
		position: relative;
	}
	
	.sidebar{
		margin-left: -100%;
		width: 230px;
		float: left;
		}

Работает даже в ИЕ, проблем нет (нужно только добавить доктайп), а для правой колонки:

колонка: маржин справа -длина колонки
контент: маржин справа длина колонки

.rightcolumn 
	.content{
		margin-left: 0;
		margin-right: 230px;
	}
.rightcolumn 
	.sidebar{
		margin-left: -230px;
	}

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

ps: всё просто и не сложно ;) Релейтивы и зум 1 - кажись не надо ;) но пускай полежат.

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

Теги:
css

CSS: outline такой outline - или делаем равномерный фон для текста

Thu, 21 Jan 2010 12:36:49 +0200

Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво... Что бы нам помочь, сделано свойство в CSS outline. О нём писал ранее, в статье о CSS debag'e.

Что же за зверь такой, этот outline - это внутренний бордер элемента, который не влияет на параметры длины элемента... Параметры такие же как у бордера

* { outline: #outline-color   outline-style outline-width px }

Для примера посмотрим на текст с разными свойствами:

Просто перенос	line-height: 90%	outline: 1px solid red	font-family: 'Calibri'
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО

Вывод, вопрос "можно решить":

через line-height, но когда у текста паддинг выглядит не очень
через подстановку другого фонта, и опять паддинг
с помощью outline. Казалось бы, задача решена, но есть одно но, или даже два - это старые ИЕ и тупая Опера, которая с этим свойством делает что хотит. Ещё иногда в ФФ при больших значениях падинга текста, и аутлайне, появляются артефакты, но они лечатся с помощью -moz-outline-offset (достаточно указать смещение на полпихеля)

Есть ещё одна проблема, фон картинкой будет выглядеть ужасТно. Что же делать с толпой недобраузеров и фоновой картинкой? Тут приходится хитрить. Для этого можно просто использовать 3 спана (position: relative;), 2 которых смещены друг от друга в разные стороны + кастомный фонт

3 spans (left: -5px, 5px, -2.5px)	всё + line-height: 95%	background-image	background-attachment: fixed
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО
Тут всё круто	line-height делает прикольн?й декор	фон едет на следующей строке	fixed - правит это всё, но не для ИЕ6-7 (нужен expression)

Итого мы имеем:

.smaple, .sampleB {
	font-size: 18px;
	font-family: 'Calibri', 'Trebuchet MS'; 
	line-height: normal;
}
.sample span {
	position: relative;
	background: red;
	color: white;
	left: -5px;
}
	.sample span span {left: 5px;}
	.sample span span span {left: -2.5px;}
	
.sampleB span {
	position: relative;
	background: transparent url('bg.png') 0 0 fixed repeat;
	left: -5px;
}
	.sampleB span span {left: 5px;}
	.sampleB span span span {left: -2.5px;}

ps: по материалам chikuyonok.ru - Серёге привет!

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

Теги:
css

Приоритет селекторов

Thu, 17 Dec 2009 21:55:16 +0200

styleDeclaration в тэге;
#idName с правиле;
.className и pseudo-className в правиле;
tagName и pseudo-tagName;

Все 4 правила сводяться в одну систему a-b-c-d(где а - наивысший приоритет) и образуют специфичность.

Селектор	Специфичность a-b-c-d	Правило №
*	0-0-0-0	-
li	0-0-0-1	4
li:first-line	0-0-0-2	4
ul li	0-0-0-2	4
ul ol+li	0-0-0-3	4
form + *[type=text]	0-0-1-1	3, 4
table tr td.second	0-0-1-3	3, 4
h2.block.title.	0-0-2-1	3, 4
#xyz	0-1-0-0	2
style=""	1-0-0-0	1

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

Теги:
css
шпаргалка

Универсальный метод декорирования блоков (via chikuyonok.ru)

Sat, 12 Dec 2009 14:00:49 +0200

В этот методе, для декорации блока (даже инлайнового), используется всего 5 элементов (4 декорируют) и один спрайт (картинка с декорацией).

Процитируем из сайта автора:

Первая область: растягивается по горизонтали и вертикали, background-position: top left;
Вторая область: ширина фиксированная, растягивается по вертикали, background-position: top right;
Третья область: растягивается по горизонтали, высота фиксированная, background-position: bottom left;
Четвертая область: ширина и высота фиксированная, background-position: bottom right.

Сам CSS не большой, и довольно понятный, лучше всего смотреть сразу на примерах:

зы: Казалось бы всё хорошо, но не забываем о ИЕ6. Он считает паддинги по своему, поэтому для него дополнительный стиль. А для того что-бы работали прозрачности в IE6-7, используем известный IE6 PNG-fix
ззы: Блок, в котором находится вся красота, не забываем делать либо position:absolute; либо position:relative;, а то всё полезет.

Удачи!

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

Теги:
css

BUGS: Positon absolute не работает в ИЕ6?

Mon, 30 Nov 2009 05:24:48 +0200

Досадная штука этот ИЕ6. Стал забывать о нём (и не зря, за 2 года упал с 65% до 11%), но он всегда вылазит где-то %) И нужно с ним бороться, опять и опять.

В этот раз все банально просто, блок непосредственно в боди, с {positon:absolute}, становится длиной 100% и просто поверх всего. После долго-го рытья по гуглу, оказывается что нужно сделать body{positon:relative}, и только тогда он начинает себя нормально вести :)

За одно исправил свой HabraAlert, теперь он 0.1.1 :)

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

Теги:
css > position > absolute
browsers > microsoft > Internet Explorer > IE6
HabraAlert
bugs

CSS: two background image for one tag (2 фоновые картинки у тэга)

Mon, 09 Nov 2009 18:37:57 +0200

У тегов есть селектор :first-letter, по сути превращающий первую букву в ноде, в такой себе блок с отдельными свойствами. Этим просто грех не воспользоваться:

div{
  background-image: url(/image_back.jpg);
}
div:first-letter {
  background-image: url(/image_front.jpg);
}

И как всегда, маленький ньюанс, в ИЕшках... Они как всегда испортили интернет :)) Но не всё так печально, что бы эта конструкция работала, не забываем между селектором фёрст-леттер и скобкой { ставить пробел ;)

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

зы: проблем с позиционированием будет много, но метод имеет право на существование ;)

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

Теги:
css

Странный CSS, диагностика сайта

Thu, 29 Oct 2009 13:11:53 +0200

Тему диагностики ( CSS дебага сайта) можно расширить ;)

Некто Eric Meyer углубился в тему такого дебага, и разработал такой себе debug.css для правильных браузеров:

div:empty, span:empty, li:empty, 
p:empty, td:empty, th:empty {
	padding: 0.5em; background: yellow;}
*[style], img, a[href], font, center {
	outline: 5px solid red;}
table, th {border: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}
table[summary], 
th[scope="col"], 
th[scope="row"] {border: 1px solid #AAA;}
a[title] {outline-width: 0;}
a[title=""] {outline-width: 3px;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
li {margin: 0.67em 0;}

Что тут происходит? Всё просто:

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

Посмотреть Пример у Автора

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

Теги:
css
debug

CSS "background-image" fit 100% (Фон на всю страницу)

Tue, 27 Oct 2009 12:13:47 +0200

Иногда хочется сделать фон тянущимся 100х100 %, но просто сделать это пока невозможно. Мы можем эмулировать фоновую картинку с помощью 2 дивов ;) Вкратце, один будет с картинкой, другой будет поверх его, и будет со скроллом. Оба 100х100 %. Дальше код?

html, body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%
}
#bg_image { 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 1; 
  width: 100%; 
  height: 100%; 
}
#scrollable { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  z-index: 2; 
}

Сам HTML выглядит так

<body>
<div><img id="bg_image" src="/path/to/image.png" alt="" title="" /></div>
<div id="scrollable">
… content …
</div>
</body>

В даном случае, дивы позиционированы абсолютно, сортированы через зет-индекс и стоят сверху благодаря топ=0 и лефт=0. Можно ещё сделать через релейтив, если начнутся проблемы с анимацией блоков ;)

PS: применение очень прикольное можно придумать ;)

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

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

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

Теги:
css