CSS - все о css

HTML - все о html

JS - все о Javasсript

JQuery - о нем

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

UI - User Interface


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для тонуса...

Абсолютно позиционированный блок по центру страницы

position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;

@темы: css, small useful things


CSS Image Maps with an Image Sprite

CSS Image Maps: A Beginner’s Guide

Jarod Taylor

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.

@темы: css, tutorial


Понравившиеся сайты - общий склад

www.iai-jp.com/ + www.visualrepublic.net/ + www.teamfannypack.com/ - прокрутка slide
morphix.si - slider + хорошая идея неба-земли =)
www.smosh.com/ - и вот такие дизы мне очень нравятся. Когда сайт - не просто красивая картинка, а реально создает ощущение предмета/мира/существа/etc. Ну и цвета красивые, смотреть приятно =) Будем учиться у профессионалов =)
www.delibarapp.com/ - навигация О_О
www.riotindustries.com/ - двигающаяся навигация
www.ericj.se/ - аццкий интерактив =) Просто и мило, но шикааааааааарно!
www.lostworldsfairs.com/atlantis/ - креатив
www.denisechandler.com/ - отпрыгивающие вниз картинки
www.tatemae.com/ - простота, "нажимающиеся" кнопки меню, фиксированные элементы сверху и снизу
www.colly.com - гравюры и общий стиль-имитация
www.dnadarwin.org/ - стилизованный дизайн
www.wingcheng.com/ - креатив
www.thespotinferno.com/ - Графика!!! И креатив, да. Закрепленная навигационная панель и длииииииинная веб-страница. Надо так научится, красиво...
www.sproutfund.org/spring/ - цвет и расположение элементов. + любимые гравюры
www.knigi-free.ru/ - грааааафика!
loscoloresolvidados.com/ - очень красивые и приятные глазу цвета (синий+коричневый/оранжевый) и текстуры

@темы: inspiration


Назначить <li class="selected">, если li выбран

@темы: js, small useful things


Modern CSS Layouts: The Essential Characteristics

Zoe Mickley Gillenwater

Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.

But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics.

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.

Читать статью дальше

Modern CSS Layouts, Part 2: The Essential Techniques

Zoe Mickley Gillenwater

In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.

Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.

Читать статью дальше

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


Anatomy of colors in Web-design

Anatomy of Colors in Web Design: Green and Environmental Concept


This article is the first of our upcoming series, Anatomy of Colors in Web Design. Over the next few months, we'll be covering different colors, featuring web designs from around the world with particular to one specific color theme. We start today with an article about the use of the color Green in Web design and related Environmental Concept. Please stay tuned as we will continue with other colors in upcoming weeks.
Читать статью дальше

Anatomy of Colors in Web Design: Blue and the Cool Look


This is the second article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll be covering a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you missed the first of this series, you may want to catch up and read our article Green and Environmental Concept. Today’s article will explore the use of the color Blue in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.
Читать статью дальше

Anatomy of Colors in Web Design: Yellow and the Sunshine Feel


This is the third article of our series, Anatomy of Colors in Web Design. Over the next few months, we’ll continue to cover a spectrum of colors. And one color at a time, we will be featuring web design from around the world. If you have missed past articles in the series, you may want to catch up and read our articles on the colors Green and Blue. Today’s article will explore the use of the color yellow in Web design. Please remember to continue watching this space, as we take a closer look at other colors in upcoming months.
Читать статью дальше

Anatomy of Colors in Web Design: Black – A Representation of Style & Mysteryl


This series Anatomy of Colors in Web Design is back! One color at a time, we look at web designs from around the world. Over the past few months, in the series, we’ve looked at various colors like Green, Blue and Yellow. Our fourth installment of the series will look at the darkest end of the spectrum of colors – Black.
Читать статью дальше

@темы: design, color, theory


westciv.com/tools/transforms/index.html - создание онлайн CSS3 градиентов и прочих примочек CSS3

@темы: css, html, instrument


lamb.cc/typograph/ - Typograph: Scale & Rhythm
code.google.com/p/typografix/ - чистим текст
запись создана: 08.04.2011 в 11:39

@темы: instrument


CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.
With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

Читать статью дальше

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


CSS3 button-maker

css-tricks.com/examples/ButtonMaker/ - для кнопок CSS3
sixrevisions.com/resources/favicon_generators_r... - Web-based Favicon Generators and Favicon Resources

@темы: set, instrument, css


browsershots.org/ - проверка кроссбраузерности

@темы: instrument


Интересные фишки JQuery, которые надо бы освоить...

webdev.stephband.info/parallax.html - двигающиеся картинки =)
buildinternet.com/2009/03/sliding-boxes-and-cap... - двигающиеся блоки и подписи
code.google.com/p/jquery-content-panel-switcher... - jQuery Content Panel Switcher
запись создана: 11.04.2011 в 09:43

@темы: small useful things, must-know, js, jQuery, css, tutorial


Free e-books on WebDesign


Загнутые уголки на чистом CSS


Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.


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


Фоны CSS. Мат.часть

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties

@темы: css, tutorial


CSS Sprites

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Sven Lennartz

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.

Читать статью дальше

Creating & Using CSS Sprites

David Walsh

The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No Javasсript -- only CSS!
Читать статью далее

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


gomockingbird.com/ - online wireframes constructor

@темы: instrument



Сайты с таким типом прокрутки:

trevordavis.net/blog/jquery-one-page-navigation... - jQuery One Page Navigation Plugin
webdesignerwall.com/tutorials/animated-scroll-t... - Animated Scroll to Top
запись создана: 08.04.2011 в 09:58

@темы: must-know


Moving boxes

Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. We will also use the jQuery 2d transformation plugin by Grady in order to rotate the little boxes while we animate them, and the the jQuery Easing Plugin for some spice.

The beautiful photos are by Jin. Visit his Flickr photostream at www.flickr.com/photos/jinthai/

So, let’s start!


Интересный эффект =))

@темы: css, design, jQuery, js, tutorial

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