{"id":254,"date":"2022-11-16T08:00:00","date_gmt":"2022-11-16T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=254"},"modified":"2023-08-30T10:37:56","modified_gmt":"2023-08-30T08:37:56","slug":"css-artikelgestaltung-1","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2022\/11\/16\/css-artikelgestaltung-1\/","title":{"rendered":"CSS Artikelgestaltung 1"},"content":{"rendered":"\n<p>Per CSS werden jetzt die Artikel weiter gestaltet die im vorherigen Artikel per HTML gestaltet wurden. Den Anfang machen dabei die Boxen selber. In diesem Teil des Webdesign-Workshops werden also die Boxen mit runden Ecken, Schatten und Farbverl\u00e4ufen aufgeh\u00fcbscht\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Runde Ecken per CSS:<\/strong><\/p>\n\n\n\n<p>Soll ein Element runde Ecken bekommen, reicht die Anweisung\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>border-radius: 15px;<\/li>\n<\/ul>\n\n\n\n<p>Der Pixelwert ist nat\u00fcrlich frei w\u00e4hlbar. Bei 15 Pixel empfinde ich das Ergebnis aber noch als angenehm.<\/p>\n\n\n\n<p>In einem ersten Schritt wird der Artikel mit runden Ecken ausgestattet.<\/p>\n\n\n\n<p>Nat\u00fcrlich kann auch eine ganze Box mit runden Ecken gestaltet werden. Statt in der \u201eartikel.css-Datei\u201c wird der \u201eborder-radius\u201c einfach den jeweiligen Element (hier \u201enav\u201c) zugeordnet. Das Ergebnis ist eine Navigations-Spalte mit runden Ecken.<\/p>\n\n\n\n<p>Mit diesem Wissen sollte es m\u00f6glich sein, beliebige Elemente einer Webseite mit runden Ecken auszustatten. Das alles ganz ohne Grafik \u2013 nur mit CSS.<\/p>\n\n\n\n<p><strong>Schatten per CSS:<\/strong><\/p>\n\n\n\n<p>Wo Licht ist, da ist auch Schatten. Jetzt verpassen wir den Artikeln auf unserer Webseite einen Schatten per \u201ebox-shadow\u201c.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>box-shadow: 10px 10px 5px #888888;<\/li>\n<\/ul>\n\n\n\n<p>Mit dieser Anweisung erzeugen wir einen Schatten.<\/p>\n\n\n\n<p>Die Parameter erm\u00f6glichen den Schatten genau zu bestimmen. Die horizontale und vertikale Verschiebung wird \u00fcber die ersten beiden Werte festgelegt. Gr\u00f6\u00dfe und Grad der Verschwommenheit ist der dritte optionale Wert. Der vierte Wert legt die Farbe des Schattens fest. Um einen optimalen Schatten zu gestalten bietet sich gnadenloses herrumspielen an und das kann und braucht hier sicher nicht dokumentiert zu werden, oder?<\/p>\n\n\n\n<p><strong>Farbverl\u00e4ufe per CSS:<\/strong><\/p>\n\n\n\n<p>Zur Demonstration f\u00fcr die Farbverl\u00e4ufe f\u00fcge ich drei div-Bereiche in den zweiten Artikel.<\/p>\n\n\n\n<p>In der CSS-Datei f\u00fcr den Artikel (artikel.css) baue ich folgende Anweisungen ein:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#farbverlauf01 {\nwidth: 80%;\nheight: 100px;\nbackground: -moz-linear-gradient(red, blue); \/* For Firefox 3.6 to 15 *\/\n}\n\n#farbverlauf02 {\nwidth: 80%;\nheight: 100px;\nbackground: -moz-linear-gradient(right, red, blue); \/* For Firefox 3.6 to 15 *\/\n}\n\n#farbverlauf03 {\nwidth: 80%;\nheight: 100px;\nbackground: -moz-linear-gradient(bottom right, red, blue); \/* For Firefox 3.6 to 15 *\/\n}<\/code><\/pre>\n\n\n\n<p>Nat\u00fcrlich br\u00e4uchte es die zus\u00e4tzlichen div-Bereiche nicht unbedingt. Farbverl\u00e4ufe k\u00f6nnen aber auch schnell unangenehm werden. Optimal lassen sich Farbverl\u00e4ufe hinter Grafiken im header-Bereich nutzen.<\/p>\n\n\n\n<p>Auch die Farbauswahl spielt dabei eine wichtige Rolle. Hier geht es erstmal nur um die grunds\u00e4tzliche Funktion. Was gestalterisch Sinn macht oder nicht soll sp\u00e4ter gekl\u00e4rt werden\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Per CSS werden jetzt die Artikel weiter gestaltet die im vorherigen Artikel per HTML gestaltet wurden. Den Anfang machen dabei die Boxen selber. In diesem Teil des Webdesign-Workshops werden also die Boxen mit runden Ecken, Schatten und Farbverl\u00e4ufen aufgeh\u00fcbscht\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/254\/revisions"}],"predecessor-version":[{"id":334,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/254\/revisions\/334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}