Такие незаметные чудеса

21:59 

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

Dra_Koshka
Невозможное возможно.
Закрытая запись, не предназначенная для публичного просмотра

22:35 

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

Сусуватари
Закрытая запись, не предназначенная для публичного просмотра

15:04 

Ответ на вопрос Silina Black про анимацию.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Как то раз мне посоветовали сайт с кучей полезных дополнений к фотошопу. Там действительно есть за что глазу зацепиться. Мое внимание привлекли заготовки для анимации. Огромный выбор и есть уроки по созданию. Все довольно просто. Однако в итоге получаются открытки прямоугольной формы, что для нас не всегда удобно. Поэтому Я пошел дальше.
Но все по порядку.

Сайт с заготовками здесь
Первый способ наложения анимации самый простой. Подойдет для баннеров и открыток.

С первого раза у меня не получилось потому что выбрал последний кадр, а нужно было первый.
Если анимация дергается нужно удалить некоторые кадры, естественно внимательно все просмотрев. Также удалять их придется если вес гифки слишком большой. Большинство файлообменников разрешают заливать до 5мб, ucoz до15мб.
Результат:
Второй способ посложнее, однако с его помощью можно делать вылупляшки и что угодно на прозрачной подложке.
Для начала создаем не анимированный файл со слоями. Потом копируем их в правильном порядке в анимацию. Дальше для каждого кадра выставляем обтравочную маску и параметры наложения. Кроме прозрачности это могут быть режимы наложения.

Эпиграф создается по тому же принципу, только нижний слой будет залит цветом.
Результат:

Вопрос: Полезно?
1. Да.  24  (100%)
Всего: 24

@темы: как это сделано, Кареглазый Демон

03:05 

Подробная инструкция по сборке платника часть IV

Ко мне на "вы", шепотом и с придыханием...


Я очень надеюсь что все это было хоть кому то полезно. Дайте мне об этом знать ткнув в кнопочку. Если появятся вопросы задавайте в комментариях к записям.

Вопрос: Полезно?
1. Да.  64  (100%)
Всего: 64

@темы: Кареглазый Демон, как это сделано

03:07 

Подробная инструкция по сборке платника часть III

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да.  52  (100%)
Всего: 52

@темы: Кареглазый Демон, как это сделано

03:09 

Подробная инструкция по сборке платника часть II

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да.  58  (100%)
Всего: 58

@темы: как это сделано, Кареглазый Демон

03:11 

Подробная инструкция по сборке платника часть I

Ко мне на "вы", шепотом и с придыханием...
Сразу оговорюсь что способов создания оформления бесчисленное множество как и их вариантов. И то что Я пишу мой личный опыт и тотальное ИМХО самоучки, а также отправная точка для ваших собственных экспериментов. Просто прочитав эти посты вы мало что поймете. Найдите время, сядьте и сделайте все по пунктам, а дальше творите сами.

Вопрос: Полезно?
1. Да.  74  (100%)
Всего: 74

@темы: как это сделано, Кареглазый Демон

16:55 

Немного о перемещении и полупрозрачности.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Возьмем для примера аватарку.
Она обведена полоской шириной в 4 пикселя и ей заданы два положения: обычное и с мышкой сверху.
.avatar img { border:4px solid #81735C !important;}
.avatar img { margin-left:20px;width:100px; margin-top:20px; }
.avatar img:hover { margin-left:0px;width:100px; margin-top:20px; }

Добавим эффекту полу прозрачности и плавности.
.avatar img { opacity : 0.5 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }
.avatar img:hover { opacity : 1.0 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s;}

Поменяем ширину картинки при наведении мышки:
.avatar img:hover { margin-left:0px;width:80px; margin-top:20px; }

Зададим другую обводку:
.avatar img:hover { border:2px dotted #000 !important;}

Варианты ограничены только вашей фантазией. Эффекты можно привинтить к любым селекторам оформления.

Вопрос: Полезно?
1. Да.  59  (95.16%)
2. Нет.  3  (4.84%)
Всего: 62

@темы: как это сделано, Кареглазый Демон

16:24 

Урок для Лисёнка Чу

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...


Как это сделано?
Берем код таблицы:

tr тег строчки. td ячейки. Когда переходим к следующей ячейке или строке тег закрываем при помощи /.
Выглядит это так:
Ячейка 1Ячейка 2Ячейка 3
Ячейка 4Ячейка 5Ячейка 6


Дальше используем тег MORE

Выглядит это так:


Ячейки можно заполнять чем угодно.

Однако стоит учитывать что они растягиваются под содержимое.

@темы: эпики, как это сделано, Полезное, Кареглазый Демон

19:48 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Сейчас будет признание века) Я не умею делать бесшовники... в смысле сам с нуля руками в фотошопе. Зато знаю другой отличный способ. По просьбе [Рыжая_Бестия] делюсь.
Берем любую картинку.
Создаем в фотошопе файл с шириной 245 пикселей и произвольной высотой.
Подгоняем исходник. Если на картинке есть четкий заметный объект, у нас это кот, он должен занять чуть меньше половины изображения.

Далее нам понадобится программа gimp. Скачать ее можно здесь.
Скопируем совмещенные данные нашего фона из фотошопа.
Вставим в гимп

Нажимаем

Бесшовное изображение готово. Правка - копировать видимое. Возвращаемся в фотошоп. Редактирование - вставить.

Если есть желание его можно доработать. Например создать маску и проявить кота.

Работать обязательно на самой маске а не на слое, дорисовывать и убирать ластиком и кистью. И следите чтобы на верхней и нижней границе ничего не стерлось.
Сохраняем в jpg. Вес выставляем меньше 70кб.
Готово)

