39 заметок с тегом

css РСС

10 декабря, 20:16

Скролл сверху и снизу блока

Wow, who is back. Да — это я с новым ДОУ (deer.org.ua, lol)

Разминка для мозгов :)
<style type="text/css">
  #doublescroll { overflow: auto; overflow-y: hidden; }
  #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>

<div id="doublescroll">

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<script type="text/javascript">
function DoubleScroll(element) {
    var scrollbar= document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow= 'auto';
    scrollbar.style.overflowY= 'hidden';
    scrollbar.firstChild.style.width= element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop= '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll= function() {
      element.scrollLeft= scrollbar.scrollLeft;
    };
    element.onscroll= function() {
      scrollbar.scrollLeft= element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
  }

  DoubleScroll(document.getElementById('doublescroll'));
</script>

Код честно взят со стакексчендж (стаковерфлоу раньше). Я просто сделал с него джиквери решение
$("#doublescroll")
	.before($("<div></div>")
		.append($("<div></div>")
  			.css({
  				"padding-top":"1px",
  				"width": $("#doublescroll")[0].scrollWidth+"px"
  			})
  			.text('\xA0')
  		)
		.css({
			"overflow":"auto",
			"overflowY":"hidden"
		}).
		bind("scroll",function(){
			$("#doublescroll")[0].scrollLeft = $(this)[0].scrollLeft;
		})
	)
	.bind("scroll",function(){
		$(this).prev()[0].scrollLeft = $(this)[0].scrollLeft;
	})

Примера не будет, мне лень.
javascript   css   jquery
2 комментария

9 апреля 2011, 16:52

CSS: nth-child параметры псевдокласса

Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child.
5 5 Пятый элемент.
2n 2, 4, 6, 8, 10 Все четные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения odd.
3n+2 2, 5, 8, 11, 14 —
-n+3 3, 2, 1 —
5n-2 3, 8, 13, 18, 23 —
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.
css   шпаргалка
2 комментария

19 августа 2010, 14:52

CSS :before / :after

Контент в начале/в конце для разных элементов задаётся с помощью :псевдо классов :before / :after и параметра content.
.feedbacks blockquote:before,
.feedbacks blockquote:after {
	color: #000;
	padding: 5px;
	font-size: 24px;
	line-height: 12px;
}
.feedbacks blockquote:before { content: "«"; margin-left: -23px;}
.feedbacks blockquote:after { content: "»";}

Всё казалось бы просто, но есть одно но, в параметр content нельзя вставить спецсимвол простым кодом, нужно вставлять через косые утф-значение символа
.banner a:after { content: "\2192\ ";}

Это пример для символа &rarr;, он же →
css
4 комментария

31 марта 2010, 9:07

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

Сутра был удивлён, css хорошо для всех величин понимает простые математические операции.
.menu div div{
	width: 1000px-28px;
}

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

27 января 2010, 17:46

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

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



css   javascript   tools
2 комментария

26 января 2010, 18:56

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

21 января 2010, 12:36

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

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

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

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

СелекторСпецифичность a-b-c-dПравило №
* 0-0-0-0-
li 0-0-0-14
li:first-line 0-0-0-24
ul li 0-0-0-24
ul ol+li 0-0-0-34
form + *[type=text] 0-0-1-13, 4
table tr td.second 0-0-1-33, 4
h2.block.title. 0-0-2-13, 4
#xyz 0-1-0-02
style=«» 1-0-0-01
css   шпаргалка
1 комментарий

12 декабря 2009, 14:00

Универсальный метод декорирования блоков (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
нет комментариев

9 ноября 2009, 18:37

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

Странный 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

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: применение очень прикольное можно придумать ;)
  • например сделать полупрозрачный пнг тучек, и в зависимести от времени суток менять фоновый цвет боди
  • или сделать прикольную галлерею ;) и т. д.


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

26 октября 2009, 6:26

Забытые теги... CSS: list-style-position

Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)

По умолчанию, значение outside, но есть ещё 
{ list-style-position: inside }
Выглядит это так:
  • Пример
  • Рыбного
текста

Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)

ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.
css   Забытые тэги
нет комментариев

25 октября 2009, 6:52

CSS image preload

Продолжая тему под-загрузки картинок, мы используем CSS. Суть метода простая:
  • мы делаем небольшой блок с абсолютным позиционированием и минусовыми координатами, или с отрицательным маргинами, небольшими размерами и обрезкой контента, а в нём грузим столько картинок сколько нужно, используя всего лишь background-image, а лучше background со свойством no-repeat
.loader{
   background:url(images/img1.gif) no-repeat;
   background:url(images/img2.png) no-repeat;
   background:url(images/img3.jpg) no-repeat;
   background:url(images/img4.bmp) no-repeat;
   /* margin-left:-1000px; */
   position: absolute;
   overflow: hidden;
   width: 10px; height: 10px;
   top: -20px;
}
Размещение блока с класом loader не принципиально <div class=«loader»></div>
css   preload
нет комментариев

21 октября 2009, 5:57

Магия, отменяем загрузку CSS в браузере с включённым JS

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо... Код выглядит так: 
<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->
И шо, и как? Всё довольно просто ;))
  1. JS пишет перед стилем комент
  2. На кондишинал.комментс эта штука закроется
  3. Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
  4. И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
  5. Работает везде!


javascript   css   crossbrowser   magik
нет комментариев

2 октября 2009, 7:39

CSS: vertical-align для DIVа с изменяемой высотой

Есть Хтмл, в нём Див.dynamic с контентом изменяемого размера и контейнер.middle плавающий, что должне быть по центру.
<div id="container">
    <div id="dynamic">
       любая текстовая рыба
   </div>
   <div id="middle">
       <div id="ie_helper">
           <p>ТекстЪ по центру. </p>
       </div>
   </div>
</div>
Есть простенький цсс, который просто делает с наших дивов ячейку, и потому работает вертикал-алигн.
#container {
    display: table;
    width: 100%;
}
    #dynamic {
        display: table-cell; 
        width: 200px;
        background: #0d0;
    }
    #middle {
        display: table-cell;
        vertical-align: middle;
    }
Но для ИЕ ниже 7, понятия «табличная ячейка» и ДИВ не соместимы, потому туда идёт хак-контейнер.ie_helper 
<!--[if lte IE 7]>
<style type="text/css">
    #dynamic {
        float: left;
    }
    #middle {
        position: relative;
        top: 50%;
    }
    #ie_helper {
        position: relative;
        top: -50%;
    }
    #middle,
    #ie_helper,
    #container p {
        zoom: 1;
    }
    * html #dynamic_height_giver {
        margin-right: -3px;
    }
</style>
<![endif]-->


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

17 сентября 2009, 15:23

CSS: Highlight table cell and row

CSS очень простой. Жаль так нельзя сделать для тега COL
.smpl table {border: 1px solid #999; width: 400px; height: 400px;}

.smpl td {border: 1px solid #999;}
.smpl tr:hover {background-color: #ccc;}
.smpl td:hover {background-color: #cc9;}


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

30 августа 2009, 17:24

DHTML&CSS: prohibit selection (как запретить выделение текста)

В ИЕ есть ивент onSelectStart, достаточно повесить return false; и будет счастье, а вот в других браузерх есть magik-css
.noselect {
  -moz-user-select: none; //Firefox
  -khtml-user-select: none; //Safari
  user-select: none; //работает в css3
}
В конечном итоге получаем нечто такое
<div onSelectStart="return false;" class="noselect">unselectable text</div>

Всё это можно делать и скриптом, для разных элементов, или привязать к jQuery 
function prohibitSelection(obj){
	obj.style.cursor = "default";
	if (typeof obj.onselectstart!="undefined") //IE
		obj.onselectstart=function(){return false;}
	else if (typeof obj.style.MozUserSelect!="undefined") //Firefox
		obj.style.MozUserSelect="none";
	else if (typeof obj.style.KhtmlUserSelect!="undefined") //WebKit
		obj.style.KhtmlUserSelect="none";
	else obj.onmousedown=function(){return false;} //All other(Opera)
}


css   javascript
нет комментариев

29 августа 2009, 17:00

CSS: Change color of selected text (not IE) 

::-moz-selection{
  background:#fff;
  color:#000;
}

::selection{
  background:#fff;
  color:#000;

}
css
нет комментариев

25 августа 2009, 11:10

CSS: Плавающие блоки с разной высотой, с выравниванием в ряду по самому высокому Избранное

Иногда когда делаем блоки с float:left, приходится сталкиваться с блоками разной высоты, и они при переходе на новую строчку, начинают строится после самого высокого, что ужастно... И приходится или ставить после определённого количества br clear=’all’ или указывать фиксированую высоту, что не всегда приемлемо.

Этот вопрос можно решить всего-лишь сэмулировав display:inline-block для старых ИЕ и для старых фоксов, ниже 3
.gallery-item {
    border-top:1px solid #AAAAAA;
    width: 147px;
    *width:147px;
    display: -moz-inline-stack; /* для FF ниже 3  */
    display:inline-block;
    font-size:91%;
    margin: 0 24px 20px 0;
    min-height:178px;
    vertical-align:text-top;
    border:1px solid #797873;

    /* уголки, ля-ля-ля */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    padding: 5px 5px 0;
    color: #4b4c4c;
    zoom:1; /* обычный layout fix для ИЕ6 */
    *display:inline; /* для ИЕ 6, 7 */

}


crossbrowser   css
1 комментарий
Ctrl + ↓ Ранее