14.12-16.12
[НЕ ПРОПУСТИ!]

[14.12.] РАБОТЫ АВТОРА НЕДЕЛИ -ред работы одного мастера во вкладке прорыва

[13.12.] КОНКУРС ОТ NORM на psd и уроки по графике

[10.12.] РАБОТЫ АВТОРА НЕДЕЛИ -Eos работы одного мастера во вкладке прорыва

[01.08.] 'РОЛЕВАЯ МЕСЯЦА ОКТЯБРЬ' - 'НАБОР' любого жанра с активом от 50ти
------------------------------
[11.09.] 'РОЛЕВАЯ МЕСЯЦА СЕНТЯБРЬ' - 'ГОЛОСОВАНИЕ'

[31.07.] 'РОЛЕВАЯ МЕСЯЦА СЕНТЯБРЬ' - 'ЛЮБОГО ЖАНРА' с активом до 50ти

[31.08.] 'РОЛЕВАЯ МЕСЯЦА' - 'ИТОГИ'

[11.08.] 'РОЛЕВАЯ МЕСЯЦА АВГУСТ' - 'ГОЛОСОВАНИЕ'

[01.08.] 'РОЛЕВАЯ МЕСЯЦА АВГУСТ' - 'НАБОР' тематики мистика, постап!

[31.07.] 'РОЛЕВАЯ МЕСЯЦА' - 'ИТОГИ'

[11.07.] 'РОЛЕВАЯ МЕСЯЦА ИЮЛЬ' - 'ГОЛОСОВАНИЕ'

[02.07.] 'НАБОР' - 'от 50 пользователей!'

[02.07.] РОЛЕВАЯ МЕСЯЦА - 'ИТОГИ'

[21.06.] РОЛЕВАЯ МЕСЯЦА 'ГОЛОСОВАНИЕ'

[16.06.] РОЛЕВАЯ МЕСЯЦА 'НАБОР' тематики кроссоверов, историчек, мистики!

[08.06.] Поправки по выкупке футера больше ролевых в футере

[11.04.] РОЛЕВАЯ МЕСЯЦА 'ГОЛОСОВАНИЕ'

[02.04.] РОЛЕВАЯ МЕСЯЦА 'НАБОР' от 50 пользователей!

[02.03.] РОЛЕВАЯ МЕСЯЦА 'НАБОР' до 50 пользователей!

[01.02.] РОЛЕВАЯ МЕСЯЦА 'НАБОР' тематики реальная жизнь и Голливуд!

[01.02.] НОВЫЙ КОНКУРС 'ПАЛИТРА' противостояние цветов!

[01.02.] НОВЫЙ КОНКУРС 'ПАЛИТРА' поиск красок!

[16.12.] РОЛЕВАЯ МЕСЯЦА 'НАБОР' актив от 50 человек в сутки!

[18.11.] INSTAGRAM мы теперь есть в инсте! Логин: imagiart.ru

[18.11.] БЛОКБАСТЕРЕНО стань форумным супергером!

[15.11.] ВНИМАНИЕ! - КОНКУРС НА 'РЕКЛАМУ' Теперь без ограничений и с тематикой!

[15.11.] ВОЗОБНОВИЛИ! - РОЛЕВАЯ МЕСЯЦА 'НАБОР' Любая тематика до 50 человек в сутки!

[13.11.] Новые плюшки по голосованию за Работы Дня!

[12.11.] РЕЗУЛЬТАТ КОНКУРСА #6 'ночь живых мертвецов'

[26.10.] ВНИМАНИЕ! - КОНКУРСЫ НА 'АВЫ' и 'ЭПИКИ' Хэллоуин на носу, прими участие и получи специальный подарок за оригинальность!

[03.09.] ГОЛОСОВАНИЕ за КОНКУРС #1 'GAME OF THRONES'

[03.08.] Результаты конкурсов: Grey's Anatomy и Тайный умелец
[02.08.] "Тёмный стиль на сообщение" Давно просили темный стиль на сообщения в Авторских темах - теперь он есть!

