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

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

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

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

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

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

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

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

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

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

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

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

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)))}

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

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

.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; }

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

Сгенерировать оригинальные стили для формы, кнопки, иконки легко в онлайн сервисах. Готовые стильные формы можно использовать на подписных страницах.

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

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

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

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

/* Форма обратной связи */ #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 уроков послужат качественным фундаментом для дальнейшего освоения.

Сss затемнение картинки при наведении мыши

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

Например, было

#post-author .profile-image img { width:90%; height: auto; background: #fff; padding:5%; border:1px solid #ddd;

и мы добавляем далее в эту строку следующий код:

opacity:0.8;

-moz-opacity:0.8;

filter: alpha(opacity=80) black;

-khtml-opacity: 0.8;

background-color:#fff; }

и еще добавляем с hover:

#post-author .profile-image img:hover { width:90%; height: auto; background: #fff; padding:5%; border:1px solid #ddd; opacity:1;

-moz-opacity:1;

filter: alpha(opacity=100) black;

-khtml-opacity: 1;

background-color:#fff; }

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