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

css РСС

Ctrl + ↑ Позднее

18 августа 2009, 15:06

Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)

У нас есть простая Логин-форма
<form action="#" method="post">
	<div class="label_input">
		<label for="auth_login">Логин</label>
		<input type="text" name="auth_login" id="auth_login">
	</div>
	<div class="label_input">
		<label for="auth_password">Пароль</label>
		<input type="password" name="auth_password" id="auth_password">
	</div>
	<input type="submit" value="Отправить">
</form>
Метку (label) и инпут зарание возмём в див, пропишем ему в css относительное позиционирование, остальные елементы оформим на свой вкус.

Дальше будет JavaScript 
function showLabels(inputs){
	// список инпутов приходит обьектом {'input_id':''}
	// если нет, то мы уходим
	if (typeof(inputs) != "object") return;
	// функция которая прячет лейбл, если в форме есть данные
	function inputValueSH(someinput){
		// что бы надёжно спрятать, запихнём повыше
		// почему-то свойство display не фурычит
		if (someinput.value) pSib(someinput).style.top = '-9999px'; // данные есть
		else pSib(someinput).style.top = '0'; // данных нет
	}
	for (var i in inputs){
		// дальше, разбиваем на список
		// аля foreach для бедных
		var obj = document.getElementById(i);
		// при блуре вызываем функцию проверки
		obj.onblur = function(){ inputValueSH(this);};
		// когда сфокусировались, убираем метку
		obj.onfocus = function(){ pSib(this).style.top = '-9999px';	};
		// проверим на всякий ешё разок
		inputValueSH(obj);
	}
	return;
}
addLoadEvent(function() {
	// настраиваем метки, для auth_login и auth_password
	showLabels({'auth_login':'','auth_password':''});
});


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

13 августа 2009, 11:06

CSS: самый простой футер, приклееный вниз (Crossbrowser bottom fixed footer) Избранное

Давно использую данный «текникс», а на хабре говорят что про него никто не слышал. Странно, вооот. Поэтому встречайте ;)

Нужен простенький CSS. Мы зададим высоту html, body и враппера 100%, маргин у враппера сделаем -4строки, а футеру сделаем высоту +4строки соот. и получим нужный результат: 
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
    min-height: 100%;
    /* luv IE shit */
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {height: 4em;}
Вместо строк, можем использовать пиксельные величины, также не забываем о паддингах и бордерах, он тоже играют на высоту/длину!
И HTML
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright/contacts put here</p>
    </div>
</body>


ЗЫ: див под именем push, нужен для глючных браузеров, лайк Опера, что бы текст футера не налазил на контент.
ЗЗЫ: заставить оперу понимать то, что хавает даже ИЕ6, можно скриптом. Или убить доктайп, или сместить боди на 1px, что реализовано в примере ;)
crossbrowser   css
6 комментариев

26 июля 2009, 14:31

CSS: Simple form layout

Простой CSS для вёрстки формы. Очень нужная вещь, когда доступа к вьюхам(темплейтам, формгенератору) нет ;) Например есть простая форма 
<form>
	<label for="name">Name</label>
	<input id="name" name="name"><br>
	<label for="address">Address</label>
	<input id="address" name="address"><br>
	<label for="city">City</label>
	<input id="city" name="city"><br>
</form>
В итоге обычно получается ёлка, красивого мало ;) И как говорится, нужно всего лишь добавить CSS :D 
label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}
br {
	clear: left;
}


Но обычно форма не ограничивается только текстовыми инпутами. Для таких случаев лучше обзавестись более универсальным CSSом ;) добавим небольшие ограничения с помощью css-selectors 
input[type="radio"],
input[type="checkbox"],
input[type="submit"],
input[type="button"],
input[type="reset"]{
	width: auto;
}



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

21 июля 2009, 14:55

CSS-debug — непонятные вещи ;)

Зачем нужен? А что бы видеть вложенность всех элементов и блоков, и быстро разобраться где какой тэг не закрыт ;) ну и WebDeveloper toolbar в помощь! 
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
Для ИЕ6-7 вместо outline, пишем border.
ЗЫ: почему outline а не border? потому что это бордер который не создаёт лишний пиксель ;), хотя он строится вне элемента!
css   debug
нет комментариев

17 июля 2009, 9:46

pure CSS tooltip (подсказка)

