• ↓
  • ↑
  • ⇑
 
20:39 

Меню =)


Code a Web Magazine Style Dropdown Navigation Menu
- подробный рассказ про то, как делается такое меню.

Еще меню
запись создана: 25.08.2011 в 17:47

@темы: nav, jQuery, downloads

00:55 

Web Accessibility for Designers


@темы: design, theory

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

10:40 

Вкусный слайдер с пирожками =)



Responsive jQuery Slider Plugin Flexslider
- очень симпатичный jQuery слайдер. Основное отличие от многих похожих - изменяет свои размеры в зависимости от ширины экрана. Демо

О нем же в Smashing Magazine

@темы: downloads, jQuery

11:51 

Зацепил сайт, решила поанализировать...



Сайт-портфолио дизайнера - это вообще отдельный жанр сайтов. На них дизайнеры стараются показать, что они умеют и ими же завлекают клиентов, особенно когда речь идет о фрилансере. Они как правило интересные, красочные и сочатся идеями. Конкретно этот зацепил, решила разобраться чем.

читать дальше

@темы: inspiration

10:55 

Интересность



Adopting Feng Shui in Web Design
- фен-шуй и веб-дизайн. Внезапно :)

@темы: design, theory

17:55 

CSS селекторы



CSS Selectors Overview. Part 1
- Обзор селекторов. Часть 1. Основные + атрибутивные



CSS Selectors Overview. Part 2
- Обзор селекторов. Часть 2. Сложные селокторы и псевдо-классы

@темы: css

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

16:01 



Multiple Backgrounds and Borders with CSS 2.1
- очень интересная статья про использование :after и :before псевдо-классов для создания необычных штук. Особенно порадовала симуляция parallax эффекта (зеленый блок с гориллами в демке)

upd. Ну и в дополнение - ленточка на чистом CSS3 и ни одного рисунка. В основе те же :after и :before
запись создана: 18.08.2011 в 15:49

@темы: css

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

15:54 

Милое такое извращение

Уже упомянутый ранее редизайн 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

@темы: css

10:37 

То, что надо бы освоить - CSS3 Media Queries

Чтобы сразу понять о чем речь, берем шикарный редизайн CSS Tricks и начинаем жестоко менять размеры окна =)



- W3C о Media Queries

И пара хороших туториалов:

CSS3 Media Queries

Adaptive & Mobile Design with CSS3 Media Queries

@темы: css, tutorial, must-know

10:30 



Creating Reusable & Versatile Background Patterns
- небольшой фотошопный туториал по созданию универсальных фонов.

@темы: photoshop, tutorial

10:25 

Logo Design

Начинаю собирать статьи про дизайн логотипов. Придется и под них создавать отдельный тег - logo - т.к. область довольно специфическая.
И приветствую новых ПЧ, неизвестно откуда понабежавших...

Logo Design 101: What Is a Logo? - основные принципы, что такое логотип и с чем его едят.

Logo Design 101: Six Tips For Creating Iconic Logos - 6 советов. 6 очень важных и нужных советов.
запись создана: 16.08.2011 в 10:04

@темы: logo

10:18 

Separating Content: 10 Ways to Draw the Line



Separating Content: 10 Ways to Draw the Line
- очень полезная подборка, немного раздвигающая горизонты

@темы: design, theory

10:14 

50 Fantastically Clever Logos



50 Fantastically Clever Logos
- потрясающая подборка потрясающих логотипов. С комментариями Joshua Johnson

@темы: logo

10:59 



jQuery for Absolute Beginners Video Series
- собственно взято из подборки в предыдущем посте. Видеоролики разбиты по дням. Арбайтен!

@темы: tutorial, must-know, jQuery

10:56 

22 Articles and Tutorials for Getting Started with jQuery - потому что уже пора наконец в нем разобраться а не тупо таскать готовые фишки... Шикарная же вещь...

@темы: jQuery, set, tutorial

10:23 

Цвета хороши


@темы: color

17:12 

Шикарный пример того, как НЕ НАДО делать навигацию



Высота
- вот такая двигающаяся хрень снизу - аццки креативная навигация. Шикарный пример случая, когда отличная вещь применена не по делу. Двигается оно быстро, пользователь прочитать не успевает. Да и большая часть столбиков вовсе не ссылки. С толку сбивает ужасно.

Принесла ochen_tiho

@темы: WTF???

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

главная