• ↓
  • ↑
  • ⇑
 
Записи с темой: css (список заголовков)
22:30 

E-mail design

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



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




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

@темы: design, css, html

01:27 

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



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

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

@темы: css, small useful things

23:11 

Много, ОЧЕНЬ много CSS-кнопок!



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

@темы: UI, css, set

12:38 

Кнопочки



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

@темы: UI, css, 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

12:42 

Красивое и функциональное меню



Orman Clark’s Vertical Navigation Menu: The CSS3 Version
- подробный туториал по созданию вот такого красивого меню с CSS3, jQuery и минимумом рисунков.
Демо

+ ввожу новый тег - nav - чтобы легче было искать идеи для меню...

@темы: tutorial, nav, jQuery, inspiration, css

00:54 

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

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



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

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





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

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

15:50 



ANIMATABLE
- набор шикарнейших примеров использования CSS3 Animation на github

@темы: css, set

11:37 

Полезные штуки про SVG

Все еще не могу разобраться о своим временем, поэтому посты все еще не частые...



A Farewell to CSS3 Gradients
- очень шикарная статья! Подробно так рассказывается, почему css3 градиенты не так просты и шикарны, как кажется на первый взгляд. Но это не все - самое интересное дальше: про применение моего любимого SVG для создания например такого.

@темы: css

01:31 

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

Временно закрыто

URL
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

17:55 

Вообще полезные ресурсы

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

10:43 



ULTRANOIR
- сайт дизайн студии, демонстрирующий html5+css3 во всей красе. Все очень красиво и очень непонятно. Но красиво, да. Заставка в виде встроенного видео шикарна, да и внутри множество примочек. Только все это очень тяжелое...

Отдельно мне понравились выдвигающиеся блоки в блоге, сделанные предельно просто:
читать дальше

@темы: css, inspiration

10:35 

Литература

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


@темы: theory, downloads, design, css

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

главная