Вот так выглядит HTML 
<a href="#">Ссылка<span>Подсказка</span></a>

А вот так CSS
a{ /* устанавливаем уровень накладывания объектов */
	z-index:10;
}
a:hover{ 
	/* Когда наводим мышкой, делаем релейтив, 
	что бы можно было абсолютно ссылки 
	позиционировать другие объекты */
	position:relative;
	z-index:100;

}			
a span{ /* пока не навели, прячем спан */
	display:none;
}
a:hover span{ /* делаем для спана абсолютное 
	позиционирование, отображаем 
	как блок, смещённый относительно 
	ссылки вверх и влево */
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;			

}


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

16 июля 2009, 11:07

Опять колонки одинаковой высоты %) IE6hack

На хабре пошла дикая пьянка по поводу этих колонок. Так что ж, в припрыжку к этому и этому методам опишем ещё один.
<style type="text/css" media="screen">* {
    margin: 0;
    padding: 0;
  }
  #container {
    display: table;
    width: 100%;
  }
  .column {
    display: table-cell;
    width: 25%;
  }</style>
<!--[if lt IE 8]>
  <style type="text/css">
    #container {
      width: auto;
    }
    .column {
      // вся магия в двух строчках ниже
      float: left;
      clear: right;
      
      width: auto;
      min-width: 25%;
      _width: 25%;
    }
  </style>
<![endif]-->
<div id="container">
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
</div>



В чем же суть, наверное просто процитирую:
Решение основано на глюке отличительной особенности браузеров IE5-7, которая выражается в том, что если блокам с float указать свойство clear с противоположным к float значением, то они перестают переноситься один под другой. Грубо говоря, блоки после такого просто «прилипают» друг к другу намертво и не «отлипнут» друг от друга уже ни при каких обстоятельствах.
css
нет комментариев

13 июля 2009, 11:29

Колонки одинаковой высоты

Ещё один метод (прочитаный на хабре), с колонками одинаковой высоты, который работает хорошо везде, но не лишен неприятностей, одна из которых, непредсказуемая работа с якорями в разных браузерах. Он наверное самый семмантичный и правильный, но опять же небезупречный.

В ШТМЛ это выглядит вот так: 
<div class="cols">
  <div class="col1">Текст1</div>

  <div class="col2">Текст2</div>
  <div class="col3">Текст3</div>

</div>
А в ЦСС 
.cols{
     overflow:hidden;
     _zoom:1; /* Для 6-го IE, задаем hasLayout, или _width: 100% */

}
.cols .col1,.cols .col2,.cols .col3{
     padding-bottom:10000px;
     margin-bottom:-10000px;
}

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

9 июля 2009, 16:36

Custom file input form 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>File Up Form Replace</title>

	<script type="text/javascript">
		function result(fileId){
			var res = document.getElementById("ftitle");
		  // выводим имя файла, обработав регекспиком
			res.innerHTML = fileId.value.replace(/^([^\\\/]*(\\|\/))*/,"");
			// выводим в тайтл всё значение 
			res.setAttribute("title",fileId.value);
		}
	</script>
	
	<style type="text/css">
		.fakebutton {
			font-family: verdana; 
			color: #fff;
			text-align: center; 
			overflow: hidden; 
			width: 200px; 
			height: 20px; 
			background-color: #038f1a;
		}
		.fakebutton span {displa: block;}
		.realbutton {

			/* прячем размеры input'a */
			margin-top: -50px; 
			margin-left:-410px; 
			/* делаем прозрачным */
			-moz-opacity: 0; 
			filter: alpha(opacity=0); 
			opacity: 0; 
			/* делаем большим */
			font-size: 150px; 
			height: 100px;
		}
	</style>
	
</head>
<body>
<div class="fakebutton">

	<span id="ftitle">Загрузить</span>
	<!-- когда засабмитили файлик взываем функцию result() -->
	<input type="file" name="file" id="file" size="1" onChange="result(this);" class="realbutton">

</div>
</body>


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

26 июня 2009, 15:20

Легкая типографика (правила хорошего тона)

  • длина строки 40-80 символов (width: 300px);
  • Мужду строками 1,5 интервал (line-height: 1.5em);
  • В цитатах, кавычки убираем за текст (text-indent: -0.8em);
  • В блоках, отступ снизу, равен междустрочному интервалу;
  • Выделение текста не отвлекая юзера (италиком, без болда и изменения размера);
  • Маштаб фонтов (6,7,8,9,10,11,12,13,14,16,18,21,24,36,48,72 px);
  • При рваных краях, использовать &shy;.
