Метка: CSS
-
Тень с трех сторон CSS
Чтобы сделать «эффект вкладок» или наложить тень с трех сторон вместо фоновых изображений можно просто наложить тени. На каждый объект можно наложить несколько теней используя свойство box-shadow, для визуальной видимости тени с трех сторон нужно использовать две тени. Пример 1: две тени. Первая с отступом вправо вниз, вторая влево вниз. .shadow {box-shadow: 4px 4px 6px…
-
Как сделать тень CSS
Для добавления тени почти что к любому элементу в html нужно добавить следующие свойства: .shadow {-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ } Синтаксис: box-shadow: none | inset «сдвиг по x» «сдвиг по…
-
Сначала контент, потом sidebar. На всю ширину и высоту браузера
Итак, шаблон — три колонки. Один сайдбар постоянной ширины для навигации, другой для, скажем, объявлений Google или фотографий Flickr — центр для основного контента. Это обыкновенное расположение блоков для большинства сайтов и блогов, но с некоторыми отличиями от стандарта кода: Боковые колонки имеют постоянный размер, а центральная растягивается между ними на весь экран Центральная колонка…
-
Создание двух-колоночного макета на дивах. Блочная верстка DIV.
В самом простом варианте блочный макет состоит всего из двух файлов — index.html и style.css. Эти файлы вы можете размещать, в любой папке на севере вашего хостинга. Допустим, что вы создадите в корневой папке вашего хостинга папку mysite, в которую положите файлы нашего макета index.html и style.css. Тогда, при обращению через браузер к папке 123 (в случае…
-
Горизонтальный список
Собственно так делается горизонтальный список: ul.top { margin: 0; /* Обнуляем значение отступов */ padding: 0; /* Обнуляем значение полей */ } ul.top li { display: inline; /* Отображать как встроенный элемент */ margin-right: 5px; /* Отступ слева */ border: 1px solid #000; /* Рамка вокруг текста */ padding: 3px; /* Поля вокруг текста */…