Създаване на люлеещо се поле за търсене на CSS3
CSS3 е езикът на стиловете от следващо поколение. Той въвежда много нови и вълнуващи функции като сенки, анимации, преходи, радиус на границите и т.н. Въпреки че спецификациите все още не са финализирани, много производители на браузъри вече са започнали да поддържат много от новите функции..
В този урок ще разгледаме някои от тези функции като текстови сянка, граничен радиус, макетни сенки и преходи, за да се създаде поле за търсене.
Photoshop версията на това поле за търсене е създадена от Alvin Thong и може да бъде изтеглена от тук. Опитах се да пресъздам това поле за търсене с чист CSS3. Трябва да се отбележи, че не всички браузъри поддържат CSS3 функции и за да изпробвате този урок, трябва да използвате един от модерните браузъри, които поддържат CSS 3 функции.
Готов? Да започваме!
1. HTML5 Doctype
Ще започнем с HTML маркирането. Много е просто, след HTML5 doctype и декларация, ние имаме a с идентификационен номер #wrapper вътре . Това се прави просто, за да се определи ширината на полето за съдържание и да се приведе в съответствие с центъра на страницата.
Това е последвано от a Ето как изглежда кодът: За да създадете голямата кутия около формата, ще добавим стилове към Важната част от кода тук е Обяснение: Тук ключовата дума inset указва дали сянката ще бъде в кутията. Първите две нули показват x-offset и y-offset, а 3px показва размазването. Следва декларация за цвят. Тук съм използвал стойностите на rgba; rgba означава червено-зелено синьо и алфа (непрозрачност). Така че 4-те стойности в скобите показват количеството червено, зелено, синьо и неговата алфа (непрозрачност). Ще забележите, че 5 комплекта декларации в сянка са били избити заедно. Това може да стане, като се разделят със запетая. Първите две сенки дефинират белия ефект "вътрешен блясък", а следващите декларации придават на кутията си твърд / буен вид. Играйте с тези стойности, за да разберете как работи. Сега, когато кутията е завършена, нека преминем към стилизиране на полето за въвеждане. Стиловете, декларирани за полето за въвеждане, са доста сходни с тези, които са декарирани за голямото поле Обяснение: Ще забележите, че този път замъгляването в сянка е запазено на 0, за да се получи рязко сянка и се използва вертикално отместване от 5px. В последователните декларации размазването е запазено на 0px, но цветът и y-offset са променени. Отново играйте с тези стойности, за да получите различни резултати. Нека стигнем бутона за търсене. Освен цветовете, бутонът за търсене има предимно същите стилове като този на външната кутия. Подобен граничен радиус и сенчести кутии са използвани на бутона. Новата функция е въведена Обяснение: В Активното състояние на бутона има малко повече промени. В това, дадох на бутона позиция абсолютна и 'top' стойност от 5px. Това е направено, за да му придаде по-естествен вид, така че да се чувства, че бутонът е бил натиснат с 5 пиксела. Други промени в активното състояние са на цвета на фона и сенките. Забележете, че съм намалил y-компенсирането на сенките, за да му придавам поглед „притиснат надолу“. Ето кода за активното състояние на бутона за изпращане: Това допълва полето ни за търсене. Използвахме доста от новите функции на CSS3. Това е пълната CSS и HTML на това поле за търсене. Надявам се, че ви хареса този урок. Чувствайте се свободни да експериментирате с тези функции и не забравяйте да споделяте мислите си. Бележка на редактора: Тази публикация е написана от Bharani M за Hongkiat.com. Bharani е дизайнер / разработчик от Ню Делхи, Индия.#main. Този идентификатор съдържа стиловете, които определят голямата бяла кутия около полето за въвеждане и бутона за търсене. Това декларирани в него. Формулярът съдържа поле за въвеждане на текст и sEarch бутона. Ето как изглежда формата, без да се прилагат стилове към нея: 
CSS3 Поле за търсене
2. Създаване на ограничителна кутия
#main. От показания по-долу код ще забележите, че на полето е дадена ширина от 400 пиксела и височина 50px. #main width: 400px; височина: 50px; фон: # f2f2f2; пълнеж: 6px 10px; граница: 1px твърдо # b5b5b5; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
граничен радиус декларация и кутия сянка декларация. За създаването на заоблени ъгли сме използвали декларацията CSS3 border-radius, "-moz-" и "-webkit-" префиксите на браузъра са били използвани, за да се гарантира, че това работи в gecko и webkit базирани браузъри. Декларацията за сянка на кутията може да изглежда малко объркваща, но всъщност е много проста. box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
предварителен преглед
3. Оформяне на полето за въвеждане
input [type = "text"] float: left; ширина: 230px; пълнеж: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; граница: 1px твърдо # 999999; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; -moz-box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede; -webkit-box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede; box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede;
#main. Използвахме същия радиус на границата (5px). Отново, многобройни сенки за кутии са били счупени. box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede;
предварителен преглед
4. Оформяне на бутона за изпращане
вход [type = "submit"]. курсор: указател; ширина: 130px; пълнеж: 8px 6px; margin-left: 20px; фон-цвят: # f8b838; цвят: rgba (134, 79, 11, 0.8); text-transform: главни; тегло на шрифта: удебелен; граница: 1px твърдо # 99631d; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; текстова сянка: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ссс; -webkit-transition: фон 0.2s се улеснява;
текстови сянка. текстова сянка: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
текстови сянка Първите три числови стойности са съответно x-offset, y-offset и blur. Стойностите rgba показват цвета на сенките. В следващия набор от декларации (разделени със запетая) на y-offset се дава стойност -1. Това се прави, за да се даде на текста “вътрешна сянка” ефект. Състоянието на придвижване / фокусиране на бутона за подаване има различни стойности на цвета на фона и сенките. предварителен преглед
"Активно" състояние за бутон
[type = "submit"] твърдо: активно фон: # f6a000; позиция: относителна; отгоре: 5px; граница: 1px твърдо # 702d00; -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ссс;
Пълният (CSS) код
#main width: 400px; височина: 50px; фон: # f2f2f2; пълнеж: 6px 10px; граница: 1px твърдо # b5b5b5; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.8), вмъкване 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; ширина: 230px; пълнеж: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; граница: 1px твърдо # 999999; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; -moz-box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede; -webkit-box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede; box-shadow: вмъкване 0 5px 0 #ccc, вмъкване 0 6px 0 # 989898, вмъкване 0 13px 0 #dfdede; input [type = "submit"]. курсор: указател; ширина: 130px; пълнеж: 8px 6px; margin-left: 20px; фон-цвят: # f8b838; цвят: rgba (134, 79, 11, 0.8); text-transform: главни; тегло на шрифта: удебелен; граница: 1px твърдо # 99631d; -moz-border-radius: 5px; - радиус: 5px; граничен радиус: 5px; текстова сянка: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ссс; -webkit-transition: фон 0.2s се улеснява; input [type = "submit"] solid: hover, input [type = "submit"] твърдо: фокус фон: # ffd842; -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.9), приставка 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.9), вмъкване 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.9), вмъкване 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ссс; input [type = "submit"] твърдо: активно фон: # f6a000; позиция: относителна; отгоре: 5px; граница: 1px твърдо # 702d00; -moz-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: вмъкване 0 0 3px rgba (255, 255, 255, 0.6), вмъкване 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ссс;
