Moju
А этот код уже адаптирован под мобильную версию или вы планируете его менять?
Это не упрек или претензия. Мне просто интересно, нужно ли заранее продумывать как такие оформления будут отображаться в мобильной версии или нет
Магия CSS или как натягивать сову на глобус
Сообщений 21 страница 30 из 43
Поделиться2120.09.23 18:26
- Участник
- Уважение: +1865
- Достижения/подарки: cake 1 emoji_events 1
- Наградные баллы: 162
Поделиться2220.09.23 18:27
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
#p188074,neumax написал(а):
Moju
А этот код уже адаптирован под мобильную версию или вы планируете его менять?
Это не упрек или претензия. Мне просто интересно, нужно ли заранее продумывать как такие оформления будут отображаться в мобильной версии или нет
На данный момент он еще не адаптирован под мобильную версию, но это есть в планах
Поделиться2325.09.23 18:11
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
Медленно подползаю к адаптиву... И вот с чем столкнулась почему-то у меня разный размер шрифтов при уменьшении экрана.
font-size везде одинаковый, но почему его так колбасит - не понимаю
http://testmoju.rolevaya.ru/ Может кто-то мог бы тыкнуть меня носом в нужное место
Поделиться2425.09.23 18:33
- технозомби
- Уважение: +9813
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
#p188300,Moju написал(а):
font-size везде одинаковый
он везде разный
.category tr {font-size: 16px;}
.category h3 {font-size: 20px;}
.category .tcr {font-size: 14px;}
Поделиться2525.09.23 22:08
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
#p188301,Gerda написал(а):
#p188300,Moju написал(а):font-size везде одинаковый
он везде разный
.category tr {font-size: 16px;}
.category h3 {font-size: 20px;}
.category .tcr {font-size: 14px;}
.category tr одинаковый и для full-item (вроде так называется) и для тех, что в две колонки, это шрифт описания, но почему то у того, что растянут он значительно мельче, чем у тех, что в две колонки
Поделиться2604.11.23 15:40
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
Продолжаю эксперименты с bb-кодами и оформлением постов. В этот раз сделала карточки для отношений, но вообще можно их использовать и где-то еще. В моем случае размер карточек сделан для поста с сокрытием профиля автора на ширину 923px. В случае, если нужно сделать на меньший размер, но нужно будет просто уменьшить ширину карточек. Если кто-то из гуру форума захочет внести правки и указать на косяки/ошибки, то с удовольствием улучшу свои навыки в этом вопросе.
Данный блок рассчитан на 6 карточек персонажей, когда лимит исчерпан просто копируем этот код еще раз и вставляем после последнего закрывающего тега.
[html]<iframe src="https://vk.com/video_ext.php?oid=5706356&id=456239184&hd=2&hash=f6d62560be7f5dfe" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe>[/html]
Код:
[block=relationship-lists] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [block=relationship-card] [block=relationship-bg][img]ссылка на изображение с персонажем[/img][/block] [block=card-inner] [block=card-name]Имя персонажа[/block] [block=card-description]Здесь описание отношений с персонажем.[/block] [/block] [/block] [/block]
Код:
/*Карточки для оформления отношений*/
.relationship-lists {
display: flex;
overflow: hidden;
justify-content: center;
}
.relationship-card {
position: relative;
overflow: hidden;
width: 80px;
height: 545px;
border-radius: 50px;
border: 2px solid #c1b7a5;
transition: .5s ease-in-out;
margin: 5px;
min-width: 90px;
}
.relationship-card:hover {
min-width: 360px;
border-radius: 20px;
}
.relationship-bg {
overflow: hidden;
position: absolute;
min-width: 80px;
height: 545px;
}
.relationship-bg::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transition: .5s ease-in-out;
opacity: 0.5;
background: linear-gradient(131deg, rgba(92, 103, 104, 0.42) 0%, rgba(92, 103, 104, 0.00) 100%);
backdrop-filter: blur(10px);
}
.relationship-card:hover .relationship-bg::before {
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 39.91%, rgba(42, 44, 45, 0.00) 59.12%);
backdrop-filter: none;
}
.relationship-bg img {
object-fit: cover;
width: 100%;
height: 100%;
}
.relationship-bg p {
width: 100%;
height: 100%;
}
.card-inner {
padding: 15px;
position: relative;
height: 100%;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
.card-name {
font-size: 30px;
color: var(--link-light);
transform: rotate(-90deg);
text-transform: uppercase;
transition: .3s ease-in-out;
max-width: 100%;
margin-bottom: 70%;
}
.relationship-card:hover .card-name{
transform:rotate(0deg);
margin-bottom: 3%;
}
.card-description {
opacity: 0;
color: var(--text-light, #EAE3C9);
font-variant-numeric: lining-nums proportional-nums;
font-family: Raleway;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
transition: all 0.7s ease-in-out 0s;
height: 150px;
overflow-y: auto;
margin-bottom: 5px;
}
.relationship-card:hover .card-description {
opacity: 1;
transition: .5s ease-in-out;
}Поделиться2704.11.23 21:03
- Атаманша
- Уважение: +8411
- Достижения/подарки: cake 7 emoji_events 6
- Наградные баллы: 1 085
Moju
Ух ты! 
Можно это в свободный каталог перенести? В тему для шаблонов бб-кодов?
Поделиться2804.11.23 22:53
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
#p190381,Automation Baby написал(а):
Moju
Ух ты!
Конечно)
Поделиться2904.11.23 23:59
- Атаманша
- Уважение: +8411
- Достижения/подарки: cake 7 emoji_events 6
- Наградные баллы: 1 085
#p190390,Moju написал(а):
Конечно)
Здорово, отнесла.
Поделиться3004.12.23 19:05
- а я другая крашенная
- Уважение: +534
- Наградные баллы: 1 363
Позвольте обратиться к опытным дизайнерам за советом (ну или не к опытным, но нужно мнение со стороны).
Сейчас делаю новый дизайн для своей ролевой, более минималистичный чтоли... И вот смотрю я на шапку и думаю, что что-то мне в ней не нравится, но ни как не могу понять что и, следственно, как это исправить. Может вы можете поделиться советами?
Ну и вообще ваше мнение из личного опыта, что прям мастхев должно быть в шапке, а что в общем нафиг ни кому не сдалось и можно убрать (согласна, что это индивидуально, поэтому и спрашиваю именно мнение из личного опыта)
Что есть сейчас