css
2 комментария

16 июня 2009, 12:28

CSS: Выравниваем плавающие колонки (CrossBrowser)

И так, в чём суть да дело :)

Если браузер нормальный, то мы используем display: table-*, то есть создаём див с display: table-row, а в нём дивы, которые должны быть одинаковой высоты с display: table-cell. Вуаля, остался ИЕ :(

Второй метод, кроссбарузерный: 
<style type="text/css">
/* Два дублирующих контейнера col-wrap*
нам нужны, что бы сделать бордеры у колонок
одной высоты, или фон внизу каждого */
.col-wrap1 {
	width:25%;
	background:blue;
}
/* второй контейнер смещён на нужное растояние
влево, с помощью маргин-райт попячен под ИЕ %) */
.col-wrap2 {
	width:200%;
	position:relative;
	left: 100%;
	background:red;
	/* чтобы ИЕ6 не раздвигал контейнер */
	margin-right:-100%; 
}
/* левую колонку с текстом смещаем на длину 
врап2 контейнера */
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
/* что бы ничего снизу не налезло, очищаем */
.clear {
	clear:both;
	font-size:0;
	
	/* тройной презерватив для ИЕ */
	overflow:hidden; 
}
</style>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col1">left column</div>
        <!-- Кол2 занимает всё оставшиеся пространство -->
        <div class="col2">center column</div>
        <div class="clear"></div>
    </div>
</div>



Этот замечательный, и очень простой метод я подглядел вот сдесь, спасибо Сергею.
crossbrowser   css
нет комментариев

1 июня 2009, 23:59

Fixed в IE 

/* Устраняем дрожание */
body {
    background: url('/n.gif') no-repeat;
    background-attachment: fixed;
}

/* Делаем полноценный фиксед %)*/
.FixedDiv {
	position:fixed;
	_position:absolute; /* _Видит _только _ИЕ */
	top:0;
	_top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
	/* _top: expression(eval(document.body.scrollTop) + "px"); */
	/* _top: expression(parseInt(document.body.scrollTop, 10) + "px"); */

}
css   шпаргалка
нет комментариев

26 мая 2009, 18:01

CSS: CustomFont on page

Работает в браузерах с поддержкой custom-fonts в css3 (>FF3.1,IE8)
@font-face {
 	font-family: SomeFont;
	font-style: normal; 
	font-weight: normal;
	src:url("somefontnormal.otf") format('opentype');
	/*src:url("somefontnormal.ttf") format('truetype');*/
	* html src:url("somefontnormal.eot"); /* IE only eot font type */	
}
@font-face {
 	font-family: SomeFont;
	font-style: normal; 
	font-weight: bold;
	src:url("somefontbold.otf") format('opentype');
	/*src:url("somefontbold.ttf") format('truetype');*/
	* html src:url("somefontbold.eot"); /* IE only eot font type */
}
.element {
	font-family: SomeFont;
}
Если кому интересно, то расскажу о конвертировании ttf2otf, ttf2eot, otf2ttf




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

20 мая 2009, 17:49

HTML текст под произвольным углом

Для того что бы отобразить произвольный текст под углом, мы в нормальных браузерах используем тип svg+xml для object, и через параметр data, передаём нужные данные для обработки!
А именно параметры, и теги:
  • x=’-200’ — координата начала строки текста от верхней стороны object;
  • y=’18’ — координата базовой линии строки текста от левой стороны object;
  • font-family=’Arial’ font-size=’12’ — размер, гарнитура шрифта;
  • fill=’#000000’ — цвет текста;
  • transform=’rotate(-90)’ — поворачиваем текст на -90 градусов.
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,
<svg xmlns='http://www.w3.org/2000/svg'>
<text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' 
transform='rotate(-90)' text-rendering='optimizeSpeed'>
вертикальный текст
</text>
</svg>">
</object>

Но есть ещё друг ИЕ (буеее:), и для него есть css filter, а именно:
  • вертикальный фильтр %)
  • горизонтальный фильтр 8)
  • под произвольным углом :D
