Моя онлайн шпаргалка: березня 2010

Стили для Оперы

E-texteditor или Intype ???

Есть два классных блокнота для писание кода E-texteditor(Win) и Intype(Win), оба аналоги TextMate (MacOS).

Попробовал оба, вот сделал выводы:

E-texteditor

Плюсы:

Bundles
Свертывание тегов
Подсветка
Поиск и замена (как в файле так и по всему проекту)
Превюшка (ИЕ)

Минусы:

35$
надо устанавливать cygwin(если пользуешься только Снипетами то не надо устанавливать)
При установке горячих клавиш, иногда как-то странно себя ведет
Иногда подглючивает

intype

Плюсы:

Бесплатная
Bundles
Подсветка
Быстрая, неглючная

Минусы:

Нету поиска и замены
Нету Свертывание тегов
боковая панель «Проекты» не функциональная (нельзя фотку, например, открыть в своем редакторе)

Вообще, intype - ещё зеленый(альфа версия всё-таки), но если будет развиваться то есть все шансы стать лидером.

ИМХО: На сегодняшний день мой выбор - E-texteditor

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


function imgopen(imgf,tit){
rand_id='image'+(Math.round(Math.random()*1000));

outf="<html>"
 +"<head>"
 +"<title>"+title+"</title>"
 +"<style>body{margin:0px}</style>"
 +"</head>"
 +"<body leftmargin=0 topmargin=0>"
 +"<img src=\""+imgf+"\">";

iopen="iwin=self.open('"+imgf+"', '"+rand_id+"', 
'width='+(img1.width)+',height='+(img1.height)+',
 top=0, left=0');"
 +"iwin.document.write('"+outf+"');"
 +"iwin.focus();";

img1=new Image();
img1.src=imgf;

if(img1.width!=0) eval(iopen);

else{
iwin = self.open('about:blank', 'f'+rand_id, 
'width=100,height=100,top=0,left=0');
iwin.document.write("<html>"
+"<body>Загрузка...
"
 +"<"+"script>"
  +"function imo(img1){"+iopen
  +"self.close();"
 +"}<"+"/script>"
 +"<img src='"+imgf+"' onload='imo(this);'>");
 }
}

</script>
<br /> <p><i>Пример работы:</i><br /> <a href="javascript:imgopen('images/01.jpg','Photo')"><br /> <img src="images/photo_small.jpg" /></a><br />

Вот такой вариант...

Доктайпы всякие важны, доктайпы всякие нужны...

Самые актуальные Доктайпы на сегодняшний день:

Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

Стандарт XHTML 1.0 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

Стандарт XHTML 1.1 DTD

ну и конечно, недалекое будущее:

Стандарт HTML 5

Класная рисовалка :)

Футуристические картинки можно рисовать здесь

Сброс CSS

position: fixed в IE6 и ниже...

Вот такой хак с помощью експрешенов, блок прижат к середине экрана, и зафиксированный:

.fixed_block {
position: absolute;
top: expression(parseInt(document.documentElement.scrollTop, 0) + "px");
left: 50%;
margin-left: -100px; /*если блока ширина 200px;*/
}

а это что бы при прокрутке, не дергалась страничка

body {
background: url(images/bg.jpg) fixed;
}

если в макете, нету картинки на бекграунд пишем так:

body {
background:url(about:blank) fixed;
}

P.S. ещё нашел такой вариант експрешена:

top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

Сглаженные углы на CSS (вариант №1)

Пример закругленных уголков без использования графики, подглядел здесь.

Стиль:

.block { width: 300px; margin: 30px auto 15px; } .text { border-left: 1px solid #B0BCC2; border-right: 1px solid #B0BCC2; background: #DADADA; } .b1, .b2, .b3, .b4, .b5, .b1 b, .b2 b, .b3 b{ height: 1px; font-size: 1px; overflow: hidden; border:1px solid #B0BCC2; border-width: 0 1px; display: block; background: #DADADA; } .b1 { margin: 0 2px; background: #EBEEF0; border: none; } .b1 b { margin: 0 1px; background: #B8C3C8; border-color: #CBD3D7; } .b2 {margin: 0 1px; border-color: #D6DCDF;} .b2 b {border-color: #B8C3C8;} .b3 {border-color: #EBEEEF;} .b3 b {border-color: #BCC6CB;} .b4 {border-color: #CAD2D6;} .b5 {border-color: #B5C0C6;}

Код:

Тут текст

Ну вроде все просто, на днях скину вариант с использованием графики.

Footer который исчезает

Идею подглядел здесь: css-tricks.com

С кодом всё банально:

.footer {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url("bottom-fade.png") bottom center no-repeat;
}

P.S. решение автора с фиксом IE6 и png не понравилось, ИМХО: лучше использовать - DD_belatedPNG

Моя онлайн шпаргалка

CSS прозрачность...