Original Designs бесплатники, платники и уроки по созданию оформлений

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

Заказ KontRayen

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

Вопрос: Понравилось?
1. Да  12  (80%)
2. Нет  3  (20%)
Всего: 15
Всего проголосовало: 15

@темы: дизайн, по группам/фильмам/сериалам/играм, Кареглазый Демон, заказ, CSS

04:45 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А давайте я с вами чем нибудь полезным поделюсь... для разнообразия) Все скрины кликабельны.
Мне лично этот лайфхак пригодился при оформлении постов для ФБ. Но при сборке CSS это также полезная штука.
Иногда бывает что верх и низ вашего дизайна на полупрозрачной подложке, то есть экстратоп и экстработтом в png. А середина в jpg. Фотошопный макет красив и монолитен, а при заливании в БИ оттенки разнятся. Причем бывает так что в фотошопе у вас одно, а на дайрах другое. Вне зависимости от формата сохранения. (Дайри магия не иначе:-D)
Все нижеизложенное выстрадано проверено на себе долгим и упоротым упорным трудом)
1. Не ленитесь. Сборка макета кропотливый и нудный процесс, но результат того стоит.
2. Всегда используйте направляющие для разграничения деталей оформления. И соответственно разрезайте на части только по ним.
3. Не делайте вот так:

То есть не кадрируйте ваш макет и не сохраняйте его куски в png.
4. Как надо.
Выделяем нужную нам область. И жмем Скопировать совмещенные данные
Далее создаем новый документ. Файл - Создать И в выпавшем окошке обязательно выбираем этот цветовой профиль.
Нажимаем Ctrl+V. И дальше работаем с этим изображением. Удаляем слой с белым фоном.
В отступление от темы скажу что раньше многие жаловались на тяжесть моих оформлений из за большого количества и размера изображений. Я естественно искал выход из положения. И нашел.

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

Обязательно выбираем прозрачность и png 24 для полупрозрачных частей и jpg для непрозрачных. Внизу слева можно увидеть итоговый вес изображения.

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

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

@темы: CSS, как это сделано

22:22 

Заказ Mr.Gold

Ко мне на "вы", шепотом и с придыханием...
Оформление с фиксированным меню и фоном дневника.

Меню в открытом виде:

@темы: заказ, дизайн, голубое-сине-фиолетовое, Кареглазый Демон, CSS

20:17 

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

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


КОД:


КАРТИНКИ:
У ССЫЛОК s015.radikal.ru/i332/1708/4f/b23e8b0fb941.png
НАВЕРХ s013.radikal.ru/i324/1708/e6/bde0ee0484e3.png
КУРСОР s018.radikal.ru/i514/1708/a9/75cf5d74fe22.png
НИЗ s010.radikal.ru/i311/1708/3b/b7bb16dd8696.png
СЕРЕДИНА s019.radikal.ru/i642/1708/53/7b82aa2dbfc0.png
ВЕРХ s019.radikal.ru/i636/1708/27/8e052c15200f.png
КРЫША s11.radikal.ru/i183/1708/cb/a3c2464e237d.png
ФОН s019.radikal.ru/i635/1708/91/cb6ecdb92b14.jpg
МЕНЮ s015.radikal.ru/i332/1708/06/73a3cad9b00e.png

НАСТРОЙКИ:
дизайн блочный
панель слева
гарнитура Georgia заголовок 13, текст 16
цвет текста заголовок, записи, ссылки #241405



Вопрос: Понравилось?
1. Да  14  (87.5%)
2. Нет  2  (12.5%)
Всего: 16
Всего проголосовало: 15

@темы: CSS, Кареглазый Демон, Лето, голубое-сине-фиолетовое, дизайн, желто-оранжевое, зеленое, нежное, песочно-бежевое, цветы

21:12 

Заказ Mr.Gold

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

CSS Минимализм

Огненный Бес
Скромник с чертиками в глазах
Несколько однотипных CSS дизайнов в разных цветовых вариантах в общее пользование
В работающем виде можно посмотреть здесь



Страница комментариев

Установить автоматически вариант 1

НАСТРОЙКИ

Другие варианты
Все скрины кликабельны
Настройки для установки в ручную по запросу







Вопрос: Нравится?
1. Вариант 1  1  (1.61%)
2. Вариант 2  7  (11.29%)
3. Вариант 3  6  (9.68%)
4. Вариант 4  8  (12.9%)
5. Вариант 5  5  (8.06%)
6. Вариант 6  7  (11.29%)
7. Вариант 7  3  (4.84%)
8. Все!  25  (40.32%)
Всего: 62
Всего проголосовало: 46

@темы: природа, морское, Огненный Бес, CSS

22:28 

Заказ для...

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Все настройки у заказчика. Заказчик пожелал остаться неизвестным.

@темы: CSS, Кареглазый Демон, дизайн, заказ, песочно-бежевое, фэнтези

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

14:56 

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

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

03:44 

В общее пользование.

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

Вопрос: Нравится оформление?
1. Да.  42  (93.33%)
2. Нет.  2  (4.44%)
3. Одел  1  (2.22%)
Всего: 45
Всего проголосовало: 45

@темы: песочно-бежевое, красное, коричневое, зеленое, желто-оранжевое, дизайн, Осень, Кареглазый Демон, CSS

19:06 

С разрешения заказчицы платник в общее пользование.

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

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

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

22:42 

Огненный Бес
Скромник с чертиками в глазах
Дизайн для себя



Страница комментариев

@темы: Огненный Бес, CSS

17:13 

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

CSS в общее пользование

Огненный Бес
Скромник с чертиками в глазах
Дизайн резиновый. Фон фиксированный.



Детали

Установить автоматически

Настройки

Вопрос: Нравится дизайн?
1. Да  26  (100%)
Всего: 26

@темы: css, Огненный Бес, абстрактные, голубое-сине-фиолетовое, желто-оранжевое

23:49 

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

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

@темы: черно-белое, книжно-писательское, заказ, дизайн, Кареглазый Демон, css

01:27 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Заказ для KontRayen.
Все настройки у заказчика. Фон фиксированный.

@темы: по группам/фильмам/сериалам/играм, заказ, дизайн, Кареглазый Демон, css

11:32 

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

Установить автоматически

Вопрос: Нравится оформление?
1. Да  119  (87.5%)
2. Нет  4  (2.94%)
3. Одел  13  (9.56%)
Всего: 136
Всего проголосовало: 125

@темы: фэнтези, стимпанк, коричневое, желто-оранжевое, дизайн, Кареглазый Демон, css

00:22 

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


видео

Все настройки у заказчика.

@темы: стимпанк, коричневое, заказ, женственное, дизайн, Кареглазый Демон, css

главная