.vertical object { 
	/* скрываем svg */
	display:none; 
} 
.vertical span { 
	filter: flipv() fliph(); 
	writing-mode: tb-rl; 
}
.vertical_angle span { 
	writing-mode:lr-tb;
	filter:progid:DXImageTransform.Microsoft.Matrix(
	M11='0.985', M12='-0.174', M21='0.174', M22='0.985', 
	SizingMethod="auto expand");
}
  • M11 = cos(угла в градусах)
  • M12 = -sin(угла в градусах)
  • M21 = sin(угла в градусах)
  • M22 = cos(угла в градусах)


ps: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины
html   css
1 комментарий

10 мая 2009, 22:50

Скроллим див %)

Иногда див с большим объёмом информации нужно поскроллить, но типичный скролл не вписывается в дизайн, и нужно придумать кнопки. На помощь приходит javascript :D
У любого блочного элемента в html, есть css свойство, которое можно изменить только с помощью javascript о_О
Знакомьтесь, это scrollLeft и scrollTop :) Они представляют собой отступ (скролл) от левого края и от верха соответственно ;)
Перейдем к делу! Управлять ими очень даже легко 
document.getElementById("test").scrollLeft += 5;
document.getElementById("test").scrollLeft -= 5;
Сдесь мы блочный элемент с id=«test» сначала двигаем вправо на 5px, потом влево. Аналогично делается для направлений вниз/вверх!

Пример:
JavaScript — скриптовый язык, чаще всего использующийся при создании сценариев поведения браузера, встраиваемых в веб-страницы. Является одной из реализаций языка ECMAScript. Название «JavaScript» является зарегистрированным товарным знаком компании Sun Microsystems, Inc.
Скроллим Вниз Скроллим Вверх
css   javascript   scrolling
нет комментариев

25 апреля 2009, 17:45

css hacks for all browsers 

/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno  { color: red }

/* IE 7 and below */

*:first-child+html #dos { color: red } 

/* IE 7 and modern browsers */
html>body #tres { color: red }

/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below */
html:first-child #cinco { color: red }

/* Safari */

html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:first-of-type #ocho {  color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}

/***** Attribute Hacks ******/

/* ie6 and below */
#once { _color:blue }

/* ie7 and below */

#doce { *color: blue } /* or #color:blue */

/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */
css   шпаргалка
нет комментариев

5 декабря 2008, 13:45

Dynamic load style or CSS («OnDemand»). Full dynamic Import :)

Функция empty определяет, считается ли переменная пустой. 
function empty(param) {return (param == null || param == undefined) ? true : false;}

Для загруки стиля динамически, используем функцию import_style 
function import_style(src){ 
	if (empty(src)) return;
	var imprt = document.createElement('style');
	imprt.setAttribute("type", "text/css");
	if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE
	else imprt.appendChild(document.createTextNode(src)); // Other normal browsers
	document.getElementsByTagName('head')[0].appendChild(imprt);
	return false; // disable link href-action
}

Для загруки CSS динамически, используем функцию import_css
function import_css(src, media){ 
	if (empty(src)) return;
	var imprt = document.createElement('link');
	imprt.setAttribute("rel", "stylesheet")
	imprt.setAttribute("type", "text/css");
	imprt.setAttribute("media", empty(media) ? "all" : media);
	imprt.setAttribute("href", src);
	document.getElementsByTagName('head')[0].appendChild(imprt);
	return false; // disable link href-action
}

Использовать очень и очень просто :) 
<a href="#" onclick="import_style('body {color: red;}');">make red</a>
<a href="#" onclick="import_css('test.css');">make styled</a><br>

Раньше я описывал Импорт JavaScript, теперь можно подитожить, и научить фунцкию $import загружать style, css и js
function tms() {return new Date().getTime().toString();} // funtion return today date in second 
function $import(src, type, media){
	if (empty(src) || empty(type)) return;  // if empty go away
	switch (type) {
		case "js" : // import some javascript
			var imprt = document.createElement('script');
			imprt.setAttribute('type','text/javascript');
			imprt.setAttribute('src',src + '?' + tms()); // Get rid of the caching
		break;
		case "css" : // import css
			var imprt = document.createElement('link');
			imprt.setAttribute("rel", "stylesheet")
			imprt.setAttribute("type", "text/css");
			imprt.setAttribute("media", empty(media) ? "all" : media);
			imprt.setAttribute("href", src + '?' + tms()); // Get rid of the caching
		break;
		case "style" :  // import some style in head
			var imprt = document.createElement('style');
			imprt.setAttribute("type", "text/css");
			if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE
			else imprt.appendChild(document.createTextNode(src)); // Others
		break;
  	default: return;
  }
  document.getElementsByTagName('head')[0].appendChild(imprt); // mount import stuff to head
  return false; // disable link href-action
}

