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

Записи с темой: урок (список заголовков)
00:55 

Просто Демон
I try my best
Я не видел отдельного списка тегов для составных частей поста и комментариев, поэтому оставлю его здесь.
.singlePost — запись (этот же селектор используется для имитации разделителя)
.countFirst — нечетный пост
.countSecond — четный пост
.singleComment — комментарий (этот же селектор используется для имитации разделителя)
читать дальше

Дополнения в комментариях приветствуются.

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

22:37 

Просто Демон
I try my best
11.03.2018 в 21:52
Пишет Кареглазый Демон:

Этот пост - для любителей оформлять абсолютно все детали дневника.
Не так давно пункты голосования получили отдельные селекторы. И теперь сделать голосование индивидуальным стало проще.
Всего пунктов десять и, соответственно, десять столбиков. Селекторы выглядят как pool-bar.b и дальше цифра 1,2... 10

Можно перекрасить все разом и убрать обводку:
.pool-bar.b1, .pool-bar.b2, .pool-bar.b3, .pool-bar.b4, .pool-bar.b5, .pool-bar.b6, .pool-bar.b7, .pool-bar.b8, .pool-bar.b9, .pool-bar.b10 { background: #ff0000; border: none !important;}
image host
читать дальше


URL записи

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

23:34 

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

13:19 

Обьявление.

Просто Демон
I try my best
Если у вас обрезались новые широкие аватары вставьте в код:


Взято здесь.

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

21:26 

Бэкграунд или фон дневника.

Просто Демон
I try my best
Я лично пользуюсь в основном двумя вариантами фона: большая картинка растянутая по экрану без искажения пропорций, либо повторяющееся бесшовное изображение, которое паркуется в левый верхний угол. Часто даже в платниках использую фоны стандартного размера/веса/способа загрузки.
Но раз уж меня попросили поделиться вариантами оформления фонов я нашел не скажу что все, но большую часть)
Информация взята с сайта WebReference.ru. Там удобный интерфейс и много полезного.
Фон на дайриках прописывается через body .Селектор пишется прям вот так, без решеток и точек.

У боди может быть несколько свойств:

background-color заливка цветом, но ее можно выставить и в стандартных настройках для фона дневника. А вот использование для скажем постов интересно. Задается так:
селектор {background-color: #000000!important;} после решетки код цвета.

background-image заливка фоновым изображением
body {background-image: url(<адрес>)}

background-position позиционирование изображения.
Например body { background-position: left top;} помещает в левый верхний угол. Дальше разные значения и их эквиваленты.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
Наглядно:


ЧИТАТЬ ДАЛЬШЕ

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

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

17:35 

Еще о дополнительных блоках. Анимация.

Просто Демон
I try my best
О перемещении и полу прозрачности на примере аватарок было рассказано здесь. Об изменении размера и том как сделать аватарки черно-белыми здесь. Но думаю имеет смысл повторить на примере дополнительных блоков, дополнить и углубиться в детали.
Возьмем анимированную кошечку. Да, готовую. И да она нам подойдет только если фон дневника белый) Но мне главное объяснить принцип.

В любом графическом редакторе пере сохраняем ее как jpg.

Грузим оба изображения в БИ. Располагаем в правом нижнем (или левом) углу под меню.
Это статичное изображение. Оно у нас по умолчанию.
#add_block1 {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444931.jpg') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Это анимированное. Оно подгружается когда над ним мышка.
#add_block1:hover {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444932.gif') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Котейка обосновалась под меню.

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

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

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

01:25 

Дополнительные блоки. Прозрачность.

Просто Демон
I try my best
Для примера возьмем кота из моего оформления.
Я знаю что он жуткий, но мне нравится)
Грузим в БИ, прописываем общие свойства.
#add_block1 {width: 236px !important; height: 222px !important; background: url('/userdir/2/2/2/0/2220055/82354467.png') 0px 0px no-repeat; position: absolute !important; top: 200px; left:50%; margin-left: -250px; z-index: 2;}

БЛОК1 {ширина; высота; фоновое изображение; позиционирование;}

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. То есть 0.1, 0.2, ... 1.0
Я хочу добиться эффекта когда кот не виден, только если его случайно задеть мышкой.
#add_block1 {opacity : 0.1 !important;}
На всякий случай говорю браузеру, что это значение важно.
#add_block1:hover {opacity : 1.0 !important;}
Вот что получается:

Но мне хочется плавности, поэтому я задаю время за которое кот сменит прозрачность с 0.1 на 1.0. В секундах.
#add_block1 { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
И время за которое он снова станет полупрозрачным.
#add_block1:hover { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
Свойство задаю само по себе и для различных браузеров.
Вот что получается в итоге:

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

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

19:03 

Еще о дополнительных блоках

Просто Демон
I try my best
Первый пост по этой теме тут. Все уроки по тегу. Задать вопрос можно здесь.

Все ниже перечисленный свойства применимы и к стандартным селекторам дайровских оформлений.

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

Псевдокласс :hover
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Псевдокласс :active
Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

transition
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через Javasсript.

Что это дает нам? Огромный простор для творчества. И плавные переходы между состояниями блоков.

1. Можно изменять прозрачность элемента.
2. Задавать ему смещение.
3. Заменять статичную картинку анимированной.
4. Менять одно изображение на другое.
5. Делать черно-белые элементы цветными (при поддержке браузера).
6. Изменять размер изображения.
7. Комбинировать эффекты.

Детально и с примерами распишу в следующем посте.

Вопрос: Интересно?
1. Да 
24  (96%)
2. Нет 
1  (4%)
Всего: 25

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

02:53 

Как поставить в дневнике елку?

Просто Демон
I try my best
Помимо стандартных селекторов на дайриках можно прописывать свойства для дополнительных блоков. Отображаться такой блок будет на всех страницах дневника. Всего их может быть не более десяти в одном оформлении.
Задаются они селекторами
#add_block1
#add_block2
...
#add_block10

Зачем это нужно?
Допустим чтобы поставить елку в угол)
Берем елку на прозрачном фоне, грузим в свою БИ. Дальше прописываем свойства как любому другому селектору. (в примере елка нашего сообщества)

дополнительный блок1 {ширина; высота; бэкграунд: (адрес картинки из вашей БИ строго между кавычек) не повторять; позиция фиксированная; отступ снизу; отступ слева; положение на странице как слоя;}
Отступ снизу отрицательный, чтобы елка выглядывала из за края экрана, а не висела в воздухе, z индекс отрицательный чтобы не перекрывала информацию при узкой ленте записей. Соответственно если вы зададите position: absolute !important; блок промотается вместе с лентой. А позиционирование можно задавать от любого края, в процентах и пикселях.

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


Здесь задается ширина в 100%, а для картинки прописывается повторение по оси х, то есть по горизонтали. В результате фонарики заполняют весь экран, хотя сама картинка выглядит вот так:

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

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

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

21:28 

Пост для желающих учиться.

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

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

13:11 

Просто Демон
I try my best
Я тут прикинул масштабы мануала по возможностям применения CSS для дайров с примерами и понял что лучше уж в формате видео. Прошелся по своим работам, потыкал, записал. Здесь конечно не все, я старался не выкладывать те что в свободном доступе и на виду. Если вам хватит терпения досмотреть до конца вы возможно откроете для себя что то новое)
Обращаю ваше внимание на то что я специально уменьшил область записи и свернул браузер. В живую эти оформления смотрятся лучше в основной массе, особенно на широких мониторах. Градиенты не рябят, менюшки друг на друга не наезжают.
И к сожалению в большинстве этих дизайнов часть красоты не видна, а именно в тех где эпиграф перекрывает верх. В таких работах он прописывался картинкой со ссылками и гармонично вписывался в оформление. К сожалению восстановить их у меня нет возможности. И раньше я часто использовал прием уведомлений картинками. Они тоже отображаются не везде, но я запишу с ними отдельное видео.
В некоторых старых работах видны огрехи. Простите их мне пожалуйста. Я был молод и неопытен. Зато много экспериментировал) И поверьте на слово, сейчас я могу и делаю лучше.

Вопрос: Интересно?
1. Да 
34  (97.14%)
2. Нет 
1  (2.86%)
Всего: 35

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

17:16 

Разделители.

