• Облако меток

Архив тега: CSS

Создание красивых кнопок с градиентной заливкой с помощью CSS

Май 08, 2011   Александр Маврин   3 комментария

Привет всем читателям и тем, кто просто проходил мимо.) Для тех, кто интересуется созданием сайтов, изучает языки программирования, а также HTML, CSS и другие полезные вещи — делюсь некоторыми методами создания красивых кнопок с помощью каскадных таблиц стилей. Кнопки полностью активные. Реагируют на наведение курсора и нажатие. Пример таких кнопок можно посмотреть здесь.

Итак, чтобы создать такие кнопки, необходимо создать файл: style.css. Если этот файл уже существует, то нужно вставить в него следующий код:

 

.custom-button {
 box-shadow: 0 4px 0 #931D17, 0 -1px 4px #999, inset 0 0 1px #fff;
 -o-box-shadow: 0 4px 0 #931D17, 0 -1px 4px #999, inset 0 0 1px #fff;
 -moz-box-shadow: 0 4px 0 #931D17, 0 -1px 4px #999, inset 0 0 1px #fff;
 -webkit-box-shadow: 0 4px 0 #931D17, 0 -1px 4px #999, inset 0 0 1px #fff;
 
 border-radius: 3px;
 -o-border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 
 text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
 -o-text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
 -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
 -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
 
 padding: 6px 12px;
 color: #fff;
 border: 1px solid #CD0202;
 
 background: #CD0202;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFEDE4), color-stop(1, #CD0202));
 background: -moz-linear-gradient(top, #FFEDE4 1%, #CD0202 100%);
 background: -o-linear-gradient(#FFEDE4, #CD0202);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEDE4', endColorstr='#CD0202');
 
 font-size: 13px;
 font-family: tahoma, arial;
 font-weight: bold;
 
 cursor: pointer;
 outline: 0;
 
 display: inline-block;
 float: left;
 margin: 0 2px;
}
 
.custom-button:active {
 box-shadow: inset 0px 0px 1px #fff;
 -o-box-shadow: inset 0px 0px 1px #fff;
 -moz-box-shadow: inset 0px 0px 1px #fff;
 -webkit-box-shadow: inset 0px 0px 1px #fff;
 margin-top: 4px
}
 
.custom-button:hover {
 opacity: .85;
}

И на странице, в том месте, где Вы хотите разместить кнопку, вставляете этот код:

<div><a style="float: center; padding-top: 0px; text-decoration: none;" href="ссылка">
<input class="custom-button" name="Сброс" type="reset" value="Текст" />
  <span style="text-align: center;"> </span></a></div>

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

Популярность: 12% [?]

Читать полностью

Коммерческий веб-дизайн для чайников

Август 21, 2010   Александр Маврин   7 комментариев

Книга

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


Популярность: 14% [?]

Читать полностью

Знакомство с WordPress

Июнь 05, 2010   Александр Маврин   Комментариев нет

wordpressНебольшой рассказ о том, как я начинал работать с известной системой по созданию сайтов во всем мире — WordPress. Мягко говоря я имел очень смутное представление об этой системе, но хотелось уже опробовать ее в деле. В общем методом тыка и советов бывалых, у меня все-таки получилось создать сайт с помощь WordPress. Не все конечно так легко, как расписывают об этом знатоки этого дела. Все тонкости познаются на практике. Без ошибок, как говорится, никуда. Главными трудностями для меня всегда были всякого рода кодировки, будь то HTML- тэги или CSS- стили. Для меня это было просто темным лесом. Не говоря уже о поисковой оптимизации. Очень хотелось поскорей все изучить, чтобы врубаться в тему и понимать людей на форумах, задавая очередные вопросы. До сих пор до конца все не изучил, но весь материал ведь сразу не охватишь. Так, что еще есть к чему стремиться. И Вам, друзья советую заняться изучением подобных материалов. Очень развивает мозг и приобретаются очень полезные знания.

Популярность: 2% [?]

Читать полностью
Страница 3 из 3123