{"id":1005,"date":"2014-03-05T22:01:38","date_gmt":"2014-03-05T21:01:38","guid":{"rendered":"http:\/\/blog.kolatzek.org\/wblog\/?p=1005"},"modified":"2018-01-31T14:26:37","modified_gmt":"2018-01-31T13:26:37","slug":"css3-eigenschaft-text-shadow-und-die-3d-nachahmung","status":"publish","type":"post","link":"https:\/\/blog.kolatzek.org\/wblog\/1005\/css3-eigenschaft-text-shadow-und-die-3d-nachahmung","title":{"rendered":"CSS3-Eigenschaft Text-Shadow und die 3D-Nachahmung"},"content":{"rendered":"<h1>Worum geht&#8217;s?<\/h1>\n<p>Seit CSS3 seit nunmehr einem Jahr zur Ausstattung aller moderner Browser geh\u00f6rt, kann man sich auf die vielen Design-M\u00f6glichkeiten st\u00fcrzen, die fr\u00fcher &#8222;nur im Photoshop&#8220; m\u00f6glich waren. Sie sind meist &#8222;<a href=\"http:\/\/wiht.co\/guidetoaccessibility\">graceful dagradable<\/a>&#8222;, so dass \u00e4ltere Browser auch ohne das neueste CSS f\u00fcr den Benutzer einigerma\u00dfen sinnvoll darstellen k\u00f6nnen.<\/p>\n<h2>Was ist ein 3D-Schatten?<\/h2>\n<p>Es ist eine Kombination mehrerer text-shadow-Eigenschaften hintereinander, so dass die einerseits eine Illusion der dritten Dimension des Textes als auch einen passenden Schatten erzeugen.<\/p>\n<p><!--more--><\/p>\n<h3>Das Vorgehen<\/h3>\n<ol>\n<li>Wir schreiben einen Text (muss gro\u00df sein und kurz, damit es wirkt) &#8211; am ehesten eine \u00dcberschrift &#8211; und ordnen dem umgebenden Element (egal ob heading, div, span oder a) eine bestimmte Klasse zu.<\/li>\n<li>Wir sorgen daf\u00fcr, dass der Hintergrund genug Kontrast zum Vordegrund und Schatten bietet.<\/li>\n<li>F\u00fcr diese CSS-Klasse definieren wir hinter &#8222;text-shadow&#8220; folgende Werte:\n<ol>\n<li>VerschiebungX VerschiebungY Schattenradius Farbe &#8211; wobei Verschiebungen bei 1 beginnen, Schattenradius immer 0 ist (eine klare Kante) und die Farbe der Textfarbe entspricht oder etwas heller\/dunkler sein kann, um einen direkten Lichtstrahl zu imitieren oder leichten Schatten nachzuahmen.<\/li>\n<li>Wir f\u00fcgen ein Komma ein und geben es erneut ein, wobei wir VerschiebungX und -Y um einen Pixel vergr\u00f6\u00dfern.<\/li>\n<li>Wir tun das so lange, bis man den Text leicht &#8222;von der Seite&#8220; sieht. Die Zahl der Wiederholungen werden wir sp\u00e4ter als &#8222;n&#8220; bezeichnen.<\/li>\n<li>Wir setzen ein Komma und definieren jetzt den Schatten, der direkt oder knapp hinter der letzten 3D-Imitation beginnen sollte. Dazu schreiben wir:<\/li>\n<li>VerschiebungX+n+1 VerschiebungY+n+1 Schattenradius Farbe &#8211; wobei Schattenradius mit 0 beginnt und die Farbe per rgba angegeben wird und auch Schwarz mit ganz schwacher Deckung sein kann (z.B. &#8222;rgba(50,50,50,0.1)&#8220;). rgb oder #xxx gehen auch, aber rgba l\u00e4sst den Schatten echter erscheinen, weil er den Hintergrund zunehmend durchscheinen l\u00e4sst.<\/li>\n<li>Wir setzen ein Komma, und wiederholen Punkt 5, wobei das &#8222;+1&#8220; in den Verschiebungen inkrementiert wird.<\/li>\n<li>Wir beenden das ganz mit Semikolon.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Das war&#8217;s?<\/h3>\n<p>Nicht ganz. Man kann noch mehr Experimente machen. Will man den Lichteinfall betonen, wird zuerst eine etwas hellere Farbe (1-3) verwendet und es wird dekrementiert (also &#8222;-1&#8220; f\u00fcr Verschiebungen). Den Schatten (4-7) berechnen wir daf\u00fcr anders: Man rechnet mit &#8222;n=0&#8220;. Dann w\u00e4chst die Schrift nach unten rechts, wird von links oben beleuchtet und wird den Schatten ebenfalls nach rechts unten.<\/p>\n<h2>Entwurmungsmittel<\/h2>\n<pre><code>text-shadow: 1px 1px 0px #CCC, 2px 1px 0px #CCC, 1px 1px 0px #666, 2px 1px 0px #666, 3px 2px 0px #666, 4px 2px 0px #666;\r\n<\/code><\/pre>\n<p>Da solche &#8222;Bandw\u00fcrmer&#8220; im CSS kaum per Hand zu erstellen sind (und gar unlesbar werden wie das Effekt eine Hashing-Funktion), <strong><a href=\"http:\/\/jsfiddle.net\/RobertKolatzek\/uk2my\/3\/\">habe ich mir einen solchen Generator einfallen lassen. Sie finden ihn in meinem JSfiddle<\/a><\/strong>. Es steht unter CC-BY-SA 3.0 Lizenz und darf gerne woanders &#8222;verbaut werden&#8220;. Der Quellcode erkl\u00e4rt dem Kenner die Zusammenh\u00e4nge besser, als ich es im Blog tun kann.<\/p>\n<p>Viel Spa\u00df damit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Worum geht&#8217;s? Seit CSS3 seit nunmehr einem Jahr zur Ausstattung aller moderner Browser geh\u00f6rt, kann man sich auf die vielen Design-M\u00f6glichkeiten st\u00fcrzen, die fr\u00fcher &#8222;nur im Photoshop&#8220; m\u00f6glich waren. Sie sind meist &#8222;graceful dagradable&#8222;, so dass \u00e4ltere Browser auch ohne das neueste CSS f\u00fcr den Benutzer einigerma\u00dfen sinnvoll darstellen k\u00f6nnen. Was ist ein 3D-Schatten? Es [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[26,126],"class_list":["post-1005","post","type-post","status-publish","format-standard","hentry","category-software","tag-css","tag-web","entry"],"_links":{"self":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/comments?post=1005"}],"version-history":[{"count":6,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1005\/revisions"}],"predecessor-version":[{"id":1145,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1005\/revisions\/1145"}],"wp:attachment":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/media?parent=1005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/categories?post=1005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/tags?post=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}