{"id":74,"date":"2013-04-24T22:01:31","date_gmt":"2013-04-24T22:01:31","guid":{"rendered":"http:\/\/devblog.cssec.de\/?p=74"},"modified":"2019-02-09T19:54:34","modified_gmt":"2019-02-09T19:54:34","slug":"html-splash-ohne-bilder","status":"publish","type":"post","link":"https:\/\/www.cssec.de\/blog\/2013\/04\/24\/html-splash-ohne-bilder\/","title":{"rendered":"HTML-Splash ohne Bilder"},"content":{"rendered":"<p>In einem fr\u00fcheren Beitrag habe ich bereits die M\u00f6glichkeit aufgezeigt, einen \u201cWait-Splash\u201d auf einer Seite anzuzeigen w\u00e4hrend eine bestimmte Upload-Aktion durchgef\u00fchrt wird.<br \/>\nZur damaligen Zeit habe ich daf\u00fcr ein Fenster als Bild abgelegt und dieses eingeblendet.<\/p>\n<p>F\u00fcr ein neues Projekte habe ich mich wieder etwas mit HTML und CSS besch\u00e4ftigt und m\u00f6chte einen Weg zeigen, solch ein Splash ohne Einsatz von PNG\u2019s nur mit HTML und CSS3 zu erstellen.<br \/>\nDas ganze kann dann auf einem HTML5-kompatiblen Browser dargestellt werden.<\/p>\n<p>Der Splash wird erst mal ein \u201cnormales\u201d Div und bekommt die CSS-Klasse splash zugewiesen. Im Formular stelle ich einen Titel als H3-\u00dcberschrift und ein Please wait &#8211; Text dar :<\/p>\n<div class=\"splash\">\n<p>&nbsp;<\/p>\n<h3>Splash<\/h3>\n<p>&nbsp;<\/p>\n<p>Please wait &#8230;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-75\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/splash_1.png\" alt=\"\" width=\"285\" height=\"141\" \/><\/p>\n<p>Hm, sieht noch nicht allzu ber\u00fchmt aus. Als n\u00e4chstes definieren wir die 1 Klasse und passen auch noch die \u00dcberschrift etwas an. Der Splash bekommt eine Breite von 300px und eine H\u00f6he von 150px zugewiesen, einen Rahmen von 2px Gr\u00f6\u00dfe, und einen wei\u00dfen Hintergrund. Au\u00dferdem werden die Texte in dem Div zentriert.<br \/>\nDas Standard-Top-Padding der \u00dcberschrift wird auf 0 gesetzt, so dass die \u00dcberschrift ganz oben landet. Diese \u00dcberschrift ist sp\u00e4ter unser Dialog-Titel.<\/p>\n<pre lang=\"css\"><style>\r\n      .splash {\r\n          width: 300px;\r\n          height: 150px;\r\n          border: solid 2px black;\r\n          text-align: center;\r\n          display: block;\r\n      }\r\n\r\n     .splash h3 {\r\n         padding-top: 0px;\r\n         margin-top: 0px;\r\n      }\r\n  <\/style><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-76\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/splash_2-300x154.png\" alt=\"\" width=\"300\" height=\"154\" srcset=\"https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_2-300x154.png 300w, https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_2.png 312w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>OK, sieht zumindest schon mal wie ein Dialog aus. Abgerundet und mit Schatten wirkt das aber eigentlich noch sch\u00f6ner.<br \/>\nDazu nutzt man die CSS-Styles: box-shadow und border-radius.<br \/>\nDer box-shadow-Style wird durch 3-4 Werte definiert:<\/p>\n<p>1. Parameter: Versatz x<br \/>\n2. Parameter : Versatz y<br \/>\n3. Parameter (bei 4): Unsch\u00e4rfe in px<br \/>\n3. Parameter (bei 3) : Farbe in HTML-Schreibweise<br \/>\n4. Parameter (bei 4): Farbe in HTML-Schreibweise<\/p>\n<p>Der Border-Radius definiert, den Grad der Abrundung des Dialogs.<\/p>\n<p>Nach etwas herumprobieren, setzen wir den Border-Radius auf 10px und einen box-shadow mit Versatz 3,3 einer 5px gro\u00dfen Unsch\u00e4rfe und einer dunkelgrauen Farbe:<\/p>\n<pre lang=\"css\">     .splash {\r\n          width: 300px;\r\n          height: 150px;\r\n          border: solid 2px black;\r\n          text-align: center;\r\n          display: block;\r\n          border-radius: 10px;\r\n          box-shadow: 3px 3px 5px #444;\r\n      }\r\n<\/pre>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-77\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/splash_3-300x155.png\" alt=\"\" width=\"300\" height=\"155\" srcset=\"https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_3-300x155.png 300w, https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_3.png 314w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Wunderbar, sieht doch schon aus wie ein Dialog.<br \/>\nLast but not least soll der Dialog auch noch eine Titelleiste bekommen. Momentan steht da zwar Splash aber irgendwie fehlt die farbliche Markierung davon.<br \/>\nUm das elegant und ohne gro\u00dfe Bastelei zu erhalten, nutzen wir die neue CSS3-Eigenschaft, den Background auch als Verlauf darzustellen.<br \/>\nDa das m\u00f6glicherweise noch nicht alle Browser korrekt darstellen, wird das zur Sicherheit browserspezifisch implementiert.<\/p>\n<p>Zur Definition eines Verlaufes nutzt man die Eigenschaft: background-image: linear-gradient.<br \/>\nDa dies schwer zu erkl\u00e4ren ist, hier erst mal der Code.<\/p>\n<pre lang=\"css\">      .splash {\r\n          width: 300px;\r\n          height: 150px;\r\n          border: solid 2px black;\r\n          text-align: center;\r\n          display: block;\r\n          border-radius: 10px;\r\n          box-shadow: 3px 3px 5px #444;\r\n\t  background-image:-webkit-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);\r\n\t  background-image:-moz-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);\r\n\t  background-image:-o-linear-gradient(#AAA 0%,#666 26px, black 27px; #FFF 28px, #FFF 100%);\r\n\t  background-image:linear-gradient(#AAA 0%,#666 26px, black 27px, #FFF 28px, #FFF 100%);\r\n      }\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-78\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/splash_4-300x156.png\" alt=\"\" width=\"300\" height=\"156\" srcset=\"https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_4-300x156.png 300w, https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_4.png 315w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Der linear gradient ist im Endeffekt nichts anderes als eine Liste von Tupeln, mit der die entsprechenden Farb-Abschnitte definiert werden. Optional kann noch zu Beginn die Verlaufsrichtung angegeben werden, z.B. als Winkel gefolgt von deg. Standard ist ein vertikaler Verlauf. Jedes Tupel wird durch:<br \/>\nFarbe Position<br \/>\ndefiniert.Die Position kann dabei entweder prozentual oder absolut in px angegeben werden.<\/p>\n<p>Diesen Trick machen wird uns zu Nutze und einen Verlauf in der Gr\u00f6\u00dfe der Titelleiste zu erstellen, anschlie\u00dfend (bei Bedarf) eine Trennlinie zu erstellen und den eigentlichen Bereich dann in wei\u00df darzustellen.<\/p>\n<p>F\u00fcr den Dialog erstellen wir eine 26px hohe Titelleiste. Ein 1px gro\u00dfer Trenner hebt die Titelleiste noch hervor. Der Rest des Dialogs wird dann mit wei\u00df gef\u00fcllt.<\/p>\n<p>Das sch\u00f6ne an der gradient-Methode ist dabei :<\/p>\n<p>1. alles wird komplett in CSS gemacht und erfolgt an einer Stelle<br \/>\n2. \u00c4nderungen am Dialog (z.B. Vergr\u00f6\u00dferung\/Verkleinerung\/Border-Radius, etc.) haben keine Auswirkungen auf<br \/>\ndie Titelleiste. Diese wird also entsprechend mit angepasst, au\u00dfer nat\u00fcrlich die H\u00f6he.<\/p>\n<p>Durch die F\u00fcllung ist nun die Fenster-Bezeichnung schlecht zu lesen. Daher wird die \u00dcberschrift noch wei\u00df gemacht. Au\u00dferdem wird der Please Wait &#8211; Text etwas weiter nach unten geschoben, indem margin-bottom von der \u00dcberschrift etwas erh\u00f6ht wird:<\/p>\n<pre lang=\"css\">  .splash h3 {\r\n      padding-top: 0;\r\n      margin-top: 0;\r\n      margin-bottom: 50px;\r\n      color: white;\r\n   }\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-79\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/splash_5-300x151.png\" alt=\"\" width=\"300\" height=\"151\" srcset=\"https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_5-300x151.png 300w, https:\/\/www.cssec.de\/blog\/wp-content\/uploads\/2018\/11\/splash_5.png 317w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Et voila &#8211; der Dialog ist nun fertig und kann in ein separates Div wie bereits schon einmal beschrieben eingebunden werden.<br \/>\nNat\u00fcrlich kann der Dialog noch etwas weiter versch\u00f6nert, z.B. mit dem Loader-Image erweitert werden.<\/p>\n<p>Viel Spa\u00df beim Ausprobieren<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In einem fr\u00fcheren Beitrag habe ich bereits die M\u00f6glichkeit aufgezeigt, einen \u201cWait-Splash\u201d auf einer Seite anzuzeigen w\u00e4hrend eine bestimmte Upload-Aktion durchgef\u00fchrt wird. Zur damaligen Zeit habe ich daf\u00fcr ein Fenster als Bild abgelegt und dieses eingeblendet. F\u00fcr ein neues Projekte habe ich mich wieder etwas mit HTML und CSS besch\u00e4ftigt und m\u00f6chte einen Weg zeigen, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/74"}],"collection":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":4,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}