[21.07.] "ВНИМАНИЕ! - КОНКУРСЫ" Много вкусностей и интересностей, секретный бонус!

[17.07.] "НОВЫЙ ДИЗАЙН РЕНО" Ждём Ваши отзывы и пожелания!

[01.06.] "ГОЛОСОВАНИЕ" на ролевую месяца началось!

[ЛУЧШАЯ РОЛЕВАЯ]

- -
Прорыв недели Прорыв недели Прорыв недели Прорыв недели
Прорыв недели Прорыв недели Прорыв недели Прорыв недели
Ролевой форум месяца

Photoshop: Renaissance

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Photoshop: Renaissance » Мастерская дизайнов » от вещего духа


от вещего духа

Сообщений 1 страница 20 из 33

1

от вещего духа[однако, дратути]

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

Псст. Халявных html-оформлялок хочешь? Их есть у меня: один и два.

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

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

берусь за дизайны для тестов, за верстку по вашему макету. на них фиксированная цена: дизайн теста 500 рублей, верстка вашего макета 800 рублей. если интересует, почему такой разброс: при верстке по макету колдую с кодами, стараясь привнести что-то новое, на тестовик же как правило ничего сверхъестественного не нужно. хотя если вы простите просто нарезать картинки и вставить в мой код, безо всяких изощрений, то и цена тоже соответственно меньше становится.

делаю все возможные коды html: для тем, для шаблонов анкет, для личной страницы, да для всего. пишу сам, услугами сторонних иностранных ресурсов типа shine или shadowplay не пользуюсь.

не работаю с аниме вообще — пытался, не моё. еще не пробовал в глянец [хотя хочется испытать себя]. всё остальное могу, умею, практикую.

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

   что входит в дизайн
стандартный набор для дизайна за 1000 рублей включает в себя: фон, тело форума, шапка, низ, иконки, категории, стрелки вверх-вниз, таблица, верстка, стандартные скрипты [пиар-вход, выделение кода, смена имиджа] и последующее техническое обслуживание. мне не сложно, вам приятно. дизайн прогоняю через самые ходовые браузеры: мазилла, опера и хром. стараюсь, чтобы всё везде работало как надо, а не подвергалось стремительному распаду.

оформление акций//наградок и всего вот этого вот сделаю без проблем, если нужно, но за доп. плату, с суммой по ходу дела определимся. картинки в таблицу идут в комплекте.

html коды отдельно оплачиваются, фиксированной стоимости тоже нет, все зависит от сложности конкретного кода.

   остальное
оплата на карту сбербанка. есть вебмани, но я ему что-то не очень доверяю если вообще пароль и лог вспомню.

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

код прошу не растаскивать на детальки — если я единоразово сделал вам дизайн, это не значит, что вы можете потом воспользоваться кодом и повесить на него свою графику. не надо так. вообще дизайн желательно на части не разбирать, конечно.

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

важно

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

в о п р о с н и к
штош. этот день настал - мне понадобился вопросник в теме.

нам срочно нужен дизайн, срок не больше недели.
я – вечно больной человек, заказы перманентно 2-3 в очереди всегда есть. по этим причинам я априори не успею сделать дизайн быстро (то есть: 2-3 дня это не мой случай). даже если вы мне доплатите сверху за продвижение в очереди – вот ни разу не факт, что на этой неделе у меня не случится кризиса головной боли и я не выпаду из жизни. а то и вовсе в больницу отъеду, и такое бывает

как быстро возьметесь за нас? сколько будете делать по времени?
в виду того, что у меня, я тут заметил, всегда висит 2-3 заказа, которые я параллельно выполняю, то подождать неделю минимум точно придется. дальнейший срок зависит от хитровывернутости дизайна, правок в макете и прочих деталей. обычно неделя или чуть больше. вот здесь обратите внимание: если вы получили сообщение о сроках и молча пропали – я отдам место следующему, кто напишет и согласится подождать (по закону подлости, это обычно происходит в тот же день, и да – я серьезно хд). бесполезно потом пытаться давить аргументом «мы вам раньше написали». я не экстрасенс, я не читаю мысли: скажите мне придержать место и я буду распределять время согласно этому.

