Web_Grabber

Простое и красивое слайд-шоу

Gorus — Fri, 19 Jun 2009 14:03:49 GMT

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

RockYou! - это действительно классный сервис для тех, кто не в теме про всякие там коды-моды, теги-пеги... возможно пока не в теме))) Но есть большое желание как-то оживить расскрасить свой сайт. И конечно, не что так не украсит главную страничку, как собственное фото в всех ракурсах жизни! Это конечно шутка, но как говорится в каждой шутке есть доля шутки)))

Итак, вы решили украсить вашу страничку лучшей подборкой своего фейса, ну для менее радикальных можно остановиться на подборке красивых картинок. И для того, чтобы заставить эти картинки красиво вылетать на радость публике достаточко всего на-всего их загрузить на этом сервисе и появившийся код вставить в тело сайта и всё! Кстати, получившийся слайдер-шоу можно без проблем редактировать, убирать, добавлять новые фотки итд итп...

Вот как выглядит эта интересная штукенция.

Дом, родом из детства

Gorus — Sat, 30 May 2009 19:23:56 GMT

Кто из нас не мечтал о своем собственном домике на дереве когда мы были детьми? Я до сих пор с удовольствием вспоминаю о том шалаше, который мы с друзьями умудрились соорудить в лесу на высоченном дереве! Какой там был потрясающий вид, и я до сих пор не могу понять как мы умудрились это сделать. Однако, даже когда мы уже больше не "маленькие дети", беззаботно гоняющие с друзьями повюду, некоторые всё же сохраняют мечту о доме на дереве. Скользя по просторам глобальной сети, я к своему большому удивлению обнаружил, что в настоящее время этот тип постройки весьма развился. Детская забава превратилась в настоящие местами жительства и даже гостиницы.

Конечно в российской действительности я еще не слышал о таком, но в Германии это уже давно здравствует и процветает. В Дойчленде вы легко и просто сможете обратить свою мечту в реальность, просто обратившись в компанию BAUMRAUM, которая специализируется на строительстве домов на деревьях и также в различных других местах природы. У них осуществляют проекты по всему миру, и вся концепция предприятия заключена в сохранении и минимальном воздействии на природу при строительстве. Планировка архитектуры просто завораживает.

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

Галерея массового потребления

Gorus — Sat, 30 May 2009 18:27:47 GMT

Последнее время, ездя на машине в нашем красивом и чистом городе, я стал всё чаще обращать внимание на просто варварское поведение некоторых водил и их пассажиров, когда из машины летят бутылки, пачки сигарет, вываливают за городом целые пакеты с мусором! И это при том, что за 500 метров при выезде из города в пригород стоят по два мусорных контейнера с каждой стороны дороги! Приятно, что у нас в городе очень чисто, очень хорошо работает службы по уборке города, но очень обидно, что такое количество варваров продолжает пачкать город и уродовать нашу прекрасную природу...

Это всё конечно досадно, но причём тут дизайн? А при том, что нашелся один очень интересный человек, который собирает эти кучи мусора и делает из них шедевры. Люди приходят смотреть на его потрясающие картины и при этом получают статистику о масштабах загрязнения нашей планеты. Может быть хоть чью-то совесть затронет эта информация и на одну пачку сигарет, вылетающую из окон авто, станет меньше на нашей планете.

Действительно мы сегодня живем в обществе массового потребления, где все, кажется, доступным, вызывая одну из наихудших проблем нашего времени, огромного количества мусора, произведенного нами, и который каждый день сбрасывается нами же в океан или разных других местах. Chris Jordan, использовал эту тему на некоторых его выставках фотографий, подводя нас людей к тому, как ужасно мы обходимся с нашей планетой. Я очень рекомендую всем посетить вебсайт Chris'а Jordan'а (http://www.chrisjordan.com) и попробовать вглядеться в его фотографии, они просто потрясающие, но вместе с тем показывают нам, как отвратительно мы обращаемся с нашим миром.

Спираль, 2009

Картина 2,5 x 3,5 метров, в трех вертикальных панелях Изображает 2.4 миллиона частей пластмассы, равной предполагаемому числу тонн пластмассового загрязнения, которые сбрасываются в мировые океаны каждый час. Вся пластмасса на этом изображении была собрана у Тихого океана.

Банки Сёра́ , 2007 (В основе композиции живопись французского художника-постимпрессиониста Жорж-Пьера Сёра́)

Изображает 106 000 алюминиевых банок, используемые и выбрасываемыев США каждые тридцать секунд.

Кроме темы глобального загрязнения природы Chris Jordan поднимает и другие насущные проблемы нашего общества. Деталировка его работ просто завораживает и заставляет подумать. Потрясающий художник.

Череп с сигаретой, 2007 [основанный на живописи Ван Гога]

Изображает 200 000 пачек сигарет, равных числу американцев, которые умирают от курения сигарет каждые шесть месяцев.

Ben Franklin, 2007 Картина 3 х 4 метра в трех горизонтальных группах

Изображает 125 000 стодолларовых банкнот ($12,5 миллионов), количество, которое Американское правительство расходовало каждый час на войну в Ираке.

Америка америкой, а это уже из наших российских будней. Вид на озеро с прошлых выходных. Так что побольше бы таких Chrisов Jordanов, может быть хоть чуть-чуть преобразится мир, который нас окружает...

CSS подписи для картинок

Gorus — Fri, 15 May 2009 10:33:28 GMT

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

Вернее будет сказать, это способ формления больше описания к картинке, чем ее самой, но надо отметить очень эффектный способ.

1. Изображение с постоянно видимым описанием.

HTML - заключаем картинку и описание в div и прописываем class="img-desc"

"img-desc">
src="sample.jpg" alt="" />

CSS

.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottombottom: 0;
leftleft: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}

Вот, что что у нас должно получиться

Симпатичный диванчик. Устраивайтесь по-удобнее...

2. Изображение с всплывающим описанием

HTML

"imgteaser">
"#">
src="Daim1.jpg" alt="Daim Graffiti" />
"more">» Всем сюда...
"desc">
Наша турфирма доставит вас на край мира с незабываемыми ощущениями.

CSS

Для начала установим и настроим основсной div и его hover параметры

.imgteaser {
margin: 0;
overflow: hidden;
float: leftleft;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: leftleft;
}
.imgteaser a:hover {
cursor: pointer;
}

Здесь мы добавляем изображению бордюр, тобишь border

.imgteaser a img {
float: leftleft;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}

Теперь разберемся с кнопкой "Всем сюда"

.imgteaser a .more {
position: absolute;
rightright: 20px;
bottombottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottombottom: 11px;
leftleft: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}

В оригинале кнопка "Всем сюда" должна исчезать при наведении, но как обычно приходится возиться с IE6

.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}

После всех этих манипуляций вот, что должно у нас получиться

» Всем сюда... ПРИЕХАЛИ Наша турфирма доставит вас на край мира с незабываемыми ощущениями.

Photoshop своими руками

Gorus — Fri, 15 May 2009 06:28:18 GMT

Лет десять назад, когда я увлекался фотографией, у меня был раритетный Зенит и много свободного времени. Мне помнится как часто меня разочаровывали проявленные снимки тем, насколько они отличались от того, что я видел в оригинале. Вначале всему виной была выдержка, которую я не правильно выставлял. Потом, когда с выдержкой фотоаппарата управляться я научился, оказалось, что выдержка есть еще в аппарате, который печатает фотографии. Одна и та же фотография, напечатанная в разных фотосалонах, могла совершенно отличаться одна от другой. И помниться мне я даже набивался участвовать в процессе печатания, чтобы получить то, что мне было надо. Но всё это творческое мучение было поделено на ДО и ПОСЛЕ... Фотошопa!

Photoshop - это не просто еще одна программа, это новая эра человечества. Это эра просто невероятных графических возможностей, всё то, о чём мы мечтали, перекручивая объективы, покупая кучи фильтров на них и всяких толстых книг с секретами как сделать так растак и вот эдак... всё это уже история, примерно такая же как наши старые транзисторы, которые мы сами паяли в гараже. Но всё же, не смотря на то, что сегодня работу фотографа или дизайнера уже невозможно даже и представить без фотошопа, временами у меня появляется чувство какой-то ностальгии по тому старому Зениту, и снова хочется закрыться в ванной, включить красную лампочку и увидеть как происходит чудо, когда на чистом листе проявляется светотень... хочется что-то сотворить своими руками, и потом, показывая друзьям гордо сказать - "это не фотошоп!"

Вот похоже, что ребята из "Art Snob Solutions" тоже иногда страдают такой меланхолией, которые решили сделать Фотошоп! И сделано это не в Фотошопе! Смотрим и восхищаемся...

Переключатель стилей дизайна

Gorus — Fri, 08 May 2009 17:57:38 GMT

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

Делается это очень просто:

1. Загружаете скрипт styleswitch.js в корень своего сайта.

2. Вставляете ссылку на этот скрипт между тегами

src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

3. Вставляете ссылки переключения стилей в тело:

"javascript:chooseStyle('none', 60)" checked="checked">Default style
"javascript:chooseStyle('blue-theme', 60)">Blue theme
"javascript:chooseStyle('brown-theme', 60)">Brown theme

Вот примерно так всё вместе это должно выглядеть в коде:

"stylesheet" type="text/css" href="default.css" />
"alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" />
"alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.css" />
src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
"javascript:chooseStyle('none', 60)" checked="checked">Default style
"javascript:chooseStyle('blue-theme', 60)">Blue theme
"javascript:chooseStyle('brown-theme', 60)">Brown theme

Как это работает можно увидеть на этом блоге, кликаем по этим ссылкам →

Dark Light

Смотрим и вдохновляемся классными примерами сайтов с переключателями стилей дизайна.

1. Sparklette

2. Kineticshadows

3. Kulturbanause

4. Webstaze

5. Popurls

6. Urbanchip

7. Wish tree

8. Mixoart

9. Ps-designstudio

10. Marius Roosendaal

11. Diegovalobra

12. Switch Display Options

Визитная карточка - том III

Gorus — Thu, 07 May 2009 12:25:45 GMT

Продолжаем обзор визиток. История возникновения визиток.

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

• Первое официально-историческое упоминание о визитке относится ко временам правления короля Людовика XIV. Появившись во Франции, визитка стала необходимостью, знаковым атрибутом для представителей Высших слоёв населения того времени, став для них обязательным аксессуаром. Имея вид игральной карточки с именем визитёра (откуда и пошло название визитки — от фр. слова «Vizite» «визит»), визитка презентовала своего обладателя с лучших его сторон.

• Первая напечатанная визитка была найдена в Германии и датируется 1786 годом. Визитки становились необходимостью с целым перечнем правил этикета по их обращению. германская аристократия следовала французскому опыту. В последствии визитки стали атрибутом дам и господ среднего класса и отсутствовали у простых сословий.

• В шестнадцатом — семнадцатом веках гравированные визитки (тогда они назывались — «визите-билетте») уже имели горожане Флоренции и Венеции. Именно там в то время была отлично развита полиграфия. Изготовление визиток приобрело очертания особого вида искусства, занимались которым одни из лучших мастеров того времени.

Камера для визитных карточек, запатентованная Адольфом-Эженом Диздери в 1854 году

Фотографы-портретисты, чтобы успешно конкурировать с литографами и граверами, стремились делать фотографии большего размера и более импозантные. В 1854 году Адольф-Эжен Диздери (1819—1890?) запатентовал в Париже «карт де визит» — камеру с четырьмя объективами, которая делала восемь небольших фотографий размером 3,25 на 1,125 дюйма на полной пластине размером 6,5 на 8,5 дюйма.

Эти восемь фотографий, каждая из которых представляла собой визитную карточку размером 4 на 2,5 дюйма, продавались примерно за 4 доллара, более чем вдвое дешевле того, что обычно запрашивали портретные фотографы за один полноразмерный отпечаток. Диздери зарабатывал и тратил миллионы. В 1866 году ненасытный спрос на «карт де визит» так же неожиданно прекратился, как и начался. Диздери выдумывал различные новшества, чтобы вернуть к жизни свой угасающий бизнес, либо насаждал трюкачество на уже существующие фотографии вроде фотографии на шелке, на керамике.

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

