nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Een CSS3-zoekvak voor rocken maken

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

CSS3 is de volgende bladstijltaal van de nieuwe generatie. Het introduceert een heleboel nieuwe en opwindende functies zoals schaduwen, animaties, overgangen, grensradius enz. Hoewel de specificaties nog niet zijn afgerond, zijn veel browserfabrikanten al begonnen met het ondersteunen van veel van de nieuwe functies.

In deze zelfstudie zullen we enkele van deze functies verkennen, zoals text-shadow, box-shadows en overgangen om een ​​wankelend zoekveld te creëren.

De photoshop-versie van dit zoekveld is gemaakt door Alvin Thong en kan hier worden gedownload. Ik heb geprobeerd dit zoekveld opnieuw te maken met pure CSS3. Opgemerkt moet worden dat niet alle browsers CSS3-functies ondersteunen en om deze tutorial uit te proberen, moet u een van de moderne browsers gebruiken die CSS 3-functies ondersteunen.

Klaar? Laten we beginnen!

1. HTML5 Doctype

We beginnen met de HTML-opmaak. Het is heel eenvoudig, na de HTML5-doctype en de verklaring, we hebben een

met een ID genaamd #wrapper inside . Dit gebeurt eenvoudigweg om de breedte van het inhoudsvak te definiëren en uit te lijnen met het midden van de pagina.

Dit wordt gevolgd door een

met een ID genaamd #main . Deze ID bevat de stijlen die het grote witte vak rond het invoerveld en de zoekknop definiëren. Deze
heeft een
daarbinnen verklaard. Het formulier heeft het tekstinvoerveld en de knop s earch. Hier ziet u hoe de vorm eruitziet zonder dat er stijlen op worden toegepast:

Zo ziet de code eruit:

 CSS3 zoekveld 

CSS3 zoekveld

2. Het selectiekader maken

Om de grote doos rondom het formulier te maken, zullen we stijlen aan het formulier toevoegen

met de ID van #main . Uit de onderstaande code ziet u dat de doos een breedte van 400px en een hoogte van 50px heeft gekregen.

 #main {width: 400px; hoogte: 50px; achtergrond: # f2f2f2; opvulling: 6px 10px; rand: 1px vast # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } 

Het belangrijke stuk code hier is de grensradiusverklaring en de doosschaduwverklaring. Voor het maken van afgeronde hoeken hebben we de CSS3-grensradiusverklaring gebruikt, "-moz-" en "-webkit-" browser-voorvoegsels zijn gebruikt om ervoor te zorgen dat dit werkt in gekko en webkit-gebaseerde browsers. De box shadow-verklaringen kunnen een beetje verwarrend lijken, maar het is eigenlijk heel simpel.

 vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

Uitleg: Hier geeft het trefwoordinvoegsel aan of de schaduw zich in de doos bevindt. De eerste twee nullen geven de x-offset en de y-offset aan en de 3 px geeft de vervaging aan. De volgende is de kleurdeclaratie. Ik heb hier rgba-waarden gebruikt; rgba staat voor rood groen blauw en alpha (opacity). De 4 waarden binnen de haakjes geven dus de hoeveelheid rood, groen, blauw en de alpha (opaciteit) aan. U zult opmerken dat 5 sets schaduwverklaringen bij elkaar zijn geslagen. Dit kan gedaan worden door ze te scheiden met een komma. De eerste twee schaduwen definiëren het witte "binnengloed" -effect en de volgende daar geven de doos een solide / dikke aanblik.

Speel rond met deze waarden om te begrijpen hoe het werkt.

Voorbeeld

3. Styling van het invoerveld

