» Archiv des Weblogs » Das Design des Kurses für fortgeschrittenes CSS Niquelao Das Design des Kurses für fortgeschrittenes CSS 8. November 2009, von Rumoroso Vor einigen Tagen war ich in Zaragoza, um einen Kurs über fortgeschrittenes CSS zu leiten (aufgenommen im Kurskatalog des CTIC ).

Wie es sich gehört, und insbesondere da es sich um einen Kurs über Stylesheets und fortgeschrittene Techniken handelte, erstellte ich die Präsentation in rumoslide (da 95 % der Nutzer es so nennen, wird dieser Name wohl hängen bleiben). Die Sache ist die: Der umfangreiche Lehrplan (oder die knappe Zeit) ließ keine Raum dafür, einige Details zu den Stilen zu erläutern, die ich in der Präsentation verwendet habe . Genau dafür schreibe ich diesen Artikel (nun ja, und um die Gewohnheit wieder aufzunehmen, regelmäßig im Blog zu schreiben).

Wie es sich gehört, fangen wir am Anfang an, also heute mit dem Titelfolie : Was ich zur Titelfolie bemerken möchte, betrifft die Gestaltung des Präsentationstitels . Meine Idee war es, beide Wörter ( CSS und avanzado ) hervorzuheben, wobei jedes Wort individuell betont werden sollte, ohne jedoch ihre Verbindung zu verlieren. Dafür spielte ich unter anderem mit Schriftgröße und -farbe (groß und hell gegenüber kleiner und dunkel) sowie mit ihrer Positionierung (teilweise Überlappung).

Zunächst der verwendete HTML-Code:

CSS Avanzado

Und nun das CSS samt Erklärung: h1 { font-size: 7em; color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } Die Idee bestand darin, zunächst die Buchstaben CSS der Überschrift zu gestalten. Da der restliche Text in einem span enthalten ist, kann ein allgemeiner Stil für das h1 definiert werden, um später den Effekt darauf auszugleichen.

So erklärte ich eine ausreichend auffällige Schriftgröße (7em), eine Farbe, die gut mit den übrigen verwendeten Stilen harmoniert und nicht zu intensiv wirkt, sowie die Zeilenhöhe und den kursiven Stil. Außerdem fügte ich Ränder hinzu, wobei ich berücksichtigte, dass ich einen Abstand von 20 % der Gesamtbreite von links wünschte.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Schließlich setzte ich eine 3px starke Unterlinie (die Farbe wird von der Typografie geerbt). Zusammen mit diesen Stilen initialisierte ich die Koordinaten der Nachfolger der Überschrift durch relatives Positionieren, da ich die Überlappung der Wörter mittels absoluter Positionierung erreichte (dazu später mehr). Die Kontrolle über den Überlauf (overflow: hidden) fügte ich im Nachhinein hinzu (weil mir das Ergebnis elegant erschien), nachdem ich den Rest der Überschrift gestaltet hatte. Dadurch wird erreicht, dass der untere Teil des Wortes avanzado beim Überschreiten der Grenzen des h1 verdeckt wird.

Als Nächstes gestaltete ich das Wort avanzado : h1 :first-child { font-size: .5em; font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } Um zusätzliche Markup-Elemente zu vermeiden, spielte ich mit Selektoren. Der Begriff avanzado befindet sich im ersten Kindelement des h1 , weshalb die Auswahl mittels der Pseudoklasse :first-child erfolgt.

Zuerst änderte ich die Schrifteigenschaften (Größe reduzieren, Farbe ändern und Kursivstellung entfernen). Die Überlappung实现了通过绝对定位（坐标是相对于 h1 的位置，因为 h1 被设置为相对定位）。最后，我通过调整其不透明度添加了一点额外效果（使用了带特定前缀的属性，以确保在最新版本的浏览器中正确显示）。现在的问题是：我是如何实现白色渐变效果的？答案很简单，基于以下代码： h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } 我添加的空 span（可能有些人已经觉得奇怪）负责这个效果。实际上，想法很简单。可以通过在文本上放置一个从白色到透明的 PNG 图像来实现这种效果（白色是因为页面背景）。为此，我通过上下文选择器选择了 span（它是另一个 span 之后的 span，因此使用 span + span），将其绝对定位，并使其占据标题的 100% 宽度和高度（定位 span 后，它就可以接受尺寸了）。然后，我将渐变图像作为背景添加到底部对齐（由于图像较窄，我让它在 x 轴上重复）。就这样……应用于封面页的其他样式（页脚和徽标）在整个演示文稿的幻灯片中保持一致。一般来说，它们相当简单，因此我会快速介绍一下（也许在以后的文章中提到其他部分的样式时会详细说明）。可以说，页脚是一个通用容器，包含一个列表（我去掉了项目符号）。我给它设置了一个接近 CTIC 橙色的强烈背景色，并在右侧放置了一张背景图像。此外，我将其固定定位在屏幕底部，因为我不希望它随垂直滚动而移动（这在课程中作为一个例子很有用）。至于徽标，它是一个嵌入在 object 元素中的 svg。我所做的是将其绝对定位在顶部，并在整个演示过程中保持如此。稍后我将评论一些我在整个演示过程中应用的其他样式示例，例如，如何实现带有 CSS 字母的双色背景等。 Das Design des Kurses für fortgeschrittenes CSS Kategorie: CSS —> 3 Kommentare Das Design des Kurses für fortgeschrittenes CSS 8.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

November 2009 […] Vollständiger Text auf Niquelao : Das Design des Kurses für fortgeschrittenes CSS […] Niquelao » Archiv des Weblogs » Ein weiterer stilistischer Touch im CSS-Kurs 11. November 2009 […] wie ich bereits im vorherigen Beitrag (Das Design des Kurses für fortgeschrittenes CSS) getan habe, werde ich weiterhin einige der Stile kommentieren, die ich in der Präsentation des CSS-Kurses für Zaragoza verwendet habe[…] Ein weiterer stilistischer Touch im CSS-Kurs 12. November 2009 […] wie ich bereits im vorherigen Beitrag (Das Design des Kurses für fortgeschrittenes CSS) getan habe, werde ich weiterhin einige der Stile kommentieren, die ich in der Präsentation des CSS-Kurses verwendet habe[…] Sie können die Kommentare dank des RSS 2.0 Feeds verfolgen.

Sie können auch einen Trackback von Ihrer Website senden. Vorheriger Artikel: The best… made with CSS Nächster Artikel: Ein weiterer stilistischer Touch im CSS-Kurs —> —> —> Dieses Werk ist unter einer Creative Commons Lizenz lizenziert .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.