И выход был найден — альбом для визитных карточек. Некоторые альбомы продавались по обычной цене, но были и искусно сделанные, переплетенные хорошо обработанной и дорогой кожей. Такой альбом стал обязательной принадлежностью, незаменимым предметом беседы в каждом салоне и художественной мастерской того времени.

Страница из редкого альбома визитных карточек различных французских фотографов конца 1850-х и начала 1860-х годов

Смотреть » Том 1 • Том 2

Визитная карточка - том II

Gorus — Thu, 07 May 2009 12:11:46 GMT

Продолжаем обзор визиток. Немного иноформации о витках.

Визитная карточка (визитка) — традиционный носитель контактной информации о человеке или организации. Визитки условно можно разделить на виды: личные, деловые и корпоративные.

• Личные визитки в основном используются в неформальном общении при дружеском знакомстве. Также популярны они среди фрилансеров В такой визитке, как правило, указываются имя, фамилия и телефонный номер владельца. Должность и адрес в этой визитке можно опустить. Печать визитки может быть исполнена в любом стиле и разрабатываться в соответствии с индивидуальными предпочтениями владельца.

• Корпоративная визитная карточка, как правило, не содержит имён и фамилий. При печати, в ней указывается информация о компании, сфера деятельности, перечень предоставляемых услуг, контактные телефоны, карта проезда, адрес веб страницы. Обычно корпоративная визитка отражает фирменный стиль компании. Имеет рекламный характер и в основном используется на выставках, конференциях, съездах.

• Деловая визитка используется в бизнесе, на официальных встречах и переговорах, для предоставления контактной информации своим будущим клиентам. На деловых визитках обязательно указываются имя, фамилия, должность бизнесмена, а также название фирмы и вид её деятельности. В разработке визитки используется фирменный стиль компании и логотип. Такие визитки обычно имеют строгий дизайн. У державных служащих и депутатов на визитной карточке может находиться изображение государственных знаков отличий такие как флаг и герб страны. Деловая визитная карточка без адреса также не соответствует нормам этикета. Исключеним являются дипломаты и высшие государственные должностные лица.

Смотреть » Том 1 • Том 3

Type Faces - Типо фейсы

Gorus — Tue, 05 May 2009 11:53:28 GMT

Как то на YouTube я видел как один художник рисовал огромный настенный портрет... чем бы вы думали? тушкой гуся! Я когда смотрел не сразу понял, что это за извращение. Подумал, что этот мужик извращенец, что он там вытворял с этим гусем, макал его в краску, кидал об стену, мазал эту стену краской... но спустя пару минут стало понятно, что там происходит, камера иногда отъезжала и начинали вырисовываться контуры... через некоторое время зрителям показали то, что получилось. Этим что-то оказался отлично прорисованный портрет!

Тот ролик еще раз убидительно доказал, что если ты художник, то и гусём нарисуешь то, что другие и кистью Пикасо не сподобятся... И для убедительности сего доказательства предлагаю посмотреть и вдохновится портретами нарисованными типографскими шрифтами.

Итак, вдохновляемся фейсами... Типа фейсами!

Планета Маленького принца

Gorus — Tue, 05 May 2009 10:25:56 GMT

Вы когда нибудь читали "Маленького принца" Экзюпери? О мальчике, у которого была своя планета! Каждый мальчишка мечтает о такой. И я когда то тоже мечтал. Эта одна из моих любимейших книг.

"Самого главного глазами не увидишь. Зорко одно лишь сердце..." - это уже всеминая классика. Так вот все картинки в этой книжке нарисовал сам Экзюпери, и именно он по праву должен быть признан как первый художник, придумавший такой концепт, который сегодня называют Polar Panorama. Потрясающие картинки.

Итак, вдохновляемся красивыми планетами из волшебного мира детства...