Share
In deze zelfstudie wil ik graag onderzoeken hoe u een eenvoudig zoekformulier kunt verfraaien. We zullen niets geks doen, maar in plaats daarvan vier verschillende takes onderzoeken over hoe je een zoekopdracht kunt verfraaien met behulp van CSS-overgangen.
Als je een kant-en-klare oplossing wilt, kun je een aantal geweldige CSS-overgangen vinden op Envato Market waarmee je snel en eenvoudig verschillende effecten kunt creëren. Of u kunt een ontwikkelaar inhuren bij Envato Studio.
In uw HTML-bestand moet u een zoekinvoer maken om aan de slag te gaan. Als u de onderstaande code bekijkt, ziet u vier verschillende dingen: .doos div, a .houder-1 div, an .icoon, en de zoekinput zelf.
Alle vier de voorbeelden hebben een zoekvak - uiteraard - evenals een opzoekklassepictogram. Elk van de vier voorbeelden wordt gehuisvest in een container zodat we de zoekinvoer onafhankelijk kunnen manipuleren. Ten slotte is de box div verantwoordelijk voor het gecentreerd houden van de container.
Font Awesome is een pictogrammenbibliotheek. U kunt meer over het project te weten komen op de eigen website van Font Awesome.
Het bovenstaande codefragment is een voorbeeld van hoe u het pictogram kunt opnemen binnen uw markup. Als u echter wilt dat het pictogram wordt weergegeven, moet u ook een link naar de Font Awesome-bibliotheek opnemen, die wordt gedemonstreerd in het onderstaande fragment. Neem deze link op in uw documentkop.
We gaan nu enkele stijlen toevoegen in een afzonderlijke stylesheet (die u ook moet koppelen vanuit de documentkop).
body background: # 343d46; .box margin: 100px auto; breedte: 300 px; hoogte: 50px;
In het bovenstaande CSS-fragment voegen we wat basisstyling toe aan de pagina. De stijl van de zoekvakken is marine gekleurd, zodat de achtergrond van het lichaam niet wit mag zijn. De doosklasse wordt ook gecentreerd in de pagina omwille van de zelfstudie.
In deze zelfstudie leert u hoe u de zoekvakken verfraait. In dit eerste voorbeeld leg ik uit wat er aan de hand is in meer detail; Ik wil ervoor zorgen dat je precies weet wat er aan de hand is. In de resterende drie voorbeelden laat ik je eenvoudig zien hoe je de verschillende overgangen kunt bereiken.
Het eerste voorbeeld dat we gaan aanpakken, is het wijzigen van de achtergrond van de zoekinvoer bij zweven. We voegen ook een overgang toe zodat de wijziging niet schokkend is.
U hebt de HTML al gezien voor de standaardmarkup. Dit fragment is vergelijkbaar voor alle voorbeelden.
Om de styling te starten, moeten we de CSS-stijl van het zoekvak zelf definiëren. Laten we alle verschillende CSS-regels één voor één toevoegen, zodat u precies weet wat er aan de hand is.
.container-1 width: 300px; vertical-align: middle; white-space: nowrap; positie: relatief;
Eerst willen we de containerklasse opmaken. De belangrijkste eigenschap is aantoonbaar positie: relatief. Dit is speciaal ingesteld zodat het pictogram bovenop de invoer kan worden geplaatst, zoals u binnenkort zult zien.
.container-1 invoer # zoeken width: 300px; hoogte: 50px; achtergrond: # 2b303b; rand: geen; lettergrootte: 10pt; zweven: links; kleur: # 63717f; padding-links: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px;
Vervolgens willen we de feitelijke invoer stijlen. Alles hierboven is puur esthetisch, omdat de randradius of achtergrondkleur geen effect hebben op de werking van de invoer. Maak een notitie van de eigenschap left padding. Het is daar om ruimte te maken voor het pictogram, zodat het niet letterlijk boven de tekst in de invoer staat.
Hieronder hebben we vier verschillende regels die de tekst van de tijdelijke aanduiding kleuren, zoals in ons voorbeeld Zoeken. De regels moeten helaas gescheiden zijn voor de individuele leveranciersvoorvoegsels en kunnen niet worden geconsolideerd in een stenografische geschreven regel. Het is een beetje vervelend en je ziet dit in elk voorbeeld herhaald worden!
.container-1 input # search :: - webkit-input-placeholder color: # 65737e; .container-1 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-1 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-1 input # search: -ms-input-placeholder color: # 65737e;
Ten slotte zullen we het pictogram stylen. Het belangrijkste is dat we zijn positie bepalen om bovenop de invoer te worden geplaatst door zijn positie: absoluut. Marges helpen bij het positioneren van het pictogram naast het instellen van de bovenste positie ervan 50%.
.container-1 .icon positie: absoluut; top: 50%; marge links: 17px; margin-top: 17px; z-index: 1; kleur: # 4f5b66;
De volgende reeks regels die we moeten maken, is wat er gebeurt met het zoekvak tijdens de zweeftekst. In dit voorbeeld willen we alleen de achtergrondkleur wijzigen. Om van de gele of blauwe gloed rond de invoer af te komen (die browsers soms toevoegen) ingesteld overzicht: geen.
.container-1 invoer # search: hover, .container-1 input # search: focus, .container-1 input # search: active outline: none; achtergrond: #ffffff;
Zoals u in het bovenstaande fragment ziet, hebben we twee extra statussen toegevoegd - focus en actief. Op deze manier verdwijnt het effect niet wanneer u stopt met zweven op de invoer. Wat nog belangrijker is, is dat het effect ook prominent is wanneer de invoer in gebruik is.
Om de overgang te laten plaatsvinden, moeten we een paar regels code toevoegen. Keer helemaal terug naar de regel waar we de stijl van de invoer hebben gedefinieerd - .container-1 invoer # zoeken. Voeg de volgende fragmenten vóór de afsluitende haakjes toe:
-webkit-overgang: achtergrond .55s gemak; -moz-overgang: achtergrond .55s gemak; -ms-overgang: gemak van de achtergrond .55s; -o-overgang: achtergrond .55s gemak; overgang: gemak van de achtergrond .55s;
We definiëren de overgangseigenschap-stenografie, maar we zouden in plaats daarvan die drie parameters afzonderlijk kunnen definiëren. Ten eerste zeggen we dat de overgang alleen van invloed zou moeten zijn op de achtergrondeigenschap. Vervolgens zeggen we dat de overgang iets meer dan een halve seconde zou duren. Ten slotte definiëren we het overgangseffect om te versoepelen. De gemak is niet het enige effect dat hier zou werken, we hadden het ook kunnen gebruiken lineair of gemak-in, bijvoorbeeld. Het zou er gewoon een beetje anders uitzien. Probeer het zelf uit om te zien of je ze beter vindt.
De invoerstijl moet er nu uitzien als de onderstaande code.
.container-1 invoer # zoeken width: 300px; hoogte: 50px; achtergrond: # 2b303b; rand: geen; lettergrootte: 10pt; zweven: links; kleur: # 262626; padding-links: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px; -webkit-overgang: achtergrond .55s gemak; -moz-overgang: achtergrond .55s gemak; -ms-overgang: gemak van de achtergrond .55s; -o-overgang: achtergrond .55s gemak; overgang: gemak van de achtergrond .55s;
Als je niets weet over CSS-overgangen, wil ik je een kort overzicht geven. Ten eerste moet de eigenschap voor de overgang naar het werk worden gedefinieerd in de standaardstatus en niet in de zweeftekst, of in actieve of focus.
CSS-overgangen maken een geleidelijk veranderend effect mogelijk en u kunt specifieke parameters definiëren om te bepalen, zoals welke eigenschap wordt beïnvloed, de duur van de overgang en het soort overgang. U kunt meerdere overgangen instellen voor één element. Maar belangrijker nog, u moet altijd voorvoegsels van leveranciers opnemen om tegemoet te komen aan de verschillende browsers, omdat de ondersteuning voor deze eigenschap nog niet universeel is.
Kijk voor meer informatie op: CSS3 Transitions And Transforms From Scratch
In dit voorbeeld begint het zoeken als alleen het pictogram met het zoekglas. Wanneer u de muisaanwijzer op het pictogram plaatst, wordt de zoekopdracht uitgebreid en kunt u vervolgens uw zoekopdracht typen. Het grootste deel van de code in dit voorbeeld zal sterk lijken op het vorige voorbeeld.
.container-2 width: 300px; vertical-align: middle; white-space: nowrap; positie: relatief;
De invoerstijl voor deze overgang is anders. De invoer is aanzienlijk kleiner, zodat het pictogram achter een vierkant kan lijken. Alle overblijvende eigenschappen, zoals de achtergrond of de letterkleur, zijn hetzelfde omdat we de stijl van de zoekopdracht niet volledig willen wijzigen.
.container-2 invoer # zoeken width: 50px; hoogte: 50px; achtergrond: # 2b303b; rand: geen; lettergrootte: 10pt; zweven: links; kleur: # 262626; padding-links: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px; kleur: #fff; -webkit-overgang: breedte 0,55 gemakkelijk; -moz-overgang: breedte 0,55 gemakkelijk; -ms-overgang: breedte 0,55s gemak; -o-overgang: breedte 0,55 gemak; overgang: breedte 0,55 gemak;
Zoals je ook kunt zien, heb ik de overgangseigenschap opnieuw gedefinieerd om alleen de breedte te beïnvloeden. Ik heb de tijd hetzelfde gehouden omdat het snel genoeg is om gebruikers niet te irriteren, maar lang genoeg om een leuk effect te creëren.
Hieronder staat de code voor het opnieuw inkleuren van de tekst van de tijdelijke aanduiding.
.container-2 invoer # zoeken :: - webkit-invoer-plaatshouder kleur: # 65737e; .container-2 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-2 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-2 input # search: -ms-input-placeholder color: # 65737e;
En wederom hebben we de pictogram CSS-stijl. Het moet hetzelfde zijn als in het vorige voorbeeld.
.container-2 .icon positie: absoluut; top: 50%; marge links: 17px; margin-top: 17px; z-index: 1; kleur: # 4f5b66;
Het allerlaatste wat we moeten doen, is bepalen hoe de zoekopdracht eruit zal zien als deze wordt overgeheveld. In het onderstaande fragment zorgt de eerste regel ervoor dat het formulier niet de browser-geïnduceerde gloed heeft en dat wanneer u de invoer gebruikt - wanneer u het invoert - het zoekvak nog steeds wordt uitgebreid. De middelste regel breidt de invoer met de zweeftekst gewoon uit tot de volledige breedte.
.container-2 invoer # zoeken: focus, .container-2 invoer # zoeken: actief overzicht: geen; breedte: 300 px; .container-2: hover input # search width: 300px; .container-2: hover .icon color: # 93a2ad;
Het allerlaatste dat in de bovenstaande code gebeurt, is dat bij zweven het pictogram van kleur verandert. Het is slechts een klein detail om snel een gebruiker te laten zien dat het zoekvak actief is en werkt, in plaats van een inactieve invoer. De wijziging wordt niet geïmplementeerd door een overgang.
Van alle vier de voorbeelden is deze het meest subtiele, zowel qua code als qua visueel effect. In dit geval zal het pictogram voor een vergrootglas iets omhoogkomen en groter worden.
Nogmaals, de HTML-opmaak van het pictogram en het zoekvak is hetzelfde als in de vorige twee voorbeelden. De uitzondering is natuurlijk de .houder-3.
De CSS voor dit voorbeeld is niets bijzonders. Het begint voor het grootste deel erg op de eerste voorbeelden waarbij de standaardstatus helemaal niet anders is. Hieronder staat de code voor de container en de invoer. Merk op dat er deze keer geen overgang op de invoer is.
.container-3 width: 300px; vertical-align: middle; white-space: nowrap; positie: relatief; .container-3 input # search width: 300px; hoogte: 50px; achtergrond: # 2b303b; rand: geen; lettergrootte: 10pt; zweven: links; kleur: # 262626; padding-links: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px; kleur: #fff;
We hebben opnieuw de regels voor placeholder.
.container-3 invoer # zoeken :: - webkit-invoer-plaatshouder kleur: # 65737e; .container-3 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-3 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-3 input # search: -ms-input-placeholder color: # 65737e;
Nu lijkt het erop dat het pictogram voor dit voorbeeld ook hetzelfde is. Het is dezelfde kleur, dezelfde positie enzovoort. Ik heb er echter een overgang naar toegevoegd. Deze overgangen zijn gericht op alle eigenschappen, wat een kortere benadering is in plaats van ze individueel uit te spellen.
.container-3 .icon positie: absoluut; top: 50%; marge links: 17px; margin-top: 17px; z-index: 1; kleur: # 4f5b66; -webkit-overgang: alle .55s gemak; -moz-overgang: alle .55s gemak; -ms-overgang: alle .55s gemak; -o-overgang: alle .55s gemak; overgang: alle .55s gemak;
.container-3 invoer # zoeken: focus, .container-3 invoer # zoeken: actief overzicht: geen; .container-3: hover .icon margin-top: 16px; kleur: # 93a2ad; -webkit-transformatie: schaal (1,5); / * Safari en Chrome * / -moz-transform: schaal (1.5); / * Firefox * / -ms-transform: schaal (1.5); / * IE 9 * / -o-transform: schaal (1,5); / * Opera * / transform: schaal (1.5);
Er zijn een aantal dingen aan de hand in de bovenstaande code. Ten eerste, we veranderen de kleur van het pictogram bij zweven en verplaatsen het een beetje hoger, zodat het verticaal gecentreerd is als het groter is. Ten tweede voegen we een transformatie toe aan het pictogramelement bij zweven zodat het in feite 1,5 keer de oorspronkelijke grootte heeft. Omdat de eerder gedefinieerde overgang op impact is ingesteld allemaal eigenschappen, het lijkt alsof het pictogram in hover toeneemt.
Nogmaals, bekijk CSS3 Transitions And Transforms From Scratch voor meer informatie over de transformatie-eigenschap.
In tegenstelling tot de laatste drie voorbeelden, zal deze complexer zijn. Als je zweeft, wordt er een knop bovenop de invoer geplaatst om je verder te laten gaan - een beetje zoals Sturen of Gaan. De knop heeft het pictogram van een vergrootglas erin.
Hier is de HTML een beetje anders. De invoer is er natuurlijk nog steeds, maar het pictogram bevindt zich nu in een knopelement dat achter de invoer staat. Het is belangrijk dat de knop achter de invoer aankomt, omdat deze betrekking heeft op hoe het zweefeffect in CSS wordt gemaakt.
De CSS in dit voorbeeld is anders, dus let op! Hieronder staat het fragment voor het stylen van de container. Eerste, positie: relatief ontbreekt; het is niet langer belangrijk omdat het pictogram er niet van afhankelijk is om bovenop de invoer te worden geplaatst. We hebben echter wel overloop verborgen. Hierdoor blijft de knop niet verschijnen als deze niet zweeft. Technisch gezien is de knop die verschijnt rechts van de invoer, maar dankzij overloop verborgen het laat niet zien wanneer het buiten de breedte van de container valt - de container en de invoer hebben dezelfde breedte.
.container-4 overloop: verborgen; breedte: 300 px; vertical-align: middle; white-space: nowrap;
Onder de invoer is de overgang niet aanwezig omdat dit element niet het element is dat deze keer wordt beïnvloed.
.container-4 invoer # zoeken width: 300px; hoogte: 50px; achtergrond: # 2b303b; rand: geen; lettergrootte: 10pt; zweven: links; kleur: #fff; padding-links: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; grensradius: 5px;
Het fragment om de tijdelijke aanduidingen opnieuw in te kleuren is de volgende.
.container-4 input # search :: - webkit-input-placeholder color: # 65737e; .container-4 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-4 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-4 input # search: -ms-input-placeholder color: # 65737e;
Hieronder staat de code om de knop te modelleren die wordt weergegeven bij zweven. De truc om hem vanaf de zijkant naar binnen te laten schuiven, is door hem direct achter de invoer te plaatsen en hem onzichtbaar te maken, tenzij hij zweeft. De knop is het element dat verandert - het beweegt - daarom is het het element waar de overgang is gedefinieerd. Om het eenvoudiger te maken, heb ik de overgang naar alle eigendommen geïdentificeerd.
.container-4 button.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; rand: geen; achtergrond: # 232833; hoogte: 50px; breedte: 50px; kleur: # 4f5b66; dekking: 0; lettergrootte: 10pt; -webkit-overgang: alle .55s gemak; -moz-overgang: alle .55s gemak; -ms-overgang: alle .55s gemak; -o-overgang: alle .55s gemak; overgang: alle .55s gemak;
Om de knop te laten vervagen, moet deze bovenop de invoer worden verplaatst. Dat gebeurt via de negatieve marge. Eerder hebben we de dekking van de knop ingesteld op 0 dus we moeten het opnieuw instellen 1 zodat de knop ook zichtbaar kan zijn.
De laatste regel verandert alleen de achtergrond van de knop als u de muisaanwijzer over de knop beweegt. Het is goed om een gebruiker te laten weten dat de knop actief is en dat u erop kunt klikken om de zoekopdracht in te dienen; het heeft geen zin om een knop te hebben als deze inactief lijkt.
.container-4: hover button.icon, .container-4: active button.icon, .container-4: focus button.icon outline: none; dekking: 1; margin-left: -50px; .container-4: hover button.icon: hover background: white;
Welnu, dat brengt ons tot het einde van onze CSS-experimenten! We hebben een basisinvoerformulier ingevoerd en een klein aantal effecten gebruikt om het gedrag te veranderen. Hoe zou je anders voorstellen om een zoekinput als deze te veranderen? Op welke andere aspecten zou je CSS-overgangen of transformaties toepassen? Laat het ons weten in de comments!
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
Accentsconagua