сколько будет стоить?
понятия не имею) покажите мне тз и я скажу, сколько это стоит.

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

ладно, а можно нам так же круто как там, но за цену вдвое меньше?
нет, это не так работает. вот классная картинка, которая поможет понять схему: тык.

впрочем, есть дизайны, которые я делаю в стол (редко, но есть) или те, которые оказались не востребованы (заказчик отказался, пропал и так далее) – тогда я продаю дизайны за цену вдвое меньшую себестоимости.

ты возвращаешь предоплату, если мы передумаем?
я почти всегда верну вам деньги, если вы на относительно ранних сроках работы решите отказаться. но, как и у большинства дизайнеров, есть пара случаев, в которых я не возвращаю предоплату:
• если вы испарились на срок более двух недель, не оплатив законченную работу.
• если вы на последних сроках (готова большая часть дизайна, а то и вовсе он уже стоит на кодах) внезапно отказываетесь от него по независящим от меня причинам. «вы не поняли, что мы хотели» это независящая от меня причина: я всегда показываю заказчику ход работы, всегда, я даю несколько вариантов тех или иных элементов на выбор, и коль вы на этой стадии постеснялись мне сказать, что переделать – простите, это не моя вина.

во всех остальных случаях я верну предоплату. НО: во всех из них я оставляю за собой право перепродать невостребованный дизайн.

мы можем получить псд какой-либо детали или всего дизайна?
детали – да. весь псд не дам. жизнь научила, что люди очень любят перекрасить и выдать за своё, а упрощать им задачу, выдавая исходники, не мой случай) у меня и так частенько коды кусками передирают, мне одного этого уже хватает.

как нам собрать тз?
представить, что хотите видеть. хотя бы примерно. посмотреть другие дизайны, собрать данные. окошко аватара как там, скрипт как тут, наводилки как здесь. желательно – во всех подробностях и обычным языком. как вы это видите – так и пишите, если я что-то не пойму – я уточню у вас; если что-то будет невыполнимо – я скажу вам; если какая-то деталь будет плохо смотреться в общей канве – я предупрежу вас. я умею говорить ртом. отговаривать от плохих решений не стану – в конце концов, не мне с этим дизайном сидеть, но предупредить, что такая-то шапка будет плохой идей – предупрежу; тут, знаете, как в баянистой дизайнерской шутке: «да, мне тоже очень нравится результат. только никому не говорите, что это сделал я». записывайте ВСЁ. ВООБЩЕ ВСЁ, ибо «без внятного ТЗ — результат ХЗ». мне не лень читать, это не ограничит мою фантазию, но облегчит задачу и мне, и вам. и еще раз обратите внимание: если вы под конец работы внезапно поняли, что хотите еще один вариант рамочки для аватаров, бордер под картинки, сменные шапки, гифки, еще пачку иконок для важной закрытой темы или для важной с новым сообщением в ней, короче говоря любой детали, которой в тз изначально не было, итоговая цена будет выше ранее озвученной. я уже несколько раз напоролся на то, что за меньшую цену выполнил большую работу, опять на те же грабли наступать не буду. понимете, дух, конечно, альтруист и от широты души может на халяву что-то клёвенькое сделать, но не настолько – ему тоже хочется кушать.

я все равно не понимаю, как мне собрать тз. что там вообще писать?
можно заполнить анкетку, скачать тут. важно: не кидайте мне заполненную анкету вордовским файлом. если там будут ссылки, я заколебаюсь копировать и в адресную строку браузера вставлять. я лучше получу её сообщением/двумя/тремя в контакте и сохраню себе в важные.

а можно без предоплаты?
если ваш дизайн стоит в пределах 1500 – можно. во всех остальных случаях предоплата обязательна. половина – с началом работы, половина во время верстки/после верстки. начало работы – это когда я нашел исходники, открыл фотошоп и начал лепить ваш дизайн, показал наработку. тело, фон, рамку, чтобы обсудить цветовую гамму. может быть, там даже рамки не будет: голая наработка с цветовой гаммой.

