[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Общая информация » Все о создании сайтов. » Дизайн макеты сайтов
Дизайн макеты сайтов
RedStarДата: Суббота, 05.06.2010, 05:21 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Новые и интересные дизайн макеты сайтов.
 
masterДата: Суббота, 13.09.2014, 06:04 | Сообщение # 2
Рядовой
Группа: Пользователи
Сообщений: 1
Репутация: 0
Статус: Offline
Резиновый фон с авто масштабированием картинки

Сделать фон сайта резиновым и масштабируемым, подходящим под любые размеры страницы сайта не сложно. Фон будет автоматически подстраиваться под изменения размеров страницы сжимая и расширяя картинку по высоте и ширине. Это самый надежный способ, который поддерживается всеми современными браузерами включая встроенный в устройства Андроид. Дело в том, что свойство фона-Размер понимают не все браузеры, а добавляемые к нему префиксы не создают желаемого результата. Для установки скрипта и его правильной работы Вам потребуется подключенная библиотека jQuery, в так же нужно отменить (при наличии) сценарий отображения фона в CSS в на требуемых страницах и разместить перед закрывающим тегом тела скрипт для подключения эффекта масштабирования. По умолчанию Z-индекс масштабируемого скрипта выставлен в максимальное значение, его влияние будет оказано только на резиновые свойства фона страниц сайта. Для установки на сайте системы uCoz у нужно аналогичным способом убрать значения для свойства фона для основного селектора к которому прикреплен фон страниц, например строку в "Таблице стилей CSS", в:

Код
body {
background: #000000 адрес URL('/images/bg.jpg') слева вверху повторите-х фиксированное;
}


нужно изменить на:

Код
body {
background:прозрачный;
}


Проще говоря Вам нужно сделать фон прозрачным, а уже потом, например в "Нижней части сайта" разместить предлагаемый скрипт для установки.

Скрипт для установки масштабируемого фона
Красным цветом выделен адрес к картинке, который Вам потребуется изменить на свой.

Код
<script src="//delaisait.ucoz.ru/script/effect/2014/js/backgroundsize.js"></script>
<script>
var images = "//fantastic-girl.ucoz.ru/_ph/1/801058435.jpg";
var index = 0;
$.backgroundsize(images[index]);
</script>


ВТОРОЙ ВАРИАНТ:

Код CSS для фона сайта
ширина - 100%
высота - auto

Код
body {   background: url(nature.jpg) center center fixed no-repeat;        
-moz-background-size: 100% auto; /* Firefox до 4.0 */        
-webkit-background-size: 100% auto; /* Safari и Chrome */       
-o-background-size: 100% auto; [size=8]/* Opera до версии 10.53 */
-khtml-background-size: 100% auto;
background-size: 100% auto; /* CSS3 */}

Код CSS для фона шапки
ширина - 100%

Код
.image {width: 100%;min-width:400px;background-image: url('image.jpg');}


Сообщение отредактировал master - Суббота, 13.09.2014, 06:10
 
RedStarДата: Воскресенье, 09.08.2015, 19:22 | Сообщение # 3
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Фон сайта из трех частей средняя часть тянется за контентом.

В CSS:

Код
.wrap {
     width: 248px;
     margin:100px auto;
     padding-top: 54px;
     background: url(img/top.png) no-repeat top left;
}
.bottom {
     width: 100%;
     padding-bottom: 47px;
     background: url(img/bottom.png) no-repeat bottom left;
}
.bottom p {
     margin: -40px 0;
     padding: 0 10px;
     background: url(img/middle.png) repeat-y;
}


На сайт:

Код
<div class="wrap">
<div class="bottom">

<p>Текст, текст,текст </p>

</div>
</div>
 
RedStarДата: Воскресенье, 09.08.2015, 19:37 | Сообщение # 4
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Эффект тени блока при помощи CSS3

Эффект тени мы будем выполнять с помощью CSS. Соответственно никаких изображений, только стили. 

В том числе мы будем применять свойство box-shadow. Также можно будет задать любой цвет для тени, смещение, размер, или же применять его для иных элементов, главное экспериментировать

Поддержка браузеров: 
Opera 10.5 и выше. 
Firefox 3.5 и выше; 
Chrome 1 и выше; 
Safari 3 и выше.

В основном все современные браузеры поддерживают эффекты тени. Кстати, хотелось бы упомянуть один немаловажный момент: для некоторых браузеров мы будем использовать префиксы, то есть для Firefox применяется -moz-, для Safari и Chrome нужно использовать префикс -webkit-, а для Opera префикс -o-

Эффект тени №1 

В данном примере эффект тени от блока располагается снизу. 

CSS:

Код
.primer1{-webkit-box-shadow: 0 10px 5px -5px #777;   
-moz-box-shadow: 0 10px 5px -5px #777;   
box-shadow: 0 10px 5px -5px #777;}  

.box h3{text-align:center;  
position:relative;  
top:80px;}  

.box{width:70%;  
height:200px;  
background:#FFF;  
margin:40px auto;}


HTML: 

Код
<div class="box primer1">  
   <h3>Пример №1</h3>  
</div>


Результат:


Остальные 7 примеров тени можно посмотреть:  http://manual.ucoz.net/board/32-1-0-451
 
Форум » Общая информация » Все о создании сайтов. » Дизайн макеты сайтов
Страница 1 из 11
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz