• ↓
  • ↑
  • ⇑
 
Записи с темой: small useful things (список заголовков)
19:25 

Fade in on load

$(document).ready(function(){

// Fade in on load
$("#content";).fadeTo(600, 1);



});

@темы: jQuery, small useful things

01:27 

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



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

Four Methods to Create Equal Height Columns и ее перевод на хабре.
Колонки одинаковой высоты, самый простой способ - хаброответ на предыдущую статью

@темы: css, small useful things

01:15 

Еще кусочек jQuery

Этот кусочек кода отслеживает скроллинг окна вниз и назначает нужный класс при скроллинге ниже видимости объекта. Очень модный в последнее время эффект - даже на главной дайров есть =)))

var theLoc = $('#nav').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('#nav').hasClass('fixed')) {
$('#nav').removeClass('fixed');
}
} else {
if(!$('#nav').hasClass('fixed')) {
$('#nav').addClass('fixed');
}
});

@темы: important, jQuery, small useful things

00:54 

Две вкусняшки от css-tricks

Вкусняшка первая:



Вот такая вот надпись силами чистого css =) (картинка кликабельна и ведет на статью)

Вкусняшка вторая:





Новые ютубные кнопочки. Воссоздание =))) (и тут картинка тыкабельна)

@темы: tutorial, small useful things, css, UI

17:40 

Все еще пытаюсь освоить jQuery. Кусочек кода для анимации...

$(document).ready(function() {

$("li").hover(function() {
$(this).stop().animate({ marginTop: "-100px" }, 400);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 400);
});

});

@темы: jQuery, small useful things

11:23 

Выпадающее меню

Выковырянный из одного из примеров меню ниже скрипт для самого элементарного выпадающего меню...

$(function () {
$('.child-menu').each(function () {
$(this).parent().eq(0).hover(function () {
$('.child-menu:eq(0)', this).show();
}, function () {
$('.child-menu:eq(0)', this).hide();
});
});
});

То же самое, но с анимацией - выпадение вниз (slideDown) и последующее исчезание (fadeOut)

$(function () {
$('.child-menu').each(function () {
$(this).parent().eq(0).hover(function () {
$('.child-menu:eq(0)', this).slideDown(250);
}, function () {
$('.child-menu:eq(0)', this).fadeOut(300);
});
});
});
запись создана: 26.08.2011 в 11:06

@темы: small useful things, nav, jQuery

17:49 

Чтобы не потерять

Была задача сделать верстку в две колонки так, чтобы ширина колонок вообще не была задана (т.е. никаких пикселей или процентов) и все само менялось в зависимости от содержимого блоков. Решила так, вроде работает:

#wrapper {
overflow: auto;
white-space: nowrap;
}

#leftPart {
float: left;
padding: 10px 20px 10px 10px;
width: auto;
white-space: normal;
}

#rightPart {
overflow: auto;
padding: 10px;
white-space: normal;
width: auto;
}

@темы: css, small useful things

15:22 

Простая штука в css transitions, которую я не замечала

Как сделать разные эффекты при наведении мыши и после ее убирания? Когда добавляем transition, например, к ссылке, то получаем одинаковый эффект в обе стороны.... Оказывается, проблема решается элементарно: transition, добавленный к самой ссылке, будет работать при убирании мыши ("mouseleave"), а добавленный к a:hover - при наведении мыши ("mouseenter")

Пример:

#thing {
padding: 10px;
border-radius: 5px;

/* HOVER OFF */
-webkit-transition: padding 2s;
}

#thing:hover {
padding: 20px;
border-radius: 15px;

/* HOVER ON */
-webkit-transition: border-radius 2s;
}

Спасибо Крису

Иллюстративное демо Криса

@темы: css, small useful things

17:14 

CSS Sprites

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials


Sven Lennartz

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.

Читать статью дальше




Creating & Using CSS Sprites


David Walsh

The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No Javasсript -- only CSS!
Читать статью далее

@темы: css, small useful things, tutorial

15:01 

Загнутые уголки на чистом CSS

10:01 

Интересные фишки JQuery, которые надо бы освоить...

webdev.stephband.info/parallax.html - двигающиеся картинки =)
buildinternet.com/2009/03/sliding-boxes-and-cap... - двигающиеся блоки и подписи
code.google.com/p/jquery-content-panel-switcher... - jQuery Content Panel Switcher
запись создана: 11.04.2011 в 09:43

@темы: small useful things, must-know, js, jQuery, css, tutorial

18:06 

CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.
With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

Читать статью дальше

@темы: small useful things, css, tutorial

10:28 

Назначить <li class="selected">, если li выбран


@темы: js, small useful things

16:51 

Тень дня блоков (кроме IE, там тень через фильтры и очень кривая) +закругленные углы

-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;


-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

text-shadow: 1px 0px 0px #000;

Первый параметр — смещение по оси X;
Второй — смещение по оси Y;
Третий — радиус размытия;
Четвертый — цвет тени.
запись создана: 08.04.2011 в 09:40

@темы: css, small useful things

13:07 

Абсолютно позиционированный блок по центру страницы

position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;

@темы: css, small useful things

Библиотека Вашта Нерада

главная