Tag: css

Русский бутстрап

Только сегодня наткнулся на официальном сайте bootstrap на ссылку русской версии. Вот линк http://www.oneskyapp.com/docs/bootstrap/ru

Как изменить внешний вид checkbox

Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Таким образом, элемент находиться на странице, остается кликабельным, но полностью прозрачный, таким образом, невидимый. А в блоке, в котором находиться checkbox задается бекграунд с картинкой, на которой изображено, как должен выглядеть измененный checkbox и при клике на checkbox скриптом у блока меняется класс стиля, чтоб поменялся бекграунд на картинку с измененным чекбоксом в другом состоянии.

/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

В дополнение, стоит отметить что картинку чекбокса лучше делать спрайтом из двух картинок чтоб избежать эффекта мерцания при подргрузке картинки.

Кросс-браузерный CSS transform (даже в IE)

Скопипастил себе, дабы вещь пригодится.
———————————-
CSS свойство transform позволяет масштабировать, наколнять и поворачивать HTML-блоки с помощью CSS. Движки Firefox, Opera и Webkit имеют встроенную поддержку свойства, чего нельзя сказать об Internet Explorer. Но не все так печально, в IE есть фильтр DXImageTransform.Microsoft.Matrix который реализует такую функциональность. Один замечательный человек по имени Zoltan Hawryluk разработал небольшую библиотеку под названием cssSandpaper, с помощью которой можно создавать интересные эффекты. Примеры работы:

Примеры работы:

Узнать побольше о том, как создавалась библиотека, а так же скачать можно здесь

Hello World

Ну вот пришел тот самый день=) Дописал свой блог. Все написано на Python & Django. В ближайшее время перенесу все со старого блога и в топку старый добрый вордпрез…. Если Вы каким то образом попали сюда, то сразу Вам скажу, регистрация сдесь закрытая… нах этих спамеров… И вдруг Вам захотелось поучаствовать в дискуссиях и прокоментить тот или иной пост, то сдесь все просто, ломимся ко мне всеми возможными способами и просим ак, после чего я вам выдам логин и пароль… На этой нотке заканчиваю первый пост. Ну и Hello World in g00g1e.org.