Вопрос: Полезно?
1. Да.  49  (100%)
2. Нет.  0  (0%)
Всего: 49

@темы: Кареглазый Демон, как это сделано

21:19 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750px;max-height: auto;}
На эпиграф также распространяются правила обводки, полу прозрачности, тени и прочих изысков из общей ленты. Убираются они отдельной строкой.
#epigraph .paragraph img { border: none!important; opacity : 1.0 !important; box-shadow:none!important;}
Кстати подобные манипуляции лучше проводить и со смайликами. (Здесь прозрачность уменьшена)
#shsmile, #atTagBox, .smile { border: none!important; opacity : 0.4 !important; box-shadow:none!important;}
Может показаться что с эпиграфом одни проблемы, но это не так. Первая закрепленная запись дает уникальную возможность прописывать ссылки, которые в структуре дайров не предусмотрены, визуализировать их картинками и закреплять в любом месте. Единственный минус в том, что все это отображается только на главной странице дневника (как и сам эпиграф). Однако это благодатная почва для смелых экспериментов.
Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется растащить по углам оформления кнопки соцсетей. Если использовать для этих целей картинку с полупрозрачной подложкой и прописывать ссылки координатами она перекроет меню и ленту записей, к тому же не подстроится под экран. Как быть?
1. Вставляем в эпиграф новый id

Присмотритесь к подчеркнутому

2. Теперь новому id прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

Например:
Эпиграф, фото, список ПЧ:

Настройки CSS:

В результате получаем:

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


Симпатично, но хочется эффектный бэкграунд. И тут встает вопрос как его прописывать? Если через дополнительные блоки картинка останется висеть на всех остальных страницах, что не есть хорошо. И выйти из положения мне как раз помогли дополнительный id и манипуляции с эпиграфом:
Эпиграф, фото, список ПЧ:

Настройки CSS:

Результат:

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

Вопрос: Полезно?
1. Да.  25  (100%)
2. Нет.  0  (0%)
Всего: 25

@темы: как это сделано, Кареглазый Демон, CSS

17:40 

Лисьи истории by Иван Кислов

.Планета
🌿

@музыка: Хольда - Лисья песнь

21:28 

вечерние встречи над городом

Atuan
Хотел написать в дневнике о чём я мечтаю. Получилась смета.

13:51 

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

Ули
wanna hibernate?
Закрытая запись, не предназначенная для публичного просмотра

00:47 

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

*Звезды над морем~
Закрытая запись, не предназначенная для публичного просмотра

03:31 

captaingreen
Сон — для слабаков.
Никогда. Я подумаю об этом никогда.

08:15 

Чем занимались на уроках советские дети

tyanavlad
Оригинал взят у в Чем занимались на уроках советские дети
Пестики, тычинки, косинусы, производные, газовые константы…Нет такого ученика, который бы не знал, как себя занять во время нудного урока. Сейчас достаточно любого гаджета — и вопрос решен, а вот в мое время...
Недавно с бывшим одноклассником вспоминали, чем были наполнены 45 минут урока советского школьника, помимо ответов у доски и лекций учителей.


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

@темы: Моя Родина, история, праздничное

05:50 

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

megnevezetlen
Закрытая запись, не предназначенная для публичного просмотра

22:57 

Осень на алтайских озерах

Atuan
Хотел написать в дневнике о чём я мечтаю. Получилась смета.

10:45 

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

Tartalya
Закрытая запись, не предназначенная для публичного просмотра

главная