«а сделайте на ваш вкус, мы вам полностью доверяем».
доступная функция без тз/с минимальным тз: достаточно просто кинуть мне примеры моих дизайнов, которые понравились и «вот что-то такое мы себе хотим». но правки по макету в этом случае минимальны. вот прям совсем. и если мне нравится золотая рамочка, а вы хотели серебряную – придется кушать золотую. вы сами выбрали опцию «тыхудожник, тытаквидишь». опять же, цена при таком раскладе плавающая: я не смогу точно сказать, сколько это будет стоить, пока я это не сделаю. нет тз – нет адекватной цены. как видите, собрать тз вам выгоднее, чем пинать на меня проработку концепта дизайна и всего проекта в графическом ключе.

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

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

ты хам/злой/зажрался.
было бы круто, но нет. все это написано здесь, потому что я сейчас осознал, как дела обстоят плохо и что без этого дополнения – все будет печально и дальше. нет, не все заказчики плохие, точнее вообще ни один (бог миловал), но оказии случались. поэтому я решил, что разумнее будет написать вот это вот всё, чтобы прояснить лишний раз какие-то моменты)

п р и м е р ы

http://forumfiles.ru/files/0019/8e/8d/71090.png

http://forumfiles.ru/files/0019/8e/8d/66869.png

http://forumfiles.ru/files/0019/8e/8d/91719.png

http://forumfiles.ru/files/0019/8e/8d/11952.png

http://forumfiles.ru/files/0019/8e/8d/25250.png

http://forumfiles.ru/files/0019/8e/8d/29967.png

http://forumfiles.ru/files/0019/8e/8d/80531.png

http://forumfiles.ru/files/0019/8e/8d/27531.png

http://forumfiles.ru/files/0019/8e/8d/94680.png

http://forumfiles.ru/files/0019/8e/8d/84701.png
[на тест]

http://forumfiles.ru/files/0019/8e/8d/65049.png
[на тест]

http://forumfiles.ru/files/0019/8e/8d/97179.png
[на тест]

Отредактировано вещий дух (07.12.2018 13:56:14)

+17

2

malleus maleficarum
http://forumfiles.ru/files/0019/8e/8d/94680.png
* посмотреть

Отредактировано вещий дух (18.04.2018 14:46:28)

+5

3

among the dead
http://forumfiles.ru/files/0019/8e/8d/85449.png
* посмотреть

+6

4

FARADAY SHIELD
http://forumfiles.ru/files/0019/8e/8d/83295.png
* посмотреть

Отредактировано вещий дух (09.04.2018 11:17:13)

+9

5

X-HUMAN
http://forumfiles.ru/files/0019/8e/8d/97179.png
* посмотреть тестовик

Отредактировано вещий дух (09.04.2018 13:13:55)

+5

6

забрали

продается

https://i.imgur.com/KSu9JCK.png
*еще один кусман

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

Отредактировано вещий дух (06.09.2018 11:34:24)

+4

7

WORLD Z TEST
http://forumfiles.ru/files/0019/8e/8d/12578.png
* посмотреть тестовик

+4

8

malleus maleficarum
http://forumfiles.ru/files/0019/95/28/44465.png
* посмотреть

+11

9

world z
http://forumfiles.ru/files/0019/a1/1a/62446.png
* посмотреть

+10

10

the vampire diaries | soul love
анимация в шапке, окошко пожертвовала из своих закромов angvar http://funkyimg.com/i/28aXU.gif  потому что я два дня искал подходящее на девинартарте и предсказуемо нашел гордое нихрена.
http://forumfiles.ru/files/0019/a7/1e/56569.png
* посмотреть

дополнительно

http://funkyimg.com/i/2GZaW.png
https://i.imgur.com/LiNwVsX.gif https://i.imgur.com/YmmmzpG.png https://i.imgur.com/Q8KO8ef.png

Отредактировано вещий дух (31.05.2018 20:34:06)

+15

11

marvel pulse: feel the beat
дрыгается и прыгается при наведениях
http://forumfiles.ru/files/0019/ad/b3/27599.png
* посмотреть

