CSS3-Suchfeld – Verläufe und runde Ecken
CSS3 ermöglicht viele interessante Effekte. Wie man ein Suchfeld mit Farbverläufen und runden Ecken fast ohne Grafiken erstellt, zeigt dieser Beitrag.
Es ist nicht lange her, da habe ich für ein Suchfeld eine riesige Grafik erstellt und dann mit CSS das Suchfeld und den Submit-Button über die Grafik gelegt – alles sehr kompliziert.
Es ist nicht lange her, da habe ich für ein Suchfeld eine riesige Grafik erstellt und dann mit CSS das Suchfeld und den Submit-Button über die Grafik gelegt – alles sehr kompliziert.Wieder einmal kann ich nur bewundern, wie schön die Web-Welt doch mit CSS3 geworden ist. Für das gleiche Suchfeld reichen jetzt ein paar Zeilen CSS und ein kleines Icon.
Dieser Beitrag erklärt euch Schritt für Schritt, wie man mit Hilfe von CSS3 ein schickes Suchfeld erstellen kann.
Autor dieses Gastbeitrages ist Lars Ebert. Er ist ein junger Webdesigner & Programmierer aus Iserlohn und bloggt auf Advitum.de über CSS, PHP und Co.
Grundlage
Als Erstes erstelle ich das Formular selbst. Dafür reichen vier Zeilen HTML.
[html]
<form>
<input type="text" value="Suche" />
<input type="submit" value="" />
</form>
[/html]
Das Formular soll im späteren Design rechts oben zu sehen sein, losgelöst von allem Seiteninhalt. Deshalb bekommt es zuerst folgenden CSS-Code:
[css]
form
{
position: absolute;
top: 50px;
right: 60px;
}
[/css]
CSS3-Gradients – Farbverläufe als Hintergrund
Bisher sieht das Formular noch ziemlich langweilig aus.
Dies wird sich jetzt aber ändern. Als Erstes geben wir dem Formular einen Farbverlauf. Da einige CSS3-Eigenschaften ziemlich schwer zu merken sind, benutze ich dafür den CSS3 Gradient Generator von Damian Galarza. Hier stellt man einfach nur alles ein, was man braucht und kann sich bequem den CSS-Code kopieren.
Hier sind meine Einstellungen:
Jetzt hat also unser Formular schon etwas mehr CSS-Code:
[css]
form
{
position: absolute;
top: 50px;
right: 60px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(87,87,87)),
color-stop(0.51, rgb(71,71,71))
);
background: -moz-linear-gradient(
center top,
rgb(87,87,87) 49%,
rgb(71,71,71) 51%
);
}
[/css]
Auch das Eingabefeld soll nun einen Farbverlauf bekommen. Die Einstellungen im Gradient-Generator bleiben die Selben, nur die beiden Farben ändern sich:
So bekommt das Eingabefeld folgenden Code:
[css]
input[type=text]
{
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(163,162,163)),
color-stop(0.51, rgb(149,149,151))
);
background: -moz-linear-gradient(
center top,
rgb(163,162,163) 49%,
rgb(149,149,151) 51%
);
}
[/css]
Kurzer Zwischenstand:
Okay, besonders toll sieht das Formular immer noch nicht aus, aber es fehlt ja auch noch Einiges!
Ein attraktiver Button
Als Nächstes habe ich mit Photoshop das Icon erstellt. Ihr könnt es euch gerne downloaden und selber verwenden!
Um das Icon als Submit-Button zu verwenden, benutze ich folgenden CSS-Code :
[css]
input[type=submit]
{
border: 0px;
width: 18px;
height: 18px;
margin: 0px;
background: transparent;
background-image: url(search8.png);
background-repeat: none;
cursor: pointer;
}
[/css]
Darf’s ein wenig Abstand sein?
Um dem Formular ein wenig mehr Form zu geben, habe ich noch ein wenig Padding hinzugefügt:
[css highlight=”20″]
form
{
position: absolute;
top: 50px;
right: 60px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(87,87,87)),
color-stop(0.51, rgb(71,71,71))
);
background: -moz-linear-gradient(
center top,
rgb(87,87,87) 49%,
rgb(71,71,71) 51%
);
padding: 2px 8px;
}
[/css]
Auch das Eingabefeld bekommt ein wenig Padding:
[css highlight=”16″]
input[type=text]
{
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(163,162,163)),
color-stop(0.51, rgb(149,149,151))
);
background: -moz-linear-gradient(
center top,
rgb(163,162,163) 49%,
rgb(149,149,151) 51%
);
padding: 0px 5px;
}
[/css]
Langsam lässt sich erahnen, wo das hinführt…
Schrift im Suchfeld
Die schwarze Schrift auf dem dunklen Hintergrund im Suchfeld ist schwer zu lesen, deshalb verpassen wir dem Suchfeld eine neue Schriftfarbe und Schriftart:
[css highlight=”18,19,20″]
input[type=text]
{
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(163,162,163)),
color-stop(0.51, rgb(149,149,151))
);
background: -moz-linear-gradient(
center top,
rgb(163,162,163) 49%,
rgb(149,149,151) 51%
);
padding: 0px 5px;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #ffffff;
}
[/css]
Ein Rahmen und runde Ecken
Als Letztes muss nur noch der Rahmen angepasst werden. Hier kommen auch die runden Ecken, die wohl beliebteste CSS3-Eigenschaft, ins Spiel.
Zuerst für das Formular:
[css highlight=”22,23″]
form
{
position: absolute;
top: 50px;
right: 60px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(87,87,87)),
color-stop(0.51, rgb(71,71,71))
);
background: -moz-linear-gradient(
center top,
rgb(87,87,87) 49%,
rgb(71,71,71) 51%
);
padding: 2px 8px;
border: 1px solid #8a8e8d;
-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
[/css]
Und dann für das Textfeld. Dieses bekommt zusätzlich noch eine Höhe von 16 Pixeln:
[css highlight=”17,18,24,25″]
input[type=text]
{
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.49, rgb(163,162,163)),
color-stop(0.51, rgb(149,149,151))
);
background: -moz-linear-gradient(
center top,
rgb(163,162,163) 49%,
rgb(149,149,151) 51%
);
padding: 0px 5px;
width: 168px;
height: 16px;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #ffffff;
border: 1px solid #bebebe;
-moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;
}
[/css]
Und so sieht unser Endresultat aus:
Résumé
Nun kurz eine abschließende Betrachtung: Vor einigen Jahren habe ich genau dieses Suchfeld mit einer Grafik, die ich hinter ein transparentes Formular geschoben habe, realisiert, was wirklich ziemlich kompliziert und nicht zu empfehlen ist. Vor CSS3 hätte man für dieses Suchfeld drei Grafiken gebraucht: eine für den Verlauf im Hintergrund, eine für den Verlauf im Vordergrund und eine für den Submit-Button. Wenn man die runden Ecken bedenkt, wären es wahrscheinlich noch mehr geworden.
Aber seit CSS3 braucht man für dieses Formular nur noch eine Grafik und ein klein wenig CSS-Code. Ist die Welt nicht schön?
Was sagt ihr?
Diesmal möchte ich insbesondere eure Meinung zum Thema CSS3-Gradients wissen. Ich arbeite noch nicht lange mit dem CSS3 Gradient Generator von Damian Galarza. Wie arbeitet ihr an dieser Stelle? Gibt es einen (eurer Meinung nach) besseren Generator für Farbverläufe?
Aber natürlich könnt ihr in den Kommentaren auch gerne andere Themen ansprechen. Ich hoffe, euch hat dieses CSS3-Tutorial gefallen.
Malte
12. Januar 2011 um 20:27 UhrSchöner Artikel!
Theoretisch könnte man sich sogar die letzte Grafik noch sparen, indem einen Symbol-Webfont verwendet…
gruß malte
Lars Ebert
12. Januar 2011 um 20:51 UhrStimmt, aber ich hielt eine Grafik hier für angebracht, weil ja der Pfeil selbst transparent und der weiße Kreis farbig sein sollte. Ansonsten hast du natürlich Recht.
Stadtpirat
12. Januar 2011 um 21:45 Uhr“Comic Sans MS”? Warum?!
Lars Ebert
13. Januar 2011 um 07:28 UhrMir ist bewusst, dass die Verwendung von Comic Sans MS von vielen als ein Verbrechen angesehen wird. Aber ich bin der Meinung, dass auch Comic Sans MS sinnvoll verwendet wird.
Ich streue gerne mal kleine Details ein, und Comic Sans MS benutze ich auch gerne, aber in Maßen! Keine Sorge, ich benutze es in diesem Fall nur für das Suchfeld, der Rest der Seite benutzt eine etwas seriösere Schriftart.
andi
12. Januar 2011 um 21:53 Uhrist echt hübsch geworden das teil, aber warum muss es unbedingt comic sans sein??
Robin
12. Januar 2011 um 22:16 UhrJa mit CSS3 wurde wirklich vieles einfacher und man kann wirklich mehr aus seinen Designs rausholen.
Dein “Tutorial” ist nett und das Endresultat ist in Ordnung. Natürlich könnte man das ganz noch ein wenig ausschmücken, aber dafür das alles mit CSS gemacht wird, klasse!
Lars Ebert
13. Januar 2011 um 07:34 UhrWas würdest du denn noch verbessern? Ich möchte ja gerne wissen, was ich in meinem nächsten Artikel anders machen soll, für Kritik bin ich immer offen.
Malte
12. Januar 2011 um 22:17 UhrDie Idee kam nur mir spontan beim Lesen deines Artikels in den Kopf. Deswegen schrieb ich ja “theoretisch” 😉
Beste Grüße
Malte
KMB
12. Januar 2011 um 22:52 UhrZukunftsorientierter sollte die Verwendung des “Search”-Input-Typs sein. Nähere Informationen dazu zB bei Dive into HTML5. Das ist zwar etwas störrischer was das Sytling betrifft, hat aber einige andere Vorteile. Letztlich auch den, das die Design-Sturheit abgestellt werden kann, wobei ich noch nicht so recht weiß in wieweit sich das mit den anderen Fähigkeiten des neuen Input-Typs verträgt.
Lars Ebert
13. Januar 2011 um 07:33 UhrDu hast völlig Recht, type=”search” wäre hier die bessere Wahl. Aber mir ging es hauptsächlich darum, zu zeigen, was mit Verläufen und runden Ecken möglich ist, und das CSS3 viele Grafiken überflüssig macht.
Natürlich sollte man neuere Standarts verwenden, und der von dir verlinkte Artikel ist sehr lesenswert. Danke für deine Anmerkung.
equal
12. Januar 2011 um 22:55 UhrNaja, man muss aber auch dazu sagen das der Verlauf im Opera nicht funktioniert das dies leider nicht supported wird.
Lars Ebert
13. Januar 2011 um 07:24 UhrIch weiß, aber ich bin der Meinung, dass wir nicht auf den Tag warten sollten, bis alles von allen Browsern unterstützt wird. Ich habe mich dazu entschlossen, CSS3 zu verwenden, wo es geht.
Um aber einen Fallback für Opera etc. zu haben, könnte man einfach vor jedem Gradient eine normale Hintergrundfarbe definieren. Browser, die Gradients kennen, überschreiben dann diese Hintergrundfarbe, alle anderen zeigen nur eine Farbfläche an.
Webstandard-Blog (Heiko)
13. Januar 2011 um 09:13 Uhr@equal: Auch wenn Opera noch kein direkten Weg zur Abbildung eines Farbverlaufes anbietet, bietet es dennoch wie in folgendem Linear Gradient Artikel (ganz am Ende – “Opera – Linear Gradient dank SVG”) beschrieben, eine Möglichkeit zur Umsetzung dieser Eigenschaft.
Norbert
12. Februar 2012 um 13:26 UhrImmer wieder eine gute Adresse zum Thema CSS3. Danke
Mario
13. Januar 2011 um 09:29 UhrIch benutze auch den gleichen Gradient Generator. Finde ihn recht praktisch, nur eine Fallback Methode könnte im Code gleich noch mit drin sein 🙂
Lars Ebert
13. Januar 2011 um 18:24 UhrStimmt, das wäre schön. Aber du musst ja einfach nur vorher eine Hintergrundfarbe definieren, die dient dann als Fallback.
Es wäre aber wirklich schöner, wenn der Generator dies automatisch mit einbringen würde.
Stefan Milke
13. Januar 2011 um 10:03 UhrDas Ergebnis sieht aber so richtig scheisse aus…
narzissm
13. Januar 2011 um 11:15 UhrMich würde mal generell interessieren inwieweit aktuelles (oder auch ältere) Browser den Standard unterstützen.
Markus
13. Januar 2011 um 16:51 UhrÄltere Browser kannst du praktisch vergessen, selbst der IE8 kann noch kein CSS3.
Durch -moz-border-radius und -webkit-border-radius sollten allerdings die abgerundeten Ecken auch in etwas älteren Geckos (Firefox, Netscape) und Safari, Chrome und dem Konqueror wie gewünscht dargestellt werden.
Lars Ebert
13. Januar 2011 um 18:25 UhrAußerdem sind Dinge wie runde Ecken ja nicht tragisch, wenn sie fehlen.
Roman
14. Januar 2011 um 13:42 UhrWie Malte schon zu erst gesagt hat man könnte sich die letzte Grafik auch noch sparen. Es ist wirklich betrachtlich was man mit den neuen Möglichkeiten die CSS3 bringt alles anstellen kann ohne Photoshop starten zu müssen. Schöner Beitrag.
Saeed
29. März 2011 um 22:25 UhrHallo,
ich muss sagen, mir hat dein Tut sehr gefallen.
Ich habe gerade mit dem Web-Design Studium angefangen und mich noch garnicht mit CSS3 aueinandergesetzt.
Mir hat er eine Vorstellung davon gegeben was möglich ist ohne Grafiken zu verwenden.
Danke hierfür!
Sascha K.
24. April 2011 um 11:01 UhrHey Lars,
tolles Tutorial, finde sehr toll, wie du auf das neue CSS3 (was leider noch nicht jeder verarbeiten kann) eingehst und dein wissen an andere weitergibst.
Ps.: Das PNG-Bild (search8.png) ist nichtmehr online 😉
Mit freundlichen Grüßen
Sascha K.
Torsten
2. Mai 2011 um 17:10 UhrIch bin auch schon gespannt, wie lange es noch dauert, bis der CSS 3 Standard zum Alltag wird!
Mark
25. Juni 2011 um 07:38 UhrEin klasse Tutorial! Ich werde aber ersteinmal abwarten bis sich css3 als Standard etabliert hat.
coach handbags outlet
14. Juli 2011 um 05:35 UhrWieder einmal kann ich nur bewundern, wie schön die Web-Welt doch mit CSS3 geworden ist.
Ralph
6. August 2011 um 13:22 UhrSehr liebevoll gestalteter Beitrag!
Genau den Impuls, den ich für meinen Blog brauche.
Besten DANK!
Yves
16. Januar 2013 um 15:45 UhrWeiss jemand wie man zwei oder drei Suchfelder macht und dann erst den Suchbutton? Quasi eine Auswahl treffen kann. Das Ganze sollte dann in ein CMS integriert werden?
Danke für Eure Hilfe.