Просто Демон
I try my best
Возможность прописать кодом разделители это еще один повод подключить CSS)
Отдельного селектора, отвечающего за пространство между постами и комментариями не существует. Зато можно задавать фон самого поста.
Если бэкграунд повторяющийся получится заливка. Текстурой, полупрозрачной подложкой или просто цветом по вашему желанию.
А если прописать картинку без повторения и задать ей положение по краю поста она прилепится справа, слева, сверху или внизу. Последние два случая как раз используются для имитации разделителей.
Конечно можно и в бесплатнике исхитриться. Допустим прописав нужный код с картинкой через сервис настраиваемых кнопок. Но в этом случае вам придется жать на кнопку вручную в конце каждого поста. А если страниц в вашем дневнике много пере сохранять ранние посты вы просто замучаетесь.

Сам код очень простой. Даже не нужно прописывать ширину и высоты картинки.

Обратите внимание что вставлять нужно не весь адрес изображения из БИ, а начиная с /userdir и до конца.
Расшифровка:
каждый пост {(картинка) не повторять; позиция внизу; отступ снизу; отступ сверху}
Отступы нужны чтобы ваш разделитель вышел за сам пост и не перекрывал ссылки под постом.
Когда вы прописываете код таким образом возникает небольшой глюк, а именно двоится разделитель под эпиграфом.
Убирается это вот так:


Конечный код:


Ну и чтобы вам было на чем тренироваться.
РАЗДЕЛИТЕЛИ

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

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

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

00:03 

Просто Демон
I try my best
Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете, вот вам ответ.
Даже не вдаваясь в визуальные дебри сократите меню удалив лишнее и приведите дневник в порядок, как это описано здесь и здесь. И повесьте кнопку наверх, как вариант.
Возьмем для наглядости такой макет:

Картинка может быть абсолютно любой. Стрелка, указатель наверх или что то что подойдет по смыслу. Главное чтобы фон этой кнопки был прозрачным. Загружаете в свою БИ. И дальше в кодах строго между кавычек используете url своей картинки начиная с /usedir и до конца.
width это ширина картинки
height высота. Эти параметры прописываются индивидуально.
position: fixed !important; фиксирует кнопку на странице, чтобы она не уехала с лентой
display:block!important;line-height: 500px !important; overflow:hidden !important; помогает заменить изначальную текстовую ссылку на картинку. Кому интересны детали добро пожаловать на htmlbook.ru/
z-index: 3; это что то вроде слоев фотошопа. Чем больше цифра тем выше элемент. Лучше прописывать, чтобы кнопка точно была над лентой и записями и не перекрылась допустим меню.
#bottomNav {display: block;} просто смиритесь с тем что без этой строчки кнопка не видна)

Теперь по позициям. Если вам нужна кнопка в углу задаете ей нулевые отступы

1.

2.

3.

4.

Если же кнопка нужна вам прикрученной к краю ленты подход немного меняется. Отступы сверху и снизу прописываются также, а справа-слева в два этапа.
Сначала мы паркуем кнопку в центр благодаря left:50%;
Затем двигаем ее уже от середины. На 450 пикселей в нашем случае, то есть на половину ширины ленты.
margin-left: -450px; передвинет кнопку влево,
margin-left: 450px; соответственно вправо.

5.

6.

7.

8.

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

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

04:45 

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

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

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

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

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

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

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

19:48 

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

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

Нажимаем

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

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

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

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

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

16:18 

Про темы записей.

Просто Демон
I try my best
Темы записей эта такая вещь про которую вспоминаешь в последний момент, по крайней мере по началу. И делать с ними ничего не хочется, лишь бы выпадали при нажатии на ссылку. Но часто и этого не происходит. Менюшки летают, выскакивает надпись "все темы" и т.д. Сразу оговорюсь что все подсмотрено, украдено и ничего нового Я не изобрел. Собрал и принес.

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



Список можно убрать совсем.



Если задать число меньше 20 останется несколько тем записей. Однако не с большим количеством постов.



Темы записей можно расположить в два столбика. Даже при боковом меню.



А если добавить это будут еще и выплывать.


С помощью этого кода можно вынести выпадающий список тем за пределы меню и зафиксировать на странице.



Передвигать вверх-вниз через padding и margin из последних двух строк. Значения должны совпадать чтобы меню не плясало.

