| Администратор |
 |
Стаж: 5 месяцев 20 дней
Сообщения: 228
Откуда: здешние мы
Стиль сайта: subsilver2
Настоящее имя: Андрей
|
Небольшие интересности -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; /* внутренний отступ */ Код: Выделить всё <style>
#verscroll2 {
height: 50px;
width: 200px;
overflow-x: hidden;
overflow-y: scroll;
white-space: normal;
background:# F0FFF0;
border: 1px solid #C1C1C1;
padding: 5px;
}</style>
<div id="verscroll2">
один<br>
второй<br>
третий<br>
четвёртый<br>
пятый<br>
</div> один
второй
третий
четвёртый
пятый
Горизонтальный скроллинг: 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; /* внутренний отступ */ Код: Выделить всё <style>
#verscroll {
height: 50px;
width: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
word-wrap: normal;
background:# F0FFF0;
border: 1px solid #C1C1C1;
padding: 5px;
}</style>
<div id="verscroll">
один второй третий четвёртый пятый
</div> один второй третий четвёртый пятый если надо скроллинг и по вертикали и по горизонтали - просто соедините оба кода.
создание тени для блоков на 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 - это прозрачность.
небольшой блочок, в котором "прокручивается" информация
Для примера: код сего действа выглядит так: Код: Выделить всё <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>Код: Выделить всё .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
} - время замедления (плавность) 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>
|
|
