Het eerste blokgebied is omwikkeld met een sectielabel, zodat we de opmaak naast elkaar kunnen zweven. De linkerkolom bevat al deze invoer: tekst, e-mail, URL en telefoonnummer. Terwijl u doorklikt op uw telefoon, moet het scherm van het mobiele toetsenbord worden aangepast op basis van het invoertype. Er zijn tal van goede redenen om deze functies voor mobiel te ondersteunen, omdat iedereen tegenwoordig werkt aan mobiel werken.
Het textarea-element kan ook een tijdelijke aanduidingtekst hebben die op pageload is gedefinieerd. Dit is vergelijkbaar met een label dat verdwijnt zodra de gebruiker wat tekst in het veld invoert. Het kenmerk dat niet wordt overgedragen, is autocomplete omdat tekstgebieden meestal geen verwante inhoud invullen.
Zijbalkbesturing Ik wilde dit formulier zo bouwen dat het op de juiste manier zou reageren op het aanpassen van de grootte van vensters. Als het venster vol genoeg is, zweven beide invoerkolommen naast elkaar. Maar als de breedte iets wordt verlaagd, zakt de rechterzijbalk onder de hoofdinhoud.
Dit is mijn HTML voor het zijbalkgebied:
Ontvanger: Site personeel Hoofdredacteur Technische afdeling Publieke relaties Algemene ondersteuning Deze code is eigenlijk niets zo verwarrend. Gewoon een eenvoudig keuzemenu en enkele keuzerondjes. Daarnaast heb ik na deze objecten een reset- en verzendknop geplaatst aan het einde van het gedeelte.
Dit ziet er allemaal goed en goed uit, dus laten we nu een paar CSS-eigenschappen bekijken. Er zijn zoveel aanpassingen die u kunt toepassen wanneer u aan formulierelementen werkt. Probeer jezelf niet te vervelen met te veel nadenken en plezier te hebben!
Geanimeerde doosschaduwen Je zult het opmerken terwijl je door elk van de belangrijkste invoerelementen tafereel dat ik een kleurrijke buitenste schaduw heb geanimeerd. Google Chrome heeft een outline-eigenschap die iets vergelijkbaars doet, maar niet zo extravagant. Dit kleine deel van de interface is aantrekkelijk voor beginnende bezoekers.
/ ** de vormelementen ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; randstijl: stevig; grensbreedte: 1px; randkleur: #dedede; margin-bottom: 20px; font-size: 1.55em; opvulling: 11px 25px; padding-links: 55px; breedte: 90%; kleur: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; overgang: rand 0.15s lineaire 0s, vakschaduw 0.15s lineaire 0s, kleur 0.15s lineaire 0s; -webkit-overgang: rand 0.15s lineaire 0s, vakschaduw 0.15s lineaire 0s, kleur 0.15s lineaire 0s; -moz-overgang: grens 0,15s lineaire 0s, vakschaduw 0,15s lineaire 0s, kleur 0,15s lineaire 0s; -o-overgang: grens 0,15s lineaire 0s, vak-schaduw 0,15s lineaire 0s, kleur 0,15s lineaire 0s; # hongkiat-form .txtinput: focus color: # 333; grenskleur: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-vak-schaduw: 0 1px 3px rgba (0, 0, 0, 0,1) inzet, 0 0 8px rgba (41, 92, 161, 0.6); overzicht: 0 geen; Om elk tekstelement te targeten, heb ik de klas gebruikt .txtInput. Elk van de overgangseigenschappen werkt op rand, vakschaduw en kleur. ik gebruik box-sizing: border-box; op de vormcontainer zodat padding ons responsieve ontwerp niet verpest.
Ik moest dezelfde stijlen kopiëren en ze enigszins bewerken voor het tekstgebied. Ik heb enkele vullingen en marges gewijzigd en een uniek achtergrondpictogram toegevoegd.
# hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; randstijl: stevig; grensbreedte: 1px; randkleur: #dedede; margin-bottom: 15px; font-size: 1.5em; opvulling: 11px 25px; padding-links: 55px; breedte: 90%; hoogte: 180 px; kleur: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet; overgang: rand 0.15s lineaire 0s, vakschaduw 0.15s lineaire 0s, kleur 0.15s lineaire 0s; -webkit-overgang: rand 0.15s lineaire 0s, vakschaduw 0.15s lineaire 0s, kleur 0.15s lineaire 0s; -moz-overgang: grens 0,15s lineaire 0s, vakschaduw 0,15s lineaire 0s, kleur 0,15s lineaire 0s; -o-overgang: grens 0,15s lineaire 0s, vak-schaduw 0,15s lineaire 0s, kleur 0,15s lineaire 0s; # hongkiat-form textarea: focus color: # 333; grenskleur: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inzet, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inzet, 0 0 8px rgba (40, 90, 160, 0.6); overzicht: 0 geen; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px zonder herhaling; Zijbalkinvoer De keuzerondjes en selecteer menu-items zijn veel eenvoudiger gestyled. Je kunt uiterlijke gloedeffecten en vergelijkbare slagschaduwen toepassen op deze elementen, maar het ziet er niet altijd goed uit. Als alternatief zullen ontwerpers aangepaste gebruikersinterfaces maken en deze als achtergrondafbeeldingen hechten. Maar dit kan een jQuery-oplossing vereisen om ervoor te zorgen dat de opties correct worden weergegeven.
span.radiobadge weergave: blok; margin-bottom: 8px; span.radiobadge-label font-size: 1.2em; padding-bottom: 4px; select.selmenu font-size: 17px; kleur: # 676767; opvulling: 9px! belangrijk; border: 1px solid #aaa; breedte: 200 px; Ik heb niet veel gedaan om deze weg te duwen van de belangrijkste invoerelementen. Veel extra opvulling is belangrijk, zodat uw gebruikers zich prettig voelen in de omgang met het formulier. Wanneer tekst super klein is, kan het een worsteling zijn om elk onderdeel in te vullen. Houd je lettertype groot, maar niet zo groot dat het de pagina overweldigt.
Aangepaste knoppen De reset- en verzendknoppen zijn ontworpen in een klasse apart. Ik heb een reeks lichtgradiënten ontwikkeld die goed overeenkomen met de blauwe hoogtepunten in onze formuliervelden.
Hieronder is mijn CSS-code voor de verzendknop op standaard en hover-status.
#knoppen #submitbtn display: block; zweven: links; hoogte: 3em; opvulling: 0 1em; rand: 1px vast; omtrek: 0; lettertype: vet; font-size: 1.3em; kleur: #fff; tekstschaduw: 0px 1px 0px # 222; white-space: nowrap; word-wrap: normaal; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; grensradius: 2px; grenskleur: # 5e890a # 5e890a # 000; -moz-box-shadow: inzet 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: inzet 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: inzet 0 1px 0 rgba (256,256,256, .35); vakschaduw: inzet 0 1px 0 rgba (256,256,256, .35); achtergrondkleur: rgb (226,238,175); achtergrondafbeelding: -moz-lineaire gradiënt (boven, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (3%, rgb (226,238,175)), kleurstop (3%, rgb (188,216,77)), kleurstop (100 %, rGB (144,176,38))); achtergrondafbeelding: -webkit-lineaire gradiënt (bovenste, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); achtergrondafbeelding: lineaire gradiënt (boven, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #knoppen #submitbtn: hover, #buttons #submitbtn: active border-colour: # 7c9826 # 7c9826 # 000; kleur: #fff; -moz-box-shadow: inzet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: inzet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: inzet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); vakschaduw: inzet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); achtergrond: rgb (228.237.189); achtergrond: -moz-lineaire gradiënt (bovenste, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (2%, rgb (228.237.189)), kleur-stop (3%, rgb (207,219,120)), kleurstop (100%, rgb ( 149,175,54))); achtergrond: -webkit-lineaire gradiënt (boven, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); achtergrond: -o-lineaire gradiënt (bovenste, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); achtergrond: -ms-lineaire gradiënt (bovenste, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); achtergrond: lineaire gradiënt (bovenste, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Het is bijna onmogelijk om dit type selector schoon te houden! Er zijn simpelweg te veel eigenschappen die u nodig hebt om op te noemen en te ondersteunen voor veel oudere oudere browsers. Internet Explorer kan deze verlopen zelfs weergeven met het juiste filter. Naast de achtergrondgradiënten heb ik ook een nieuwe randkleur, afgeronde hoeken en een vakschaduw bij zweven toegevoegd.
De resetknop lijkt op elkaar, maar ik heb een geheel andere route gekozen met het kleurenschema. Lichtgrijs heeft de neiging om op de achtergrond te vallen in vergelijking met de felgroene kleuren. Onze reset-knop zal waarschijnlijk niet veel worden gebruikt, dus het heeft niet alle aandacht nodig.
#knoppen #resetbtn display: block; zweven: links; kleur: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; hoogte: 3em; opvulling: 0 1em; omtrek: 0; lettertype: vet; font-size: 1.3em; white-space: nowrap; word-wrap: normaal; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; grensradius: 2px; achtergrondkleur: #fff; achtergrondafbeelding: -moz-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (2%, rgb (255,255,255)), kleur-stop (2%, rgb (240,240,240)), kleurstop (100%, rGB (222222222))); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); achtergrondafbeelding: lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); rand: 1px vast # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); #knoppen #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); kleur: # 818181; achtergrondkleur: #fff; achtergrondafbeelding: -moz-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (2%, rgb (255,255,255)), kleur-stop (2%, rgb (244,244,244)), kleurstop (100%, rGB (229229229))); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); achtergrondafbeelding: lineaire gradiënt (boven, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); randkleur: #aeaeae; vakschaduw: inzet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); U kunt zelfs het resettype laten vallen en dit wit / grijze kleurenschema gebruiken als uw belangrijkste verzendknop. Ik heb veel van dezelfde verloopstijlen en slagschaduweffecten gebruikt, samen met een tekstschaduw voor het binnenste label. Het geeft absoluut een ander gevoel aan de gebruikerservaring.
Responsieve lay-outwijzigingen Bij het overstappen naar mijn andere CSS-bestand kunnen we kijken naar de eenvoudige responsieve mediaquery's die ik heb ingesteld. Elk browservenster boven 800px ervaart de volledige zijbalkinterface. Als je onder deze drempelwaarde komt, wordt de linkerkolom groter naar 100% breedte en zie je de elementen in de zijbalk beneden vallen.
@media-scherm en (max-breedte: 800px) body opvulling: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; zweven: geen; weergave: blok; # hongkiat-form #aside width: 100%; weergave: blok; zweven: geen; # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%; #prioritycase float: left; weergave: blok; #recipientcase float: links; weergave: blok; margin-right: 55px; Naarmate we dichterbij komen, probeer ik elk van de invoerformulieren aan te passen. De eigenschap width kan langer zijn dan de webpagina zelf en vervolgens hebben we invoerformulieren over de rand. Dit gebeurt rond 550px, waarbij ik de volgende query verbreek, samen met de schermresoluties van de iPhone voor portret en landschap.
/ * kleiner scherm drop-off ******* / @media only scherm en (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%; / * iPhone Landscape ******** / @media alleen scherm en (max-width: 480px) body opvulling: 10px 0px; select.selmenu width: 190px; / * iPhone-portret ******* / @media alleen scherm en (max-breedte: 320px) body opvulling: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%; # hongkiat-form #aligned overflow: verborgen; select.selmenu width: 160px; #recipientcase margin-right: 30px; De horizontale landschapsmodus houdt alles nog steeds goed bij elkaar. Ik heb het vervolgkeuzemenu-menu alleen wat dunner gemaakt om plaats te maken voor de keuzerondjes. In de portretweergave heb ik de grootte van alle elementen aangepast naar veel kleinere breedten. Nu breekt onze code niet, zelfs niet in de verkleinde browservensters. Maar het is ook prettig om ondersteuning te hebben voor iOS / Android-smartphones.
demonstratie Download de broncode Conclusie Ik hoop dat deze tutorial informatief is geweest om uit te leggen hoeveel er kan worden gedaan op uw webformulieren. De nieuwe CSS3-eigenschappen zijn krachtig genoeg om volledig functionerende animaties te bouwen met slechts een paar regels code. Het is echt een opwindende tijd om te werken aan webontwikkeling en het volgen van deze trends.
Als u ideeën of suggesties over de zelfstudiecode heeft, kunt u deze via het onderstaande opmerkingenveld met ons delen.
