CSS трюки

Поделиться1Вт, 14 Дек 2010 00:15:54

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Данная тема призвана помочь в решении специфических и актуальных задач для Вашего форума с помощью css методов

Дополнения к текущей теме: Интересные решения для форумов

+4

Instagram drumman.1

Поделиться61Пт, 6 Фев 2015 16:12:21

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11566
Последний визит:
Сегодня 10:33:28

Заметил что часто забывают ставить фон под всплывающие контейнеры кнопок в форме ответа:

Код проставляет фон к контейнерам кнопок (Стиль шрифта, размер, загрузка картинок, цвет текста, вставка таблиц, смайлы и иконка треугольник вниз), контейнеры всплывают и появляются при клике этих кнопок.

Нужность в данном коде возникает когда дизайнер прочищает все контейнеры и они становятся полностью прозрачными(изначально в стиле от сервиса они уже окрашены)
Цвет можно подобрать

В Конец Второго Окна Стиля

/*Фон под контейнеры в форме Ответа*/
#pun_wrap #post .container[id$="-area"]{
border: outset 2px #895D39!important;
border-radius: 10px;
background: rgba(181,148,100,0.89); /*Можно добавить фон картинкой url(Ccылка на картинку)*/
padding: 9px;
font: normal normal 400 11px/normal Verdana;
}

Красным - изменяемые цвета
Про rgba http://qps.ru/rwoQn

+5

Поделиться62Вс, 8 Фев 2015 21:32:33

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11566
Последний визит:
Сегодня 10:33:28

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

@media screen and (min-width: 900px) {
html,body {overflow-x:hidden;}
}

Красным - ширина Полотна форума

+1

Поделиться63Чт, 16 Июл 2015 00:14:32

Автор: maksi
Заслуженный
Зарегистрирован: Сб, 19 Ноя 2011
Сообщений: 35
Уважение: +8
Позитив: +10
Пол: Женский
Последний визит:
Пн, 14 Мар 2022 01:06:08

Здравствуйте.
Хочу поделиться наработкой, которую хорошо использовать на форумах с простым (родным) стилем майбб.

С помощью стилей css можно очень много сделать с фотографиями в постах и с аватарами.

Например - Эффект сепии для картинки в посте.

Код:

<style>
li.pa-avatar img:hover{
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
}

li.pa-avatar img{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
}
</style>

Также можно делать рамки, увеличение при наведении и прочие вещи с помощью css.

+2

Поделиться64Вт, 18 Авг 2015 12:57:40

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Кнопка "Новые сообщения" картинкой на чистом CSS

В HTML верх (или конец Второго окна стилей без <style></style> ):

<style type="text/css">
.punbb .newtext {
font-size: 0;
}
.punbb .newtext > a {
content: url(https://forumstatic.ru/files/0014/cf/dd/42490.gif);
float: left;
margin-right: 5px;
margin-left: -3px;
margin-top: 1px;
}
.punbb .newtext a:hover {
opacity: 0.7;
}
</style>

Красным выделена ссылка на картинку

0

ВКонтакте alex__63

Поделиться65Вт, 18 Авг 2015 13:39:08

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Замена ссылок "Удалить", "Редактировать", "Цитировать" на картинки - CSS

В HTML-верх (или в конец Второго окна стилей без тегов <style> </style>):

<style type="text/css">
/* "Удалить" */
li.pl-delete a { content: url(Ссылка на картинку); }
li.pl-delete a:hover { content: url(Ссылка на картинку при наведении); }

/* "Редактировать" */
li.pl-edit a { content: url(Ссылка на картинку); }
li.pl-edit a:hover { content: url(Ссылка на картинку при наведении); }

/* "Цитировать" */
li.pl-quote a { content: url(Ссылка на картинку); }
li.pl-quote a:hover { content: url(Ссылка на картинку при наведении); }
</style>

Дополнение для форумов Rusff и ZeroParking:

Замена ссылок "Поделиться", "Пожаловаться" картинками

<style type="text/css">
/* "Поделиться" */
li.pl-share a { content: url(Ссылка на картинку); }
li.pl-share a:hover { content: url(Ссылка на картинку при наведении); }

/* "Пожаловаться" */
li.pl-reports a { content: url(Ссылка на картинку); }
li.pl-reports a:hover { content: url(Ссылка на картинку при наведении); }
</style>

+1

ВКонтакте alex__63

Поделиться66Вс, 27 Сен 2015 17:21:03

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Расширяем текстовые поля в Админке

(HTML верх, HTML низ, Дополнительные пункты меню, Правила, Текст приветствия, Объявление, HTML в форме ответа, Структура style.css, Цвета style_cs.css)

(Кликабельно)

Код неактуален, расширение полей реализовано от сервиса

В конец Первого окна стилей:
/* Расширяем текстовые поля в Админке */
#o-essentials p:nth-of-type(6),
#o-essentials p:nth-of-type(7),
#o-form-reply p,
#o-features p:last-child,
#o-announcement p:last-child,
#o-registration p:nth-of-type(8),
#o-registration p:nth-of-type(10),
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) {
border-left-width: 0px !important;
}