Лично мне темы записей милее в верхнем выпадающем меню.
Оставим белый фон и обводку из предыдущего примера. Зададим два столбика и отступ строчкам, уменьшим шрифт.



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



Ну и напоследок для не желающих заморачиваться.
Можно убрать ссылку "темы записей" и оставить только "все темы" с общим количеством.


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

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

16:24 

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

Просто Демон
I try my best


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

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


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

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


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

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

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

16:01 

Для Izanami.

Просто Демон
I try my best
По просьбе рассказываю как сделал эпиграф оформления из этого поста. В нем при нажатии на верх эпиграфа меняется часть картинки, а нижние ссылки как нажимались так и продолжают нажиматься.
Возьмем какой нибудь арт. У меня это Харли Квин.
Для начала нам понадобится собрать макет. Он должен состоять из трех частей. Сверху картинка, под ней переходная часть и внизу ссылки.

Дальше нужно создать еще два слоя: с белым фоном и надписью в нашем случае.

Макет разрезаем по синим линиям и сохраняем в jpg.
В итоге получаем три картинки:
1.

2.

3.

Теперь используем теги MORE.


перваявторая

Первая нажимается и открывает третью. (кликабельно)


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


Вторая картинка:






и ее код:


Третья картинка:



и ее код:
Мне удобнее сначала подписать названия и только потом добавлять ссылки:




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

Теперь осталось только вставить готовые коды в шаблон MORE.



Итог:





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

16:55 

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

Просто Демон
I try my best
Возьмем для примера аватарку.
Она обведена полоской шириной в 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. Да. 
63  (95.45%)
2. Нет. 
3  (4.55%)
Всего: 66

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

01:03 

Просто Демон
I try my best
В предыдущих постах Я рассказал о простых эффектах на примере аватарок. Все они применимы и к изображениях в вашей ленте. Равно как и все эффекты приводимые ниже можно использовать и для аватарок.
Задаем картинкам в ленте фиксированную ширину 300 пикселей. Можно и больше, мне так удобнее для примера.
.paragraph img{max-width: 300px;max-height: auto;}

Делаем так чтобы она становилась полупрозрачной при наведении мышки.
.paragraph img{opacity : 1.0 !important;}
.paragraph img:hover {opacity : 0.5 !important;}

Или же наоборот, картинки изначально полупрозрачные, что красиво в темных оформлениях, а при наведении мышки они становятся ярче за счет полной прозрачности.
.paragraph img{opacity : 0.5 !important;}
.paragraph img:hover {opacity : 1.0 !important;}

Эффект есть, но хочется чтобы он был более плавным. Для этого мы задаем время в течение которого одно свойство заменится на другое.
.paragraph img{ -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; } одна секунда. А чтобы прозрачность также плавно возвращалась в прежнее состояние то же свойство прописываем и для положения мышки над картинкой.
.paragraph img:hover { -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }

Качество изображения при этом хуже не становится. Это глюк записывающей проги.
Изображению можно задать еще одно интересное свойство, которое к сожалению не видит моя мозила, зато понимают опера и хром. Картинки становятся черно белыми, благодаря наложению фильтра.
.paragraph img{ -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-o-filter: grayscale(100%);-ms-filter: grayscale(100%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }
.paragraph img:hover{ -webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-o-filter: grayscale(0%);-ms-filter: grayscale(0%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }

Обратите внимание что наложение задается в процентах. Поэтому данный эффект можно использовать и для при глушения насыщенности, аватарок например.
.avatar img { -webkit-filter: grayscale(20%);-moz-filter: grayscale(20%);-o-filter: grayscale(20%);-ms-filter: grayscale(20%); }
Или смайликов. В темных оформлениях они особенно режут глаз.
#shsmile { -webkit-filter: grayscale(50%);-moz-filter: grayscale(50%);-o-filter: grayscale(50%);-ms-filter: grayscale(50%); }
Еще один интересный эффект изменение размера картинок. Главное чтобы он был плавным.
Дописываем в код .paragraph img:hover{max-width: 600px;max-height: auto;} и изображения ленты увеличатся вдвое при наведении мышки.


Вопрос: Полезно?
1. Да. 
59  (96.72%)
2. Нет. 
2  (3.28%)
Всего: 61

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

главная