Code a Web Magazine Style Dropdown Navigation Menu - подробный рассказ про то, как делается такое меню.
Еще меню
воскресенье, 04 сентября 2011
Code a Web Magazine Style Dropdown Navigation Menu - подробный рассказ про то, как делается такое меню.
Еще меню
пятница, 02 сентября 2011
01:31
Доступ к записи ограничен
Закрытая запись, не предназначенная для публичного просмотра
пятница, 26 августа 2011
Выковырянный из одного из примеров меню ниже скрипт для самого элементарного выпадающего меню...
$(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);
});
});
});
$(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);
});
});
});
Responsive jQuery Slider Plugin Flexslider - очень симпатичный jQuery слайдер. Основное отличие от многих похожих - изменяет свои размеры в зависимости от ширины экрана. Демо
О нем же в Smashing Magazine
четверг, 25 августа 2011
Сайт-портфолио дизайнера - это вообще отдельный жанр сайтов. На них дизайнеры стараются показать, что они умеют и ими же завлекают клиентов, особенно когда речь идет о фрилансере. Они как правило интересные, красочные и сочатся идеями. Конкретно этот зацепил, решила разобраться чем.
читать дальше
). Все очень лаконично и в меру. Бумажная текстура, рисованые линии, и "блокнотный" край - все отсылает к реальному миру, но при этом нет конкретной картинки блокнота. Ненавязчивый мягкий градиент на шапке. 
среда, 24 августа 2011
понедельник, 22 августа 2011
CSS Selectors Overview. Part 1 - Обзор селекторов. Часть 1. Основные + атрибутивные
CSS Selectors Overview. Part 2 - Обзор селекторов. Часть 2. Сложные селокторы и псевдо-классы
Была задача сделать верстку в две колонки так, чтобы ширина колонок вообще не была задана (т.е. никаких пикселей или процентов) и все само менялось в зависимости от содержимого блоков. Решила так, вроде работает:
#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;
}
#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;
}
четверг, 18 августа 2011
Multiple Backgrounds and Borders with CSS 2.1 - очень интересная статья про использование :after и :before псевдо-классов для создания необычных штук. Особенно порадовала симуляция parallax эффекта (зеленый блок с гориллами в демке)
upd. Ну и в дополнение - ленточка на чистом CSS3 и ни одного рисунка. В основе те же :after и :before
Как сделать разные эффекты при наведении мыши и после ее убирания? Когда добавляем 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;
}
Спасибо Крису
Иллюстративное демо Криса
Пример:
#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;
}
Спасибо Крису
Иллюстративное демо Криса
вторник, 16 августа 2011
Уже упомянутый ранее редизайн CSS tricks полон вкусняшек. Например, при наведении на "Browse Archives" под поиском надпись становится радужной. Сделано при помощи очень волшебной формулы:
a:hover span:nth-of-type(5n-X), где X меняется от 0 до 5
Ну и каждая буква в отдельном span
Про псевдо-класс :nth-of-type W3C и HTML book
О разнице между :nth-of-type и :nth-child на CSS Tricks
a:hover span:nth-of-type(5n-X), где X меняется от 0 до 5
Ну и каждая буква в отдельном span
Про псевдо-класс :nth-of-type W3C и HTML book
О разнице между :nth-of-type и :nth-child на CSS Tricks
14:37
Доступ к записи ограничен
Закрытая запись, не предназначенная для публичного просмотра
Чтобы сразу понять о чем речь, берем шикарный редизайн CSS Tricks и начинаем жестоко менять размеры окна =)
- W3C о Media Queries
И пара хороших туториалов:
CSS3 Media Queries
Adaptive & Mobile Design with CSS3 Media Queries
И пара хороших туториалов:
CSS3 Media Queries
Adaptive & Mobile Design with CSS3 Media Queries
Creating Reusable & Versatile Background Patterns - небольшой фотошопный туториал по созданию универсальных фонов.
Начинаю собирать статьи про дизайн логотипов. Придется и под них создавать отдельный тег - logo - т.к. область довольно специфическая.
И приветствую новых ПЧ, неизвестно откуда понабежавших...
Logo Design 101: What Is a Logo? - основные принципы, что такое логотип и с чем его едят.
Logo Design 101: Six Tips For Creating Iconic Logos - 6 советов. 6 очень важных и нужных советов.
И приветствую новых ПЧ, неизвестно откуда понабежавших...
Logo Design 101: What Is a Logo? - основные принципы, что такое логотип и с чем его едят.
Logo Design 101: Six Tips For Creating Iconic Logos - 6 советов. 6 очень важных и нужных советов.
Separating Content: 10 Ways to Draw the Line - очень полезная подборка, немного раздвигающая горизонты
50 Fantastically Clever Logos - потрясающая подборка потрясающих логотипов. С комментариями Joshua Johnson
среда, 10 августа 2011
jQuery for Absolute Beginners Video Series - собственно взято из подборки в предыдущем посте. Видеоролики разбиты по дням. Арбайтен!
22 Articles and Tutorials for Getting Started with jQuery - потому что уже пора наконец в нем разобраться а не тупо таскать готовые фишки... Шикарная же вещь...