BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos

> > Шикарные формы и виджет поиска на CSS

Шикарные формы и виджет поиска на CSS

Автор:   суббота, июля 16, 2011 на суббота, июля 16, 2011  

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

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

Шикарный виджет поиска в блог
Примечательно, что в небезызвестном IE виджет смотрится по-прежнему симпатично, хотя и без скругленных углов:

Пример виджета поиска в IE
Установка формы поиска:

Основой данного виджета поиска является довольная стандартная форма кода, единственно, с добавлением атрибута placeholder для отображения эффекта исчезающего текста при вводе запроса в поле поиска абсолютно без участия JavaScript:
К этой форме мы добавим привлекательности, которая и придаст виджету оригинальный и современный вид:
#searchbox {
  background: #eaf8fc;
  background-image: -moz-linear-gradient(#fff, #d4e8ec);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
  -moz-border-radius: 35px;
  border-radius: 35px; 
  border-width: 1px;
  border-style: solid;
  border-color: #c4d9df #a4c3ca #83afb7;            
  width: 500px;
  height: 35px;
  padding: 10px;
  margin: 100px auto 50px;
  overflow: hidden;
}

#search, #submit {
  float: left;
}

#search {
  padding: 5px 9px;
  height: 23px;
  width: 380px;
  border: 1px solid #a4c3ca;
  font: normal 13px 'trebuchet MS', arial, helvetica;
  background: #f1f1f1;
  -moz-border-radius: 17px 3px 3px 18px;
  border-radius: 17px 3px 3px 18px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit {  
  background: #6cbb6b;
  background-image: -moz-linear-gradient(#95d788, #6cbb6b);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
  -moz-border-radius: 3px 50px 50px 3px;
  border-radius: 3px 50px 50px 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #7eba7c #578e57 #447d43;
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
  height: 35px;
  margin: 0 0 0 10px;
  padding: 0;
  width: 90px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #23441e;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover {  
  background: #95d788;
  background-image: -moz-linear-gradient(#6cbb6b, #95d788);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
} 

#submit:active {  
  background: #95d788;
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}

#submit::-moz-focus-inner {
  border: 0;  /* Small centering fix for Firefox */
}

/* ----------------------- */

#search::-webkit-input-placeholder {
  color: #9c9c9c;
  font-style: italic;
}

#search:-moz-placeholder {
  color: #9c9c9c;
  font-style: italic;
}    

#search.placeholder {
  color: #9c9c9c !important;
  font-style: italic;
} 

#search:focus {
  border-color: #8badb4;
  background: #fff;
  outline: none;
}
Элегантный виджет поиска, выполненный  только средствами CSS, можно считать завершенным и готовым к употреблению, осталось только скомпоновать все части кода воедино и разместить у себя в блоге на Blogger. Для этого используйте родной гаджет HTML/JavaScript. При желании данную форму поиска можно разместить непосредственно в требуемом месте шаблоне блога во вкладке "Изменить HTML".


Размещаемый код: 
<style>
#searchbox {
  background: #eaf8fc;
  background-image: -moz-linear-gradient(#fff, #d4e8ec);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
    
  -moz-border-radius: 35px;
  border-radius: 35px;
    
  border-width: 1px;
  border-style: solid;
  border-color: #c4d9df #a4c3ca #83afb7;            
  width: 500px;
  height: 35px;
  padding: 10px;
  margin: 100px auto 50px;
  overflow: hidden;
}
        
  #search, #submit {
  float: left;
}
        
#search {
  padding: 5px 9px;
  height: 23px;
  width: 380px;
  border: 1px solid #a4c3ca;
  font: normal 13px 'trebuchet MS', arial, helvetica;
  background: #f1f1f1;
            
  -moz-border-radius: 17px 3px 3px 18px;
  border-radius: 17px 3px 3px 18px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}
  
/* ----------------------- */
#submit {  
  background: #6cbb6b;
  background-image: -moz-linear-gradient(#95d788, #6cbb6b);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
            
  -moz-border-radius: 3px 50px 50px 3px;
  border-radius: 3px 50px 50px 3px;
            
  border-width: 1px;
  border-style: solid;
  border-color: #7eba7c #578e57 #447d43;
            
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     
  height: 35px;
  margin: 0 0 0 10px;
  padding: 0;
  width: 90px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #23441e;
   
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
  
#submit:hover {  
  background: #95d788;
  background-image: -moz-linear-gradient(#6cbb6b, #95d788);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
} 
#submit:active {  
  background: #95d788;
  outline: none;
           
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}
#submit::-moz-focus-inner {
  border: 0;  /* Small centering fix for Firefox */
}   
 
  
/* ----------------------- */
#search::-webkit-input-placeholder {
  color: #9c9c9c;
  font-style: italic;
}
        
#search:-moz-placeholder {
  color: #9c9c9c;
  font-style: italic;
}    
        
#search.placeholder {
  color: #9c9c9c !important;
  font-style: italic;
}  
        
#search:focus {
  border-color: #8badb4;
  background: #fff;
  outline: none;
}

</style>
Размеры формы поиска регулируются на участке кода #search { } с помощью атрибутов height: 23px; width: 380px;, в которых вы можете заменить числовые значения на свои. Также можно заменить название кнопки виджета и текст, отображающийся по умолчанию в поле ввода поиска, прописывая свои фантазии в отрезках кода value="Поиск" и value="Введите текст" соответственно.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:



РУБРИКИ: ,
Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.