info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 802

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 8 месяцев 5 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Небольшие интересности -1. CSS

в данной статье я буду выкладывать отдельно коды css, реализующие "красивости" и "нужности"

информация в окне сообщения textarea
placeholder - тэг выводит текст внутри текстового поля, который исчезает при получении фокуса.

Пример:

Код: Выделить всё

<textarea placeholder="здесь вы можете оставить ваше сообщение" rows="5" cols="60">
</textarea>


Выглядеть это будет так:



обрезание строки по ширине блока сообщения
предположим, у вас есть сообщение

вышел ёжик из тумана... подумал... и ушёл обратно. -"показалось",- подумал он.

а вставить его надо в блок размером 150 px (типа новости или превью).
если просто вставить в блок - сообщение блок "растянет на свою длину, а если применить следующий код

Код: Выделить всё

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;


то сообщение обрежется при достижении границы блока. вот так:

Код: Выделить всё

<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:150px;"><b>вышел ёжик из тумана... подумал... и ушёл обратно. -"показалось",- подумал он.</b></div>


а выглядеть этот код будет так:

вышел ёжик из тумана... подумал... и ушёл обратно. -"показалось",- подумал он.


скроллинг для блоков определённых размеров
Вертикальный скроллинг:

height: 50px; /* высота блока */
width: 200px; /* ширина блока */
overflow-x: hidden; /* прокрутка по горизонтали отключена */
overflow-y: scroll; /* прокрутка по вертикали включена */
white-space: normal;
background:# F0FFF0; /* фон */
border: 1px solid #C1C1C1; /* рамка */
padding: 5px; /* внутренний отступ */



один
второй
третий
четвёртый
пятый


Горизонтальный скроллинг:

height: 50px; /* высота блока */
width: 200px; /* ширина блока */
overflow-x: scroll; /* прокрутка по горизонтали включена */
overflow-y: hidden; /* прокрутка по вертикали отключена */
white-space: nowrap; /* чтобы символы стояли в одну линию, не переходя на другую строку */
word-wrap: normal; /* то же для IE */
background:# F0FFF0; /* фон */
border: 1px solid #C1C1C1; /* рамка */
padding: 5px; /* внутренний отступ */



один второй третий четвёртый пятый


если надо скроллинг и по вертикали и по горизонтали - просто соедините оба кода.


создание тени для блоков на css
1. тень снизу

Код: Выделить всё

.ten1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}


пример:

тень снизу


2. тень со всех сторон

Код: Выделить всё

.ten2
{
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
       -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
       box-shadow:0 0 20px rgba(0,0,0,0.8);
}


Пример:

тень со всех сторон


можно сделать тень и цветной:

тень со всех сторон


в строке (0,0,0,0.8) первые 3 цифры - это код цвета (зелёный, например, 0,198,0), а 0.8 - это прозрачность.


небольшой блочок, в котором "прокручивается" информация
Для примера:

информация 1

информация 2

информация 3

информация 4

информация 5

...................



код сего действа выглядит так:

Код: Выделить всё

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="5" scrolldelay="200" width="150" height="100" >
<p>информация 1</p>
<p>информация 2</p>
<p>информация 3</p>
<p>информация 4</p>
<p>информация 5</p>
<p>...................</p>
</marquee>


Довольно удобная штука, так как прокручивание происходит при помощи тэга html marquee без участия скриптов.
Я видел довольно интересное применение данной штуки в виде прокрутки активных тем-ссылок на главной странице сайта.
При наведении на поле прокрутки движение останавливается и возможен выбор.
(в примере бывает стоит кликнуть по полю, а то "зависает" из-за кэширования...)

Регулируется "под себя" очень просто:

direction="up" - прокрутка снизу вверх,
direction="down" - прокрутка сверху вниз,
width="150" height="100" - соответственно ширина и высота блока,
scrollamount="5" scrolldelay="200" - скорость прокрутки информации внутри блока...


Может кому и пригодится.

Об использовании этого тэга можно почитать здесь: http://hello-vitebsk.ru/html/html/marquee/index.html


плавное появление элемента на css
Блок 1 (наведите сюда курсор)
Блок 2


как это создано:

html

Код: Выделить всё

<div class="block block1">Блок 1</div>
<div class="block block2">Блок 2</div>


css

Код: Выделить всё

.block{
font-size: 15px;
color: #ffffff;
padding: 50px;
width: 200px;
height: 120px;
background: green;
margin-bottom: 30px;
transition: 1s
}
.block2{
opacity: 0;
}
.block1:hover+.block2{
opacity: 1
}


transition: 1s - время замедления (плавность)
opacity: 0; - прозрачность. 0 - прозрачный полностью, то есть невидимый.



простое изменение картинки при наведении курсора


реализуется это очень просто:

Код: Выделить всё

<a href="ссылка"><img src='картинка без наведения'
onmouseover="this.src='картинка при наведении'"
onmouseout="this.src='картинка без наведения'" border="0"></a>


от автора предложения: соблюдайте положение кавычек! и одинарных и двойных. иначе будут проблемы. :-D


блок "плитка"


Код: Выделить всё

<div style="width:502px;height:252px;border-right:10px #dcdcdc solid;border-left:10px #dcdcdc solid;border-top:10px #EEE9E9 solid;border-bottom:10px #BEBEBE solid;box-shadow: 0 0 0 1px rgba(0,0,0,0.3); ">
<div style="width:500px;height:250px;border:1px #ffffff solid;background:#dcdcdc"></div>
</div>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 26 май 2024, 17:57

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид