Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Как сделать дизайн полю?

Как сделать дизайн полю?

#16 14 декабря 2013 в 17:10


Константин Г., получилось?

reload
Скачал программу! Сделал примерную форму с кнопкой. В итоге html файл получился в 15 строк а css для одного поля и кнопки в 1600 слишнем строк кода. Хз теперь что тамв css надо а что нет.
0
#17 14 декабря 2013 в 17:13
Кнопка вообще страшная получается. Надобы ей дизайн придать…
0
#18 14 декабря 2013 в 22:54


Константин Г., можно поиграться с отступами margin, padding и можно float
либо поле либо кнопку отцентровать как нужно...

стала левеее поля, вообщем вылезда вкрай кудато...

Константин Г.
потому что у поля отступ стоит 5% а у кнопки его нет) вот кнопка и позиционируется без отступа при переносе.

Я конечно не совсем понял что нужно сделать) поэтому советую наугад!)

в стили кнопки добавьте
width: 80%;
margin-left: 5%;

и верните свой

Кнопка появится под полем на всю длину поля...

reload

Хотелосьбы кнопки фон сделать голубой а то уныло смотрится… такое можно?
0
#19 14 декабря 2013 в 23:29
кароче ничо не получилось. width: 850px; неменяется размер если я тут меняю размер. кнопка остается по размеру текста.
0
#20 15 декабря 2013 в 00:46 
  1.  
  2. .great_btn {
  3.  background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%);
  4.  background-color: #000; 
  5.  color: #fff;
  6.  font-size: 16px;
  7.  text-shadow: 0 1px 0 #757575;
  8.  padding: 4px 0 5px 0;/* Менять надо тут*/
  9.  margin: 0;
  10.  cursor: pointer;
  11.  border: 0;
  12.  position: center;
  13.  box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #000;
  14.  width: 15px;
  15.  border-radius: 2px;
  16.  }
  17.  
  1.  padding: 4px 0 5px 0;
тут ясно сказано — сверху 4px, справа 0px, снизу 5px, слева 0px
Указывайте нужное вам и будет счастье.


Фон кнопки задан чёрный тут
  1. background-color: #000;
0
#22 15 декабря 2013 в 00:58
Константин Г., обращайтесь.

Скруглить углы можно добавив строку
  1. border-radius:5px /* Сколько пикселей выбирайте сами*/
Градиент кнопки настраивается в этой строке
  1. background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%);
0
#23 15 декабря 2013 в 01:14


Константин Г., обращайтесь.

Скруглить углы можно добавив строку

  1. border-radius:5px /* Сколько пикселей выбирайте сами*/
Градиент кнопки настраивается в этой строке
  1. background: linear-gradient #000(to bottom, #0bc408 0%,#09a206 100%);

Сергей

Спасибо.
0
#24 15 декабря 2013 в 04:33
Да нету за что.
И напоследок немного забавы.
Добавьте нижеуказанный код в ваш файл и если никто не соизволит нажать на кнопку в течении 10 секунд — она небрежно отвалится.
  1. @-webkit-keyframes hinge {
  2. 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
  3. 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
  4. 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
  5. 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
  6. 100% { -webkit-transform: translateY(700px); opacity: 0; }
  7. }
  8.  
  9. @-moz-keyframes hinge {
  10. 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
  11. 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
  12. 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
  13. 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
  14. 100% { -moz-transform: translateY(700px); opacity: 0; }
  15. }
  16.  
  17. @-o-keyframes hinge {
  18. 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
  19. 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
  20. 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
  21. 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
  22. 100% { -o-transform: translateY(700px); opacity: 0; }
  23. }
  24.  
  25. @keyframes hinge {
  26. 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }	
  27. 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
  28. 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
  29. 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }	
  30. 100% { transform: translateY(700px); opacity: 0; }
  31. }
  32.  
  33. .great_btn {
  34. -webkit-animation-name: hinge;
  35. -moz-animation-name: hinge;
  36. -o-animation-name: hinge;
  37. animation-name: hinge;
  38. }
  39. .great_btn{
  40. -webkit-animation-duration:2s;
  41. -moz-animation-duration:2s;
  42. -ms-animation-duration:2s;
  43. -o-animation-duration:2s;
  44. animation-duration:2s;	
  45. }
  46. .great_btn{
  47. -webkit-animation-iteration-count:1;
  48. -moz-animation-iteration-count:1;
  49. -ms-animation-iteration-count:1;
  50. -o-animation-iteration-count:1;
  51. animation-iteration-count:1;
  52. }
  53. .great_btn{
  54. -webkit-animation-fill-mode:forwards;
  55. -moz-animation-fill-mode:forwards;
  56. -ms-animation-fill-mode:forwards;
  57. -o-animation-fill-mode:forwards;
  58. animation-fill-mode:forwards;
  59. }
  60. .great_btn{
  61. -webkit-animation-delay:10s;
  62. -moz-animation-delay:10s;
  63. -ms-animation-delay:10s;
  64. -o-animation-delay:10s;
  65. animation-delay:10s;
  66. }
Пример тут modx.web1.by/button/
0
#25 15 декабря 2013 в 15:50