#o-essentials p:nth-of-type(6) .adinput,
#o-essentials p:nth-of-type(7) .adinput,
#o-form-reply p .adinput,
#o-announcement p:last-child .adinput,
#o-features p:last-child .adinput,
#o-registration p:nth-of-type(8) .adinput,
#o-registration p:nth-of-type(10) .adinput,
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) .adinput {
margin-top: 2.2em !important;
}

#o-essentials p:nth-of-type(6) .adlabel,
#o-essentials p:nth-of-type(7) .adlabel,
#o-form-reply p .adlabel,
#o-features p:last-child .adlabel,
#o-announcement p:last-child .adlabel,
#o-registration p:nth-of-type(8) .adlabel,
#o-registration p:nth-of-type(10) .adlabel,
.adcontainer[action^="admin_style"] p:not(:nth-of-type(1)) .adlabel {
margin-left: 0px !important;
width: auto !important;
}
Для форумов Rusff и ZeroParking код неактуален - есть функция от сервиса

+3

ВКонтакте alex__63

Поделиться67Вс, 27 Сен 2015 20:09:02

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

Alex_63 написал(а):

Расширяем текстовые поля в Админке

Позволю себе маленькую поправку.
Для партнёрки rusff этот код не актуален. Там это уже реализовано.

0

Поделиться68Чт, 5 Ноя 2015 14:29:02

Автор: SKEE
Tandem
Зарегистрирован: Пн, 2 Окт 2006
Сообщений: 840
Уважение: +66
Позитив: +35
Пол: Мужской
Предупреждения: 2)
Последний визит:
Вт, 2 Апр 2019 16:43:08

Счётчик Участников

Код:

#pun-userlist .usertable  tbody {counter-reset: section; } 
#pun-userlist .usertable  tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

пример: http://forum-people.ru/userlist.php

+2

Поделиться69Чт, 5 Ноя 2015 15:16:44

Автор: SKEE
Tandem
Зарегистрирован: Пн, 2 Окт 2006
Сообщений: 840
Уважение: +66
Позитив: +35
Пол: Мужской
Предупреждения: 2)
Последний визит:
Вт, 2 Апр 2019 16:43:08

Счётчик ЛС

Код:

#pun-messages #profile fieldset tbody {counter-reset: section; } 
#pun-messages #profile fieldset tbody td.tcl:before {
    counter-increment: section; 
    content: counter(section) ". "; 
   }

+2

Поделиться70Пн, 4 Янв 2016 15:45:33

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Оформление элементов выбора в Админке в виде переключателей

В конец Второго Окна стилей:

/* Оформление переключателей в Админке */
#pun-admain .adinput label {display: none;}
#pun-admain .adinput input[type="radio"][value="1"] {
margin-left: 15px;
}
#pun-admain .adinput input[type="radio"][value="0"] {
margin-left: -15px;
}
#pun-admain .adinput input[type="radio"] {
border: 0px none transparent;
color: transparent !important;
cursor: pointer;
font-size: 0px !important;
outline: medium none transparent !important;
-webkit-appearance: none !important;
padding: 0px !important;
position: absolute;
}
#pun-admain .adinput input[type="radio"]:checked {
width: 12px;
height: 15px;
border-radius: 3px;
margin-top: -1px;
z-index: 99;
box-shadow: inset 0 0 4px rgba(255,255,255,.5);
}
#pun-admain .adinput input[type="radio"][value="1"]:checked {
background: #50AD0A;
}
#pun-admain .adinput input[type="radio"][value="0"]:checked {
background: #777777;
}
#pun-admain .adinput input[type="radio"]:not(:checked) {
width: 20px;
height: 8px;
background: #aaaaaa;
box-shadow: inset 0 0 4px rgba(0,0,0,.2);
border-radius: 2px;
margin-top: 2.9px;
}
#pun-admain .adinput input[type="radio"][value="1"]:not(:checked) {
margin-left: 7px !important;
}

Данный код работает корректно только в браузерах на движке Webkit (Google Chrome, Opera новых версий и т.п.)

+2

ВКонтакте alex__63

Поделиться71Вт, 2 Фев 2016 00:10:38

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Fover написал(а):

Визуальное оформление опросов

в общем пришёл к выводу, что картинкой всё таки проще и красивее

Визуальное оформление результатов опроса

результат:

код простейший:

#poll-special .poll2 td h1 {
background: url("ссылка на картинку цветовой шкалы") repeat-x scroll 0 0 / cover !important;;
}

ДЕМО

+2

Instagram drumman.1

Поделиться72Пн, 22 Фев 2016 19:37:43

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Удаляем лишние строки после цитаты и кода на CSS

В HTML верх (или Конец Первого окна стилей без тегов <style>):

<style>
.post-content div + p::first-line {line-height: 0;}
.post-content div + p::first-letter {line-height: 1;}
.post-content div + p > br {
display:block;
height:0;
line-height:0;
font-size:0;
}
</style>

0

ВКонтакте alex__63

Поделиться73Вт, 23 Фев 2016 16:32:37

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

Alex_63 написал(а):

Удаляем лишние строки после цитаты и кода на CSS

Это вместо этого скрипта?

<script type="text/javascript">
$('.post-content').each(function() {
var CNT = $(this).html();
CNT = CNT.replace(/<p><br><\/p>/img,'');
CNT = CNT.replace(/<p><br><br>(.*?)<\/p>/img,'<p>$1</p>');
CNT = CNT.replace(/<p><br>(.*?)<\/p>/img,'<p>$1</p>');
$(this).html(CNT);
});
</script>

0

Поделиться74Чт, 25 Фев 2016 14:44:16

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

Падающий снег в шапке форума. CSS

css анимация, без применения js и flash
одинаково смотрится во всех современных браузерах, включая мобильные

ДЕМО

Код:

/* зимнее оформление шапки */
#pun-title table {
	-webkit-animation : dropFlowParticles 2s linear infinite;
	-o-animation : dropFlowParticles 2s linear infinite;
    animation: dropFlowParticles 2s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/35447.png") repeat scroll 0 0;
}

#title-logo-table > tbody {
	-webkit-animation : dropFlowParticles 12s linear infinite;
	-o-animation : dropFlowParticles 12s linear infinite;
    animation: dropFlowParticles 12s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/64450.png") repeat scroll 0 0;
}

tr#title-logo-tr {
	-webkit-animation : dropFlowParticles 27s linear infinite;
	-o-animation : dropFlowParticles 27s linear infinite;
    animation: dropFlowParticles 27s linear infinite;
    background: rgba(0, 0, 0, 0) url("http://petushki-city.ru/files/0002/10/47/50326.png") repeat scroll 0 0;
}

@-webkit-keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}
@keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}

в коде 3 изображения снега, падающих с разной скоростью из-за чего создаётся впечатление плотного снегопада
изображения присваиваются 3 дочерним элементам блока pun-title
последовательность элементов получается такая: #pun-title --> #pun-title table --> #title-logo-table > tbody --> tr#title-logo-tr
у меня в примере основной фон присвоен блоку pun-title, а падающий снег, трём последующим #pun-title table, #title-logo-table > tbody и tr#title-logo-tr
вот так визуально выглядит структура шапки:

