blog.atwork.at

news and infos about microsoft, technology, cloud and more

Designed by Developer ist out

Heutzutage erwarten Anwender funktionelle und "schöne" Websites, Webforms und Tools. Auch wenn ein Entwickler eine App oder ein User-Interface mit "es funktioniert" als erledigt zur Seite legt… es gibt Hilfsmittel um ansprechende Webforms zu erstellen.

Neben dem großen Angebot an professionellen Website-Templates gibt es im Web viele kostenfreie HTML-Templates wie etwa Free-CSS.com und viele mehr. Auch für das Design von Websiteobjekten wie Textboxes, Buttons, Texteffekte und Co. stehen im Netz Hilfsmittel bereit.

Eine coole Sache zum Generieren von modernen Elementen für Webforms ist ein CSS Online Generator auf enjoycss.com. Auf der Website kann online ein HTML-Objekte entworfen werden. Dazu wird zunächst der HTML Objekttyp wie hier im Screenshot ausgewählt.

image6

Danach folgt ein Generator, mit welchen das HTML Objekt nach und nach weiter verändert werden kann. Am Ende spuckt der Generator das HTML-Element und das erforderlichen (Cross Browser) CSS Style aus. Am Beispiel einer Textbox wie in folgendem Screenshot kann der Anwender verschiedene Design-Werte anpassen.

image_thumb[6]

"Get the code" in der rechten oberen Ecke erzeugt dann das HTML Objekt und die erforderliche CSS Klasse. Hierbei ist nur zu beachten, dass die CSS-class meist .enjoy-css heißt – und im eigenen Projekt umbenannt werden sollte. Beim Anklicken eines Textobjekts kann der Code dann mit "Copy to clipboard" weiterverwendet werden.

image

Ein komplettes Beispiel sieht dann so aus:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <div>
        <input class="textbox" placeholder="hello world" />
        <input type="button" class="gobutton" value="Enjoy" />
    </div>
</body>
</html>

styles.css

.gobutton {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal "Trebuchet MS", Helvetica, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0199d9;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.textbox {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px;
  border: 1px solid #b7b7b7;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal "Trebuchet MS", Helvetica, sans-serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(252,252,252,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

Der Output des generierten CSS im Browser:

image_thumb[9]

Auch komplexere CSS Designs sind vordefiniert und können weiter angepasst werden, etwa ein Twitter-Button mit CSS.

image

Dazu werden ein Div-Objekt und die Google-Fonts verwendet, das sieht dann in HTML so aus:

<div class="button">twitter</div>
<link async href="http://fonts.googleapis.com/css?family=Open%20Sans" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css" />

…und die dazu generierten CSS-Classes für die verschiedenen Zustände wie Hover, active, etc.

image

Eine Optimierung wie Benennung, Auslagern von styles wie die Google-Fonts an eine zentrale Stelle usw. verstehen sich dann von selbst.

Es gibt viele solcher Hilfsmittel und Designs im Netz. Damit erhalten Designer und Developer Tools, mit denen sich ansprechende Websites erstellen lassen.

 

PS: Here´s an english version of that topic.

Loading