Nu het vakje compleet is, gaan we verder met het stylen van het invoerveld.

 invoer [type = "tekst"] {float: links; breedte: 230 px; opvulling: 15px 5px 5px 5px; margin-top: 5px; marge links: 3px; rand: 1px vast # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; -moz-box-shadow: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; -webkit-vak-schaduw: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; vakschaduw: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; } 

De stijlen die zijn gedeclareerd voor het invoerveld zijn vrij gelijkaardig aan de stijlen die zijn gedeclareerd voor de grote box #main . We hebben dezelfde randradius (5px) gebruikt. Nogmaals, er zijn meerdere doosschaduwen neergeslagen.

 vakschaduw: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; 

Uitleg: U zult opmerken dat deze keer de schaduwwaas op 0 is gehouden om een ​​scherpe schaduw te verkrijgen en een verticale offset van 5px wordt gebruikt. In de opeenvolgende declaraties is de onscherpte op 0px gehouden, maar de kleur en de y-offset zijn gewijzigd. Nogmaals, speel rond met deze waarden om verschillende resultaten te verkrijgen.

Voorbeeld

4. Styling van de submit-knop

Laten we de zoekknop stijlen.

 input [type = "submit"]. solid {float: left; cursor: pointer; breedte: 130 px; opvulling: 8px 6px; marge links: 20 px; achtergrondkleur: # f8b838; kleur: rgba (134, 79, 11, 0, 8); text-transform: hoofdletters; lettertype: vet; rand: 1px vast # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; tekstschaduw: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: achtergrond 0, 2s gemak; } 

Afgezien van de kleuren, heeft de zoekknop meestal dezelfde stijlen als die van de buitenste doos. Soortgelijke grensradius en doosschaduwen zijn gebruikt op de knop. De nieuwe functie die is geïntroduceerd, is de text-shadow .

 tekstschaduw: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

Verklaring: In de text-shadow zijn de eerste drie numerieke waarden respectievelijk de x-offset, y-offset en de vervaging. De rgba-waarden geven de schaduwkleur aan. In de volgende reeks declaraties (gescheiden door een komma) krijgt de y-offset een waarde van -1. Dit wordt gedaan om de tekst een "innerlijke schaduw" -effect te geven. De status zweven / focus van de knop Verzenden heeft verschillende waarden voor achtergrondkleur en schaduwen.

Voorbeeld

"Actieve" status voor knop

De actieve status van de knop heeft iets meer wijzigingen. Hierin heb ik de knop een absolute positie en een 'top' waarde van 5px gegeven. Dit is gedaan om het een natuurlijker uiterlijk te geven, zodat het voelt dat de knop met 5 pixels naar beneden is gedrukt. Andere wijzigingen in de actieve status zijn die van achtergrondkleur en schaduwen. Merk op dat ik de y-offset van de schaduwen heb verminderd om het een 'ingedrukt' uiterlijk te geven. Hier is de code voor de actieve status van de verzendknop:

 input [type = "submit"]. solid: active {background: # f6a000; positie: relatief; top: 5px; rand: 1px vast # 702d00; -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

De complete (CSS) code

Hiermee is ons zoekveld voltooid. We hebben een flink aantal van de nieuwe CSS3-functies gebruikt. Hier is de volledige CSS en HTML van dit zoekveld.

 #main {width: 400px; hoogte: 50px; achtergrond: # f2f2f2; opvulling: 6px 10px; rand: 1px vast # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.8), inzet 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } invoer [type = "tekst"] {float: links; breedte: 230 px; opvulling: 15px 5px 5px 5px; margin-top: 5px; marge links: 3px; rand: 1px vast # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; -moz-box-shadow: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; -webkit-vak-schaduw: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; vakschaduw: inzet 0 5px 0 #ccc, inzet 0 6px 0 # 989898, inzet 0 13px 0 #dfdede; } input [type = "submit"]. solid {float: left; cursor: pointer; breedte: 130 px; opvulling: 8px 6px; marge links: 20 px; achtergrondkleur: # f8b838; kleur: rgba (134, 79, 11, 0, 8); text-transform: hoofdletters; lettertype: vet; rand: 1px vast # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; tekstschaduw: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-overgang: achtergrond 0, 2s gemak; } input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus {background: # ffd842; -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.9), inzet 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.9), inzet 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.9), inzet 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; } invoer [type = "submit"]. solid: active {background: # f6a000; positie: relatief; top: 5px; rand: 1px vast # 702d00; -moz-box-shadow: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-vak-schaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; vakschaduw: inzet 0 0 3px rgba (255, 255, 255, 0.6), inzet 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

Ik hoop dat je deze tutorial leuk vond. Voel je vrij om met deze functies te experimenteren en vergeet niet om je gedachten te delen.

Noot van de redacteur: dit bericht is geschreven door Bharani M voor Hongkiat.com. Bharani is een ontwerper / ontwikkelaar uit New Delhi, India.

20 dingen Het internet vermoord [Infographic]

20 dingen Het internet vermoord [Infographic]

Het internet is een grote game-wisselaar geweest. Het heeft de manier veranderd waarop we communiceren, de manier waarop we informatie delen, de manier waarop we onder de deken van anonimiteit handelen, onder andere. Het internet heeft ook geholpen om veel dingen te doden.Zoals deze infographic van Broadband altijd laat zien, was internet een seriemoordenaar met willekeurige doelen

(Technische en ontwerptips)

360 ° Virtual Reality verandert alles wat je weet over video's

360 ° Virtual Reality verandert alles wat je weet over video's

In de jaren 90 was VR (Virtual Reality) alleen bekend bij de elite gamers, maar na verloop van tijd werd het steeds meer toegankelijk voor de wereld buiten gaming. Vandaag kun je YouTubers, Facebookers, nieuwsmedia en supermarkten zien met een gemakkelijker bruikbare vorm van VR om meer doelgroepen aan te trekken: de panoramische 360 ​​° -video .Deze

(Technische en ontwerptips)