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.

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.

advitum

ÜBER DEN AUTOR
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.

So sieht das Suchfeld ohne CSS 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.

Links zum Thema

32 Kommentare

  1. Malte
    12. Januar 2011 um 20:27 Uhr

    Schö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 Uhr

      Stimmt, 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.

  2. Stadtpirat
    12. Januar 2011 um 21:45 Uhr

    „Comic Sans MS“? Warum?!

    • Lars Ebert
      13. Januar 2011 um 07:28 Uhr

      Mir 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.

  3. andi
    12. Januar 2011 um 21:53 Uhr

    ist echt hübsch geworden das teil, aber warum muss es unbedingt comic sans sein??

  4. Robin
    12. Januar 2011 um 22:16 Uhr

    Ja 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 Uhr

      Was 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.

  5. Malte
    12. Januar 2011 um 22:17 Uhr

    Die Idee kam nur mir spontan beim Lesen deines Artikels in den Kopf. Deswegen schrieb ich ja „theoretisch“ 😉

    Beste Grüße
    Malte

  6. KMB
    12. Januar 2011 um 22:52 Uhr

    Zukunftsorientierter 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 Uhr

      Du 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.

  7. equal
    12. Januar 2011 um 22:55 Uhr

    Naja, 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 Uhr

      Ich 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.

  8. 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 Uhr

      Immer wieder eine gute Adresse zum Thema CSS3. Danke

  9. Mario
    13. Januar 2011 um 09:29 Uhr

    Ich 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 Uhr

      Stimmt, 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.

  10. Stefan Milke
    13. Januar 2011 um 10:03 Uhr

    Das Ergebnis sieht aber so richtig scheisse aus…

  11. narzissm
    13. Januar 2011 um 11:15 Uhr

    Mich 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 Uhr

      Außerdem sind Dinge wie runde Ecken ja nicht tragisch, wenn sie fehlen.

  12. Roman
    14. Januar 2011 um 13:42 Uhr

    Wie 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.

  13. Saeed
    29. März 2011 um 22:25 Uhr

    Hallo,
    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!

  14. Sascha K.
    24. April 2011 um 11:01 Uhr

    Hey 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.

  15. Torsten
    2. Mai 2011 um 17:10 Uhr

    Ich bin auch schon gespannt, wie lange es noch dauert, bis der CSS 3 Standard zum Alltag wird!

  16. Mark
    25. Juni 2011 um 07:38 Uhr

    Ein klasse Tutorial! Ich werde aber ersteinmal abwarten bis sich css3 als Standard etabliert hat.

  17. coach handbags outlet
    14. Juli 2011 um 05:35 Uhr

    Wieder einmal kann ich nur bewundern, wie schön die Web-Welt doch mit CSS3 geworden ist.

  18. Ralph
    6. August 2011 um 13:22 Uhr

    Sehr liebevoll gestalteter Beitrag!
    Genau den Impuls, den ich für meinen Blog brauche.
    Besten DANK!

  19. Yves
    16. Januar 2013 um 15:45 Uhr

    Weiss 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.

Trackbacks/Pingbacks