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
  • ↓
  • ↑
  • ⇑
 
15:09 

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


@темы: training

14:39 

Приятный шаблон



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

@темы: inspiration

10:33 

Prefixr

Нашла шикарный инструмент, которым явно буду пользоваться каждый день. Достало писать кроссбраузерный css3, когда вместо 2х строчек:

border-radius: 6px;
transition: all 1s ease-in;

Приходится ручками и копипастом выводить вот это:

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
transition: all 1s ease-in;

За нас это может сделать prefixr.com, за что ГРОМАДНОЕ спасибо его создателям!

@темы: css, instrument

12:54 



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

@темы: instrument

16:45 

Шрифты



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

@темы: downloads

21:48 

Очень, очень хороший принцип!

"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

@темы: css, inspiration

15:49 

Работа со шрифтом О_О


@темы: inspiration

01:49 

Слайдеры



Weekly Freebies: 25 Awesome Free jQuery Image Sliders and Carousels
- набор волшебных вещей. Оооочень полезные штуки =)

@темы: jQuery, set

20:39 

Меню =)


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

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

@темы: nav, jQuery, downloads

11:51 

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



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

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

@темы: inspiration

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

16:01 



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

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

@темы: css

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

14:37 

lock Доступ к записи ограничен

Только для ПЧ, потому что проект в стадии разработки

URL
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:18 

Separating Content: 10 Ways to Draw the Line



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

@темы: design, theory

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

22:30 

E-mail design

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



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




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

@темы: design, css, html

20:07 

Колбы

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




@темы: photoshop, tutorial

19:25 

Fade in on load

$(document).ready(function(){

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



});

@темы: jQuery, small useful things

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

главная