1. ярко красным таблица (#pun-title table)
2. она является дочерним элементом div блока #pun-title (слева от неё голубым цветом)
3. справа от таблицы идёт её дочерний элемент tbody (#title-logo-table > tbody) тёмно-серым цветом
4. и уже затем бледно красным идёт строка таблицы (tr#title-logo-tr)
это я всё к тому что вариантов оформления фона и избражений с анимацией несколько, там ещё ячейки есть td.title-logo-tdl и td.title-logo-tdr

p.s. изображения со снежинками рекомендуется перезалить к себе на форум

+2

Instagram drumman.1

Поделиться75Чт, 24 Мар 2016 19:25:36

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

ПЕРЕЛИВАЮЩИЕСЯ ССЫЛКИ на CSS

В HTML верх или Конец Второго окна стилей без тегов <style></style>

<style>
body a:hover {
-webkit-animation:rotateColor 2s linear infinite;
animation:rotateColor 2s linear infinite;
}
@-webkit-keyframes rotateColor {
0% {color:rgb(255, 2, 2);}
20% {color:rgb(239, 255, 2);}
40% {color:rgb(2, 255, 21);}
60% {color:rgb(2, 255, 255);}
80% {color:rgb(18, 2, 255);}
100% {color:rgb(255, 2, 212);}
110% {color:rgb(255, 0, 0);}
}
@keyframes rotateColor {
0% {color:rgb(255, 2, 2);}
20% {color:rgb(239, 255, 2);}
40% {color:rgb(2, 255, 21);}
60% {color:rgb(2, 255, 255);}
80% {color:rgb(18, 2, 255);}
100% {color:rgb(255, 2, 212);}
110% {color:rgb(255, 0, 0);}
}
</style>

+2

ВКонтакте alex__63

Поделиться76Ср, 20 Апр 2016 21:57:09

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11566
Последний визит:
Сегодня 10:33:28

Замена слов Репутация и Позитив в Профиле Топика на свои через css (Актуально для форумов Русфф)
В HTML верх

<style>
.pa-respect>a[href^="/respect.php?"],
.pa-positive>a{
font-size:0;
width:0;
visibility:hidden;
}
.pa-respect>a[href^="/respect.php?"]:after{
content:"На что меняем";
display:inline-block;
visibility:visible;
font-size:12px;
}
.pa-positive>a:after{
content:"На что меняем";
display:inline-block;
visibility:visible;
font-size:12px;
}
</style>

+2

Поделиться77Пн, 30 Май 2016 01:04:03

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4063
Позитив: +2368
Пол: Мужской
Последний визит:
Чт, 18 Апр 2024 10:36:31

продолжаем тему совершенствования работы с файлами на форуме - Счётчик форумных файлов

О чём это?

как уже говорилось на каждом форуме может храниться до 100 файлов,
поскольку данная возможность у нас имеется давно, то встречаются файлы загруженные например в 2013 году
У меня на форуме 68 файлов, и тут мне консоль браузера сигнализирует, мол 2 файла у вас пустые, один это скрипт js под номером таким-то, другой стиль css под номером таким-то.
Я естественно нефига уже не помню что это за файлы, тем более по номерам, тщетно пытаюсь шарить глазами по списку и никак не могу найти требуемые.

Отсюда пришла мысль выделить файлы в списке цветом по типу, а у нас их достаточно много
Веб (css, js, swf, txt, woff, ttf, otf, eot).
Графика (png, jpe, jpeg, jpg, gif, bmp, ico, tiff, tif, svg, svgz, psd).
Офис (pdf, doc, rtf, xls, ppt, odt, ods).
поскольку мне нужно было отделить из общей массы только js и css, то пример привожу с ними

Выделение цветом форумных файлов по типу.

в html-верх либо в Свой стиль без тегов <style type="text/css"></style>

Код:

<style type="text/css">
#filetable tr[id$="js"] {
    background: #ccff90;
}
#filetable tr[id$="css"] {
    background: #f4ff81;
}
</style>

придать свой цвет можно абсолютно любому типу, вместо красного прописываем тип, вместо синего цвет

#filetable tr[id$="gif"] {
background: цвет;
}

+5

Instagram drumman.1

Поделиться78Ср, 20 Июл 2016 05:37:25

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11566
Последний визит:
Сегодня 10:33:28

Общий Фон под форумами категорий

В HTML верх:


<style type="text/css">
.category .container,
.category .container th,
.category .container td{
border:0 none transparent!important;
background:transparent none;
}
.category .container{
position:relative; z-index:3;
margin-bottom: 20px;
}
.category .container table:after{
content: "";
display: block;
position:absolute; z-index:-1; left:0;
top:24px; /*Отступ от верха категории */
width:410px; /*Ширина площадки*/
height:94%;
background: #ffffff; /*Цвет фона*/
border-radius:12px;
}
</style>

+3

Поделиться79Сб, 23 Июл 2016 20:39:43

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10691
Уважение: +7180
Позитив: +5260
Пол: Мужской
Последний визит:
Сегодня 01:32:37

Защита от отключения JavaScript на CSS

0

ВКонтакте alex__63

Поделиться80Вс, 24 Июл 2016 17:04:05

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11566
Последний визит:
Сегодня 10:33:28

Обрамление форумов картинкой (вместе с описанием)

Картинка, разделённая на части

Верх
Cредняя часть
Низ

В HTML верх (или конец первого окна стиля, без тегов <style></style>)

Код:

<style>
/*Обрамление форумов картинкой(вместе с описанием)*/
.category h3{
  position:relative;z-index12;
  background:url(http://s6.uploads.ru/xdpNT.png) 0 top no-repeat; /*Верхняя часть картинки*/
  width:364px; /*Ширина картинки*/
  height:74px; /*Высота картинки*/
  padding-top:34px; /*Центровка ссылки на форум по вертикали в верхней картинке*/
}
.opisF {
  background:url(http://s7.uploads.ru/pcG9f.png) 0 bottom no-repeat,url(http://s2.uploads.ru/eYZuX.png) 0 0 repeat-y;
  max-width:364px; /*Ширина картинки*/
  padding: 0 22px; /*Отступ описания от боковых краёв картинки */
  margin-top:-34px;  /*Подтаскиваем описание к низу названия фора*/
  padding-bottom:34px; /*Отступ описания от нижнего края */
}
</style>

Описание оборачиваем в теги:

<div class=opisF>
Тут Описание к форуму ....
</div>

+8

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

CSS трюки

Сообщений 61 страница 80 из 126

Поделиться1Вт, 14 Дек 2010 00:15:54

Поделиться61Пт, 6 Фев 2015 16:12:21

Поделиться62Вс, 8 Фев 2015 21:32:33

Поделиться63Чт, 16 Июл 2015 00:14:32

Поделиться64Вт, 18 Авг 2015 12:57:40

Поделиться65Вт, 18 Авг 2015 13:39:08

Поделиться66Вс, 27 Сен 2015 17:21:03

Поделиться67Вс, 27 Сен 2015 20:09:02

Поделиться68Чт, 5 Ноя 2015 14:29:02

Поделиться69Чт, 5 Ноя 2015 15:16:44

Поделиться70Пн, 4 Янв 2016 15:45:33

Поделиться71Вт, 2 Фев 2016 00:10:38

Поделиться72Пн, 22 Фев 2016 19:37:43

Поделиться73Вт, 23 Фев 2016 16:32:37

Поделиться74Чт, 25 Фев 2016 14:44:16

Поделиться75Чт, 24 Мар 2016 19:25:36

Поделиться76Ср, 20 Апр 2016 21:57:09

Поделиться77Пн, 30 Май 2016 01:04:03

Поделиться78Ср, 20 Июл 2016 05:37:25

Поделиться79Сб, 23 Июл 2016 20:39:43

Поделиться80Вс, 24 Июл 2016 17:04:05