CSS - все о css

HTML - все о html

JS - все о Javasсript

JQuery - о нем

DESIGN - как оно все на мониторе...

UI - User Interface

PHOTOSHOP - о нем

DOWNLOADS - вкусняшки, которые можно скачать

NAV - навигационные меню

TRAINING - примеры того, чему я учусь

WTF??? - как делать НЕ надо


LOGO - все о логотипах

TUTORIAL - подробные полезные руководства

SET - подборка интересностей, которую надо бы разобрать на зап.части...

MUST-KNOW - то, что мне надо освоить в ближайшее время

IMPORTANT - важные вещи, не терять

INSPIRATION - вдохновлялки

SMALL USEFUL THINGS - полезные кусочки кодов

INSTRUMENT - инструменты =)

THEORY - голая теория и никаких кодов...

COLOR - все, что связано с цветом: туториалы, инструменты, иллюстрации


Для тонуса...
URL
Возникла необходимость научиться дизайнить е-мейлы - а там внезапно не все так просто. 2 полезные статьи, на которые наткнулась в первую очередь:



20 Email Design Best Practices and Resources for Beginners
- базовая статья с основами и ссылками на другие полезные статьи




Responsive Email Design
- да-да, и е-мейлы могут быть "отзывчивыми". Будем изучать...

@темы: html, css, design

20:07

Колбы

Хорошие уроки по рисованию колб:





@темы: photoshop, tutorial

$(document).ready(function(){

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



});


@темы: small useful things, jQuery



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

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

@темы: css, small useful things

00:39



Бесплатный фотошопный плагин для создания различных (!) сеток

@темы: photoshop, downloads

15:09

Ленточка для навигационной панели в Аргемону. Горжусь собой.



@темы: training

В последнее время все больше проектов делаю с использованием media queries и концептов адаптивного дизайна. Наткнулась на очень полезную статью на тему "куда девать навигацию на маленьком экране????????" =))) - Responsive Navigation Patterns

Fluid type - и сразу еще одна интересная статья, в этот раз на тему размера шрифта. Очень нужная мысль про 45-75 символов на строку и ее практическое применение в виде

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

@темы: theory, design



Я села, наконец, за освоение html 5 - надо же когда-то начинать. В основном пока интересуют основные теги layout (как оно по-русски? оО), т.к. они сейчас вроде как поддерживаются всеми современными браузерами.

Coding An HTML 5 Layout From Scratch - начинаю со статьи еще 2009 года, которая все еще актуальна и содержит как раз необходимые базовые вещи.

Краткие записи или Что полезного я вытащила из статьи:

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

@темы: html



Шаблон от Template Monster
- живая демка шаблона продающегося на templatemonster.com. Все, как я люблю: грандж, плавный скроллинг, ненавязчивый и очень красивый параллакс.

@темы: inspiration



50 amazing CSS button sets
- 50(!) потрясающих сетов CSS-ных кнопок от WebDesignShock! Много вкусного и многому можно поучиться...

@темы: UI, css, set



Золотые правила успешной кнопки
- хорошая статья на Хабре про кнопки =)

@темы: UI, theory, design

15:52

15:46

jQuery ListNav Plugin - полезный плагин для списков...

@темы: important, jQuery, downloads

12:54



Browser Shots
- потерянная и вновь найденная онлайн-штука для проверки кросс-браузерности

@темы: instrument



Zocial CSS social buttons
-вот эти вот красоты сделанные на чистом css. Прелестно. Увидеть живьем

@темы: UI, css, downloads

Сегодня у нас в меню jQuery вкусняшки от Codrops!

1.

Typography Effects with CSS3 and jQuery
- очень красивые извращения над текстом при помощи css3 & JQuery. Демки


2.

Elastic Image Slideshow with Thumbnail Preview
- очень необычный слайдер! Полностью респонсив (как оно по-русски? оО) и красиво двигается =) Посмотреть

@темы: jQuery

16:45

Шрифты



Fonts2U
- архив бесплатных и условно бесплатных шрифтов. Очень удобный поиск, возможность посмотреть шрифт на своем тексте и скачать font-face kit(!!!)

@темы: downloads

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

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, small useful things, jQuery

"Hypothetically, let’s say you started with a large, 1020px wide site. Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint. Set a media query for that point and fix everything that you need to address. Once you’re finished, grab that window and find the next point of ugliness. Repeat these steps until you’re satisfied with the range that you’ve accounted for. "
Joshua Johnson


@темы: inspiration, css

13:19



@темы: color