Да нету за что.
И напоследок немного забавы.
Добавьте нижеуказанный код в ваш файл и если никто не соизволит нажать на кнопку в течении 10 секунд — она небрежно отвалится.

  1. @-webkit-keyframes hinge {
  2.  
  3.  
  4. Пример тут http://modx.web1.by/button/
  5.  

Сергей

а сделать читобы она мигала через 15 сек
0
#26 15 декабря 2013 в 21:06
Для этого нужно вставить с таблицу стилей нижеуказанный код и присвоить нужной кнопке класс flash.
  1.  
  2. @-webkit-keyframes flash {
  3. 	0%, 50%, 100% {opacity: 1;}	25%, 75% {opacity: 0;}
  4. }
  5.  
  6. @-moz-keyframes flash {
  7. 	0%, 50%, 100% {opacity: 1;}	
  8. 	25%, 75% {opacity: 0;}
  9. }
  10.  
  11. @-o-keyframes flash {
  12. 	0%, 50%, 100% {opacity: 1;}	
  13. 	25%, 75% {opacity: 0;}
  14. }
  15.  
  16. @keyframes flash {
  17. 	0%, 50%, 100% {opacity: 1;}	
  18. 	25%, 75% {opacity: 0;}
  19. }
  20.  
  21. .flash {
  22. 	-webkit-animation-name: flash;
  23. 	-moz-animation-name: flash;
  24. 	-o-animation-name: flash;
  25. 	animation-name: flash;
  26.  
  27. 	-webkit-animation-iteration-count:infinite;
  28. 	-moz-animation-iteration-count:infinite;
  29. 	-ms-animation-iteration-count:infinite;
  30. 	-o-animation-iteration-count:infinite;
  31. 	animation-iteration-count:infinite;
  32.  
  33. 	-webkit-animation-duration:2s;
  34. 	-moz-animation-duration:2s;
  35. 	-ms-animation-duration:2s;
  36. 	-o-animation-duration:2s;
  37. 	animation-duration:2s;
  38.  
  39. /* Задержка анимации */
  40.  
  41. 	-webkit-animation-delay:15s;
  42. 	-moz-animation-delay:15s;
  43. 	-ms-animation-delay:15s;
  44. 	-o-animation-delay:15s;
  45. 	animation-delay:15s;	
  46. }
  47.  
Следующий код заставит кнопку дрыгаться 2 раза, если ей присвоить класс tada

  1. @-webkit-keyframes tada {
  2. 	0% {-webkit-transform: scale(1);}	
  3. 	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
  4. 	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
  5. 	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
  6. 	100% {-webkit-transform: scale(1) rotate(0);}
  7. }
  8.  
  9. @-moz-keyframes tada {
  10. 	0% {-moz-transform: scale(1);}	
  11. 	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
  12. 	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
  13. 	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
  14. 	100% {-moz-transform: scale(1) rotate(0);}
  15. }
  16.  
  17. @-o-keyframes tada {
  18. 	0% {-o-transform: scale(1);}	
  19. 	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
  20. 	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
  21. 	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
  22. 	100% {-o-transform: scale(1) rotate(0);}
  23. }
  24.  
  25. @keyframes tada {
  26. 	0% {transform: scale(1);}	
  27. 	10%, 20% {transform: scale(0.9) rotate(-3deg);}
  28. 	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  29. 	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  30. 	100% {transform: scale(1) rotate(0);}
  31. }
  32.  
  33. .tada {
  34. 	-webkit-animation-name: tada;
  35. 	-moz-animation-name: tada;
  36. 	-o-animation-name: tada;
  37. 	animation-name: tada;
  38.  
  39. 	-webkit-animation-iteration-count:2;
  40. 	-moz-animation-iteration-count:2;
  41. 	-ms-animation-iteration-count:2;
  42. 	-o-animation-iteration-count:2;
  43. 	animation-iteration-count:2;
  44.  
  45. 	-webkit-animation-duration:0.5s;
  46. 	-moz-animation-duration:0.5s;
  47. 	-ms-animation-duration:0.5s;
  48. 	-o-animation-duration:0.5s;
  49. 	animation-duration:0.5s;	
  50. }
В примере выставлена меньшая задержка и применена вторая анимация, а сам пример всё там-же modx.web1.by/button
Следует обратить внимание на конструкцию. Кнопка завёрнута в <div>
  1.  
  2. <div class=" tada">
  3. <button type="button" class="flash">
  4. Халява! Жми!
  5. </button>
  6. </div>
  7.  
0
#27 15 декабря 2013 в 21:22
Кнопка дергается тока сразу. Акак-то задержку перед дерганьем можно настроить? 20с к примеру?
0
#28 15 декабря 2013 в 21:23
тока не отваливалась а просто подергалась и успокоилась…
0
#29 15 декабря 2013 в 21:30
Отваливается первая кнопка. Вторая дёргается и мигает. Можно и плясать их заставить, вот только научить петь не получится.
Всё это свойства анимации CSS3, и если вас это заинтересовало — ищите мануалы по запросу CSS3 анимация.

Задержка, если вы внимательно посмотрите на первый код в прошлом сообщении, указывается с помощью строк.
  1.  
  2. /* Задержка анимации */
  3. -webkit-animation-delay:15s;
  4. -moz-animation-delay:15s;
  5. -ms-animation-delay:15s;
  6. -o-animation-delay:15s;
  7. animation-delay:15s;	
  8.  
0
Как переадресовать пользовател
Авторизация Loginza выводится
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Как настроить фильтр в Типе Контента по полю изображение?

Релизы 2.X Создана 1 месяц назад 4 сообщения

Как сделать что бы фотки в альбомах сортировались по полю ordering которое есть в базе?

Флейм / Флуд / Оффтопик Создана 11 месяцев назад 1 сообщение

Как правильно сделать главная старница по дизайну польностью отличается от основго дизайна?

Шаблоны, графика, стили Создана 8 месяцев назад 6 сообщений

CSS для поля

Дизайн / Графика / Искусство Создана 4 года назад 6 сообщений

Доступ к полю или контенту конкретному пользователю

Виджеты, компоненты, плагины, модули Создана 3 года назад 11 сообщений

[ЗАКРЫТО] Сортировка по суммированному полю

БАЗЫ ДАННЫХ/ SQL / MySQL Создана 2 года назад 5 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.