в данной статье я буду выкладывать отдельно коды css, реализующие "красивости" и "нужности"
информация в окне сообщения textarea
placeholder - тэг выводит текст внутри текстового поля, который исчезает при получении фокуса.
Пример:
Выглядеть это будет так:
Пример:
Код: Выделить всё
<textarea placeholder="здесь вы можете оставить ваше сообщение" rows="5" cols="60">
</textarea>Выглядеть это будет так:
обрезание строки по ширине блока сообщения
предположим, у вас есть сообщение
вышел ёжик из тумана... подумал... и ушёл обратно. -"показалось",- подумал он.
а вставить его надо в блок размером 150 px (типа новости или превью).
если просто вставить в блок - сообщение блок "растянет на свою длину, а если применить следующий код
то сообщение обрежется при достижении границы блока. вот так:
а выглядеть этот код будет так:
вышел ёжик из тумана... подумал... и ушёл обратно. -"показалось",- подумал он.
а вставить его надо в блок размером 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; /* внутренний отступ */
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; /* внутренний отступ */
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. тень снизу
пример:
2. тень со всех сторон
Пример:
можно сделать тень и цветной:
в строке (0,0,0,0.8) первые 3 цифры - это код цвета (зелёный, например, 0,198,0), а 0.8 - это прозрачность.
Код: Выделить всё
.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 - это прозрачность.
небольшой блочок, в котором "прокручивается" информация
Для примера:
код сего действа выглядит так:
Довольно удобная штука, так как прокручивание происходит при помощи тэга html marquee без участия скриптов.
Я видел довольно интересное применение данной штуки в виде прокрутки активных тем-ссылок на главной странице сайта.
При наведении на поле прокрутки движение останавливается и возможен выбор.
(в примере бывает стоит кликнуть по полю, а то "зависает" из-за кэширования...)
Регулируется "под себя" очень просто:
direction="up" - прокрутка снизу вверх,
direction="down" - прокрутка сверху вниз,
width="150" height="100" - соответственно ширина и высота блока,
scrollamount="5" scrolldelay="200" - скорость прокрутки информации внутри блока...
Может кому и пригодится.
Об использовании этого тэга можно почитать здесь: http://hello-vitebsk.ru/html/html/marquee/index.html
код сего действа выглядит так:
Код: Выделить всё
<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>от автора предложения: соблюдайте положение кавычек! и одинарных и двойных. иначе будут проблемы.  |
блок "плитка"
Код: Выделить всё
<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>