Используем вот-так
<a href="#" onclick="$import('body {color: red;}','style');">make red</a>
<a href="#" onclick="$import('test.css','css');">make styled</a>
<a href="#" onclick="$import('test.js','js');">make alert</a>




Запомни!
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту (после подгрузки с помощью $import), вот так: setTimeout(«SomeFreamework.SomeFucntionMake(’someparametr’)», 100);



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

11 сентября 2008, 21:50

1px round border, simple valid css method

«Как-бы» круглая граница текста(блока) делается довольно легко, используя всего 3 вложеных елемента :)
Расмотрим CSS:
ul.r1pxc, ul.r1pxc li, ul.r1pxc a, ul.r1pxc b { /*  обнуляем все елементы и начинаем параметры указывать: */
	text-decoration: none;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;}
ul.r1pxc li { /*  отступы */
	float: left;
	clear: both;
	left: 1px; /*  своеобразный паддинг слева*/
	list-style: none; /*  нам не нужны лишние "артефакты" :) */
	background-color: #aaa; /*  цвет бордера, верхнего */
	border-bottom: 2px solid #aaa; /*  цвет бордера, нижнего */
	margin-bottom: 5px;}
ul.r1pxc li a {
	width: 120px; /*  длину елемента, в данном случае ссылки */
	float: left;
	left: -1px;
	top: 1px; 
	margin-right: -2px;	/*  что бы появилась правая граница */
	background-color: #ddd;} /* цвет фона */
ul.r1pxc li a:hover {
	background-color: #ccc;} /* цвет фона при наведении мышей */
ul.r1pxc li a b {
	border: solid #aaa; /*  цвет бордеров */
	border-width: 0 1px 0 1px; /*  бордеров правой и левой стороны */
	padding: 4px; /*  просто паддинг для текста */
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;}

а в HTML всё просто: 
<ul class="r1pxc"><li><a href="#"><b>Example</b></a></li></ul>



ps: подглядел вот здесь
css
нет комментариев

26 мая 2008, 15:17

Книги по програмингу (старенькие, запыленные)

Книги по MySQL
Структуризированный язык запросов (SQL)
Системы обработки информации — язык баз данных SQL
MySQL и mSQL
Введение в SQL
Введение в реляционные базы данныx
ОСНОВЫ ПРОЕКТИРОВАНИЯ РЕЛЯЦИОННЫХ БАЗ ДАННЫХ
Версия пакета MySQL : 3.20.29
Мартин Грубер: Понимание SQL
Книги по CGI
CGI Developer’s Guide
CGI Programming Unleashed
CGI reference
CGI — Общий Интерфейс Шлюзов
Oписание CGI
CGI.pm — a Perl5 CGI Library
Книги по HTML
HTML учёбник
Изучение HTML 3.2 на примерах
HTML-справочник
Практическое руководство по HTML
Словарь тагов
Руководство по стилям для создания online гипертекста 
Clean up your Web pages with HTML TIDY
Книги по CSS
WebClub | Спецификация CSS1
Рекомендация W3C | Спецификация CSS2
Книги по JS
Центром Информационных Технологий: JavaScript
Практическое введение в программирование на JavaScript
ВВЕДЕНИЕ В JAVASCRIPT
JavaScript Bible 4th Edition
JS object model
Руководство по JavaScript
JavaScript: Краткое введение и справочникПримеры!
Книги по PHP
PHP 4
Учебник РНР
Руководство по PHP
PHPMySQL Programming
about php rus
cgi   css   css2   html   javascript   mysql   php
нет комментариев

1 мая 2008, 0:32

Empty HTML and reset CSS — just start work!

Очень часто, в начале проекта (верстка, тестовый файлик), каждый раз нужно писать стандартные вещи <html><head><body.. — задолбало!
Просто заготовочки для начала работы:


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