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

Записи с темой: css (список заголовков)
03:11 

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

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



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



Все скрины кликабельны




И для любителей полного минимализма. Вариант "Без картинок"



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



Вопрос: Нравится
1. Осень 
9  (15%)
2. Зима 
8  (13.33%)
3. Весна 
8  (13.33%)
4. Лето 
5  (8.33%)
5. "Без картинок" 
6  (10%)
6. Все 
19  (31.67%)
7. Надел 
5  (8.33%)
Всего: 60
Всего проголосовало: 31

@темы: дизайн, Осень, Огненный Бес, Лето, Зима, Весна, CSS

13:28 

Пять минималистичных оформлений.

Изумрудный Демон
Угрюм - и - Пиздат

Вопрос: Нравится?
1. Сиреневый 
13  (21.67%)
2. Синий 
13  (21.67%)
3. Зеленый 
7  (11.67%)
4. Оранжевый 
6  (10%)
5. Серый 
17  (28.33%)
6. Одел, спасибо. 
4  (6.67%)
Всего: 60
Всего проголосовало: 27

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

01:41 

Кофейный CSS в общее пользование

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

Вопрос: Нравится дизайн?
1. Да 
28  (84.85%)
2. Нет 
5  (15.15%)
Всего: 33

@темы: песочно-бежевое, дизайн, Огненный Бес, CSS

18:48 

CSS в добрые руки

Спящий эльф
Есть личности — святая простота играет их поступки, как по нотам, наивность — превосходная черта, присущая творцам и идиотам.©
Продолжая свои попытки научиться css-шному делу, получился вот такой простой и скромный платник.

Так как почему на ноуте программа записи с экрана отказывается работать, общий вид дизайн представлю скринами
Еще скрины

Смотреть

Вопрос: Нравится?
1. Да 
18  (78.26%)
2. Нет 
5  (21.74%)
Всего: 23

@темы: цветы, дизайн, голубое-сине-фиолетовое, Спящий Эльф, CSS

23:02 

Изумрудный Демон
Угрюм - и - Пиздат
Оформление для сообщества GogolFandom
Все настройки у заказчика.

еще скрины

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

00:16 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для Ver/o/nika
Все настройки у заказчика.

смотреть

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

22:15 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для второй победительницы розыгрыша Элинор Реддл
Да, я немного сменил ник. Но демоном быть не перестал)
Пользуясь творческой свободой, мы собрали это оформление в соавторстве с Спящий эльф. Опыт был интересный, продуктивный и приятный. И думаю это не последняя работа в тандеме.
Заказчице отдельное спасибо за тему оформления. Сладкоежкам работалось приятно вдвойне)


Новых розыгрышей пока не предвидится.

@темы: CSS, Кареглазый Демон, Спящий Эльф, дизайн

23:17 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для победителя розыгрыша Душа без лица Извиняюсь за долгое ожидание. И благодарю за помощь Kai S.H. Moro.



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

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

12:38 

Заказ Голос радуги

Изумрудный Демон
Угрюм - и - Пиздат
16:29 

Darakna_theme#4

Darakna
Кто живёт прошлым, тот обретет боль.
Не слишком навороченный центрированный дизайн. Увеличение размера БИ не обязательно.

Комментарии:
Аватарки:



Вопрос: Нравится дизайн?
1. Да 
22  (91.67%)
2. Очень 
2  (8.33%)
Всего: 24

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

18:45 

Darakna_theme#3

Darakna
Кто живёт прошлым, тот обретет боль.
Центрированный дизайн в стиле Локи



Вопрос: Нравится дизайн?
1. Да 
37  (59.68%)
2. Нет 
2  (3.23%)
3. Очень 
23  (37.1%)
Всего: 62

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

19:46 

Цветочный теплый дизайн

SoraNoir
Ранимый эстет
Мой первый дизайн для платного аккаунта в свободное пользование. Довольно простой, но для меня, как новичка в этом, весьма значимое событие.
И я ничего не смог бы сделать без помощи и поддержки Кареглазого Демона. Именно благодаря ему и случилось это знакомство с кодами дайровских css - дизайнов.
Этот человек мне подробно разжевал про каждый селектор, терпеливо сносил мои "не хочу менять", и "хочу оставить так", а после также терпеливо просматривал код после моего "ну куда вот это уползло-то! Я же не туда его ставил". Таких профессионалов еще поискать, и даже среди найденных [J]Кареглазый Демон[/J] будет особенным. Спасибо за неоценимую помощь, и новые возможности [J]Кареглазый Демон[/J].
Дизайн с множеством фоновых картинок, поэтому взявшие его, внимательно смотрите название встраиваемых в код картинок. Также хочу отметить, что название дневника прописано в фотошопе, и если кто-то отважится его взять, то напишите мне, я сделаю эту картинку для вас с названием вашего дневника.
Ширина ленты подстраивается под ширину экрана.




Вопрос: Нравится?
1. Да 
28  (87.5%)
2. Нет 
1  (3.13%)
3. Себе поставлю 
3  (9.38%)
Всего: 32

@темы: цветы, песочно-бежевое, первый диз, нежное, дизайн, Весна, CSS

14:53 

Заказ Kai Noir

Изумрудный Демон
Угрюм - и - Пиздат
14:40 

Заказ Mr.Gold

Изумрудный Демон
Угрюм - и - Пиздат
Вариация оформления в виде блокнота с верхним меню в одни руки.

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

21:53 

Заказ для Izmen@

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


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

17:48 

Заказ для Лехтенстаарн

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


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

23:14 

Изумрудный Демон
Угрюм - и - Пиздат
Я все таки осуществил задуманное и собрал оформление под блокнот. Оно легкое, резиновое. Проработаны все страницы. Помимо того что заметно на видео диз адаптируется под любую ширину экрана и подходит для смартфонов, ужимает изображения в дневнике до 700 пикселей в основной ленте и до 600 пикселей в избранном и комментариях, а любое видео до 560 на 315.



Если вас заинтересовало это оформление перечислите 100 епонов на счет сообщества и напишите умыл. Умыл лучше писать на ник Кареглазый Демон. Либо отпишитесь в комментариях к этой записи.

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

*** СКАЧАН 6 РАЗ ***

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

23:34 

Изумрудный Демон
Угрюм - и - Пиздат
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#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:

Результат:

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

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

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

21:55 

Заказ Сэйа Рианнон Атарем

Изумрудный Демон
Угрюм - и - Пиздат
На этот раз меня попросили адаптировать под дайры блог с dreamwidth
Выглядит он так:

seya-rhiannon-atarem.dreamwidth.org/

Насколько мне удалось его скопировать можете оценить на видео и в дневнике заказчицы.

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

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

13:19 

Обьявление.

Изумрудный Демон
Угрюм - и - Пиздат
Если у вас обрезались новые широкие аватары вставьте в код:


Взято здесь.

@темы: как это сделано, возможности CSS, Административное, урок, CSS

главная