Een CSS3-zoekvak voor rocken maken
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 schaduw tekst, border-radius, box-schaduwen en overgangen om een rocking-zoekveld te maken.
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 ondersteunen CSS3-functies 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 #wikkel binnen . 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 Zo ziet de code eruit: Om de grote doos rond het formulier te maken, zullen we stijlen toevoegen aan de Het belangrijke stuk code hier is de Uitleg: Hier geeft het trefwoordveld 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 (dekking). De 4 waarden binnen de haakjes geven dus de hoeveelheid rood, groen, blauw en de alpha (dekking) 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 daarverklaringen geven de doos een solide / dikke aanblik. Speel rond met deze waarden om te begrijpen hoe het werkt. Nu het vak compleet is, gaan we verder met het stylen van het invoerveld. De stijlen die zijn gedeclareerd voor het invoerveld zijn vrij gelijkaardig aan de stijlen die zijn gedeclareerd voor de grote doos 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. Laten we de zoekknop stijlen. 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 Uitleg: In de 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: 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. 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. Opmerking van de uitgever: Dit bericht is geschreven door Bharani M voor Hongkiat.com. Bharani is een ontwerper / ontwikkelaar uit New Delhi, India.#hoofd. Deze ID bevat de stijlen die het grote witte vak rondom het invoerveld en de zoekknop definiëren. Deze daarbinnen verklaard. Het formulier heeft de tekstinvoerveld en de soortelefoon. Hier ziet u hoe de vorm eruitziet zonder dat er stijlen op worden toegepast: 
CSS3 zoekveld
2. Het selectiekader maken
#hoofd. 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;
border-radius verklaring en de box-shadow verklaring. 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;
Voorbeeld
3. Styling 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;
#hoofd. 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;
Voorbeeld
4. Styling van de submit-knop
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; text-shadow: 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;
schaduw tekst. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
schaduw tekst declaratie 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 te geven “innerlijke schaduw” effect. De status zweven / focus van de knop Verzenden heeft verschillende waarden voor achtergrondkleur en schaduwen. Voorbeeld
"Actieve" status voor knop
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
#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; text-shadow: 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; 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;