+9

12

silvergard test
частично порезан из уже готового для чистовика
http://forumfiles.ru/files/0019/ad/b3/69460.png
* посмотреть

Отредактировано вещий дух (20.06.2018 18:19:19)

+9

13

FARADAY SHIELD
меня занесло с анимацией немного
http://forumfiles.ru/files/0019/b0/24/87590.png
* посмотреть

http://forumfiles.ru/files/0019/b0/24/98388.gif http://forumfiles.ru/files/0019/b0/24/55376.gif

Отредактировано вещий дух (26.06.2018 14:51:37)

+10

14

silvergard
чистовик. пришлось оформить строку "форум, тем, сообщений, последнее сообщение", а то без нее место пустое было.
http://forumfiles.ru/files/0019/ad/b3/82725.png
* посмотреть

Отредактировано вещий дух (04.07.2018 16:20:38)

+7

15

Да, я видел темку с хтмл кодами для постов, но она пугающе пустая, поэтому пусть будет здесь.

Простенькая наводилка [инструкция: мышкой наводишь, текст поехал], наковырял бог знает когда и непонятно зачем. Мне девать некуда, а тут вдруг полезна будет и люди найдут, куда прилобанить. Настроить могу помочь, если надо, а вот переписывать чтоб там еще слева/справа прыгало и сверкало, сверху вниз шарик беспорядочно летал и еще одно окошко добавить, чтоб туда всунуть еще окошко с окошком и картинкой - не буду. Сами разберетесь тогда хд

Код:
<!--HTML-->
<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
  <div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
  <div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div></div>
 </div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 130px;}

.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}

.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
  margin: 7px 7px;
  height: 74px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#333;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>
Код, вместе со шрифтами
Код:
<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
  <div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
  <div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div>
</div>
 </div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 130px;}

.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}

.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
  margin: 7px 7px;
  height: 74px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#333;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>

Отредактировано вещий дух (04.07.2018 17:31:19)

+21

16

кте онор
большие иконки на странице просмотра тем и сообщений - не моя идея хд
да, опять трава. больше наркоманских притонов богу наркоманских притонов хд

http://forumfiles.ru/files/0019/b5/12/15437.png
* посмотреть

Отредактировано вещий дух (08.07.2018 15:16:49)

+9

17

древний мир героев и богов
а здесь он выглядит иначе, потому что я не люблю большие шапки
http://forumfiles.ru/files/0019/b4/c5/56156.png
* посмотреть

+5

18

тестовый форум
отцу на тестик личный
http://forumfiles.ru/files/0019/b8/58/84911.png
* посмотреть можно тут

+9

19

malleus maleficarum
меня всё еще выносит с анимацией.
фон ровно не отскринить.

http://forumfiles.ru/files/0019/ba/19/43439.png
* посмотреть

+3

20

аттракцион неслыханной щедрости [2]

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

Псст. Поскольку он весь такой красивенький, коль берете - огромная просьба не убирать копи. Спасибо х)

Код:
<!--HTML-->
<!--код от вещего духа-->
<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>однако, дратути</subtitle></div>
    <div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div> 
  
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">информация</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">вопросник</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">портфолио</label>
 
    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section>  
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section> 
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}


.tabs {
	padding: 0px;
	margin: 0 auto;
}

.tabs>section {
	display: none;
	padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {
    transform: translate(0px,0);
	}
}

.tabs>input {
	display: none;
	position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
</style>
Код, вместе со шрифтами
Код:
<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>однако, дратути</subtitle></div>
    <div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div> 
  
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">информация</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">вопросник</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">портфолио</label>
 
    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section>  
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section> 
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}


.tabs {
	padding: 0px;
	margin: 0 auto;
}

.tabs>section {
	display: none;
	padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {
    transform: translate(0px,0);
	}
}

.tabs>input {
	display: none;
	position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
</style>

Отредактировано вещий дух (09.09.2018 23:52:01)

+21


Вы здесь » Photoshop: Renaissance » Мастерская дизайнов » от вещего духа


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC