Deerua about Coding -> Заметки с тегом «css» @ deer.org.ua

Страницы: 1 | 2 | 3 | 4 | 5

31 марта 2010, 09:07 более 4-х месяцев назад

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

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

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

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

5 комментариев

Теги: css

27 января 2010, 17:46 более 6-и месяцев назад

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

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

CSS Formatter and Optimiser (csstidy 1.3)

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

JS Compressorrater

2 комментария

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

26 января 2010, 18:56 более 6-и месяцев назад

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

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 — кажись не надо ;) но пускай полежат.

3 комментария

Теги: css

21 января 2010, 12:36 более 6-и месяцев назад

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

Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво… Что бы нам помочь, сделано свойство в 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

17 декабря 2009, 21:55 более 7-и месяцев назад

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

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

1 комментарий

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

12 декабря 2009, 14:00 более 7-и месяцев назад

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

В этот методе, для декорации блока (даже инлайнового), используется всего 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

30 ноября 2009, 05:24 более 8-и месяцев назад

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

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

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

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

Комментировать…

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

9 ноября 2009, 18:37 более 8-и месяцев назад

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

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

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

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

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

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

Комментировать…

Теги: css

29 октября 2009, 13:11 более 9-и месяцев назад

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

Тему диагностики ( 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

27 октября 2009, 12:13 более 9-и месяцев назад

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

Иногда хочется сделать фон тянущимся 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: применение очень прикольное можно придумать ;)

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

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

1 комментарий

Теги: css

Страницы: 1 | 2 | 3 | 4 | 5

Deerua about Coding -> Заметки с тегом «css»

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua