Главная » Статьи

Всего материалов в каталоге: 19
Показано материалов: 11-19
Страницы: « 1 2

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{}, вкладки из горизонтальных преобразуются в вертикальный аккордион.

Вкладки помогают компактно разместить большое количество контента в одном месте, к примеру если у вас кино-сайт - можно в нескольких вкладках разместить разные видеоплееры, или комментарии разных систем (например комментарии сайта и ВК, как это сделано здесь) разместить во вкладках, чтоб они были в одном блоке...

Веб-дизайн | Просмотров: 647 | Добавил: fotocom | Дата: 29.04.2015 | Комментарии (0)

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:

  1. Обтекание картинки текстом средствами HTML;
  2. Обтекание картинки текстом средствами CSS;
  3. Обтекание картинки текстом средствами редактора Joomla...
Веб-дизайн | Просмотров: 3310 | Добавил: fotocom | Дата: 29.04.2015 | Комментарии (0)

При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей...

Веб-дизайн | Просмотров: 584 | Добавил: fotocom | Дата: 29.04.2015 | Комментарии (0)

Существуют множество вариантов. чтобы установить бегущую строку себе на сайт. Но она служит только лишь целью рекламного характера или как украшение Web-страницы. Многие просто не задумываются, что к текстовой бегущей строке можно прикрепить графическое изображение, а так-же сделать его ссылкой на другую страницу либо документ...

Веб-дизайн | Просмотров: 2078 | Добавил: fotocom | Дата: 29.04.2015 | Комментарии (0)

<button onclick="HideIt();">Название спойлера</button>
<div id="HideMe" style="display: none;">ТЕКСТ ПОД СПОЙЛЕРОМ!</div>
<script>
function HideIt () {
   var e = document.getElementById('HideMe');
   if (!e.shown) {
     e.shown = true;
     e.style.display = 'block';
   }
   else {
     e.shown = false;
     e.style.display = 'none';
   }
} // .function HideIt
</script>

Веб-дизайн | Просмотров: 482 | Добавил: fotocom | Дата: 27.04.2015 | Комментарии (0)


ПРИМЕР:

 
 

 

Содержимое spoiler.css:

.spoilerBody {
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #D8D8D8;
   font-size: 1em;
}
.spoilerBar {
   text-transform: uppercase;
   border-bottom: 1px solid #CCCCCC;
   margin-bottom: 3px;
   font-size: 0.8em;
   font-weight: bold;
   display: block;
}
.spoilerContents {
   padding: 4px;
   background-color: #F7ECDC;
   border: 1px solid #D8D8D8;
   font-size: 0.9em;
}

Сам HTML код:

<div>   
<div><br> <div class="smallfont" style="margin-bottom:2px"><br><input type="button" value="+ Показать" style="width:75px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = '';this.innerText = ''; this.value = '- Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none'; this.innerText = ''; this.value = '+ Показать'; }"><br> </div><br> <div style="display: none;">ЗДЕСЬ МОЖЕТ БЫТЬ ВСЕ, ЧТО ЗАХОТИТЕ</div><br></div>

 

Веб-дизайн | Просмотров: 447 | Добавил: fotocom | Дата: 27.04.2015 | Комментарии (0)

Предлагаем Вам совсем простой и совсем небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.

 

Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на спойлер, находящееся чуть ниже:

 

Спойлер (кликните для показа/скрытия)

 

Для получения такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код:

Веб-дизайн | Просмотров: 1605 | Добавил: fotocom | Дата: 27.04.2015 | Комментарии (0)

Пожалуй, ни одно из достижений современности не связано с таким количеством слухов, легенд и мифов, как всеми нами любимый Интернет. На самом деле история его создания не так романтична, как хотелось бы многим, но от этого не менее интересна. С чего же все началось? Еще в 1961 году Леонард Клейнрок опубликовал работу, посвященную пакетной коммутации. Надо сказать, что подобных работ в то время было много, но так уж получилось, что ...

ПОЗНАВАТЕЛЬНОЕ | Просмотров: 401 | Добавил: fotocom | Дата: 04.11.2014

Очень тяжело определить какое-либо устройство как самый первый компьютер. С тех пор изменилось даже само значение определения, поэтому обозначить первый компьютер, как и любое другое изобретение, которое человечество породило изнутри, практически невозможно. Многие устройства, называемые на заре своей юности компьютерами, согласно современным критериям уже не могут быть таковыми. Изначально термин «компьютер» ...

ПОЗНАВАТЕЛЬНОЕ | Просмотров: 492 | Добавил: fotocom | Дата: 04.11.2014

1-10 11-19

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети