Красивое оформление css блоков

0

Автор verond | Рубрики css, Вебмастеру | 09-08-2014


Знание CSS позволяет оформить на сайте красивые элементы. Это блоки, таблицы, текст, формы, ники, меню, фон, рамки и другие веб-элементы. Я подготовила подборку готовых кодов css и онлайн сервисов, где есть готовые шаблоны или возможность сгенерировать в режиме онлайн любой красивый блок.

Техническая информация

Для того, чтобы подключить файл стилей, нужно в код веб-страницы между  head вставить следущую строку между скобками  <  …… /> :

1
link href="style.css" rel="stylesheet" type="text/css"

 

Готовые стили: красивое оформление блоков css.

 

Сервис  themeshock.com

25 шаблонов красивого оформления css

Здесь представлены 25 готовых решений. Достаточно выбрать понравившийся и скопировать код для установки на свой сайт.

 

Онлайн сервис layerstyles.org

Создаем блок со стилями фотошопа

Экспериментируем с разными установками теней, обводок, размытия и т.д. в знакомом интерфейсе фотошоп. Результат получаем моментально. Остается скопировать код и вставить на сайт.

 

Заготовка блока с чистым CSS3 без использования изображений

 

Для старых версий браузеров это код не будет оптимальным. Но те, кто перешел на новые современные браузеры Firefox, Safari, Сhrome, кстати Opera тоже не отстает, смогут видеть данный блок без искажений.

Ваша работа заключается в том, чтобы изменить на свои такие свойства стилей, как border — границы, drop shadow — тени и gradient — градиента.

 Готовый CSS блок — код, который пишется в файле стилей style.css:

1
2
3
4
5
body {font-family:arial; font-size:14px;}
.block {width:330px; padding-bottom:30px;}
.block h2 {margin:0; padding:10px 0 0 15px;font-size:16px;}
p {width:300px; margin:0 auto;}
.effect {border:3px solid #666; -moz-box-shadow: 0px 0px 3px #333; -webkit-box-shadow: 3px 3px 3px #333; -moz-border-radius: 15px; -webkit-border-radius: 15px; background: -moz-linear-gradient(center bottom , #CACACA 9%, #ECECEC 92%) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(202,202,202)), color-stop(0.92, rgb(236,236,236)))}

Код, который вставляется В html между тегами body:

1
2
3
4
5
<div class="block effect">
<h2>CSS3</h2>
Для того, чтобы видеть правильный результат используйте последние версии Firefox, Chrome и Safari.

</div>

Так он должен выглядеть в современных браузерах. Скрин с хрома и новой версии оперы 23:

Блок в фроме

В старых версиях его дизайн немного будет отличаться. Например, в старой версии опере 12.17 мы видим блок по-другому:

Блок со стилями в опере

Демо блока

Это современный подход для Firefox, Chrome, Opera, Safari. За ним будущее. И уже дело веб-мастера как поступить: использовать новые технологии, пожертвовав пользователями со старыми браузерами и идти в ногу с теми, кто использует современные программы или же плестись в хвосте веб технологий. В конце концов, ничего не обновляя пользователь сам добровольно отказался от просмотра красоты, не говоря о безопасности.

Поэтому, этот метод перспективный и его есть смысл использовать уже сегодня.

 

 Готовый css3 блок с красивой тенью

Красивая тень css для блоков

Код CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.blok {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.blok:before,
.blok:after {
content:"";
position:absolute;
z-index:-2;
}

.blok p {
font-size:16px;
font-weight:bold;
}

Код HTML

1
2
3
4
5
<div class="blok">

Приподнятый блок

</div>

Демо

 

Красивая форма css

 

Сгенерировать оригинальные стили для формы, кнопки, иконки легко в сервисе livetools.uiparade.com

css оформление форм

 

Готовые стильные формы можно использовать на подписных страницах.

 

 Как создать css форму обратной связи

Стили формы для обратной связи

Элемент <fieldset> предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных.

Объединяем form и fildset, чтобы разместить текстовое поле (в данном случае это дополнительный элемент) горизонтально, а другие элементы вертикально.

Определяем стили в файле style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* Форма обратной связи */
#fonforma { width: 600px;
height:220px;
background:#ccc;
border:10px solid #fff;
box-shadow: 0px 0px 10px #000;
border-style: solid;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:15px;
}
#form1 {
margin:1em 0;
padding-top:10px;

}
#form1 fieldset {
margin:0;
padding:0;
border:none;
float:left;
display:inline;
width:260px;
margin-left:25px;
}
#form1 p {margin:.5em 0;}
#form1 label {display:block;}
#form1 input, #form1 textarea {
width:252px;
border:1px solid #ddd;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
background:#fff url(myimages/form_input.gif) repeat-x;
padding:3px;
}
#form1 textarea {
height:125px;
overflow:auto;
}
#form1 p.submit {
clear:both;
background:url(myimages/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
}
#form1 button {
width:150px;
height:37px;
line-height:37px;
border:none;
background:url(myimages/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}

В то место на веб-странице, где хотите вывести форму вставьте код:

скачать в текстовом файле.

Демо формы

Для того, чтобы форма заработала еще понадобится php обработчик. В вордпресс легко создавать любые контактные формы при помощи плагинов.

 

С помощью CSS можно сделать необыкновенные эффекты. Когда я смотрю на результат, то каждый раз загораюсь разными идеями! В сложных конструкциях просто так не разобраться.  Нужно понять логику и знать какие свойства за что отвечают.

Я очень рекомендую приобрести полный видео курс Е. Попова. Он четко и как-то легко рассказывает и показывает самые сложные вещи. Его 36 уроков послужат качественным фундаментом для дальнейшего освоения.

А цена на сегодняшний день совершенно не кусается. 🙂

Просто нажмите на коробку с курсом и вы попадете в сказочные стили.

Добавляйте пост в свои любимые социальные сети, и Вы сможете вернуться к этой записи в любое время.


Написать комментарий