Design

CSS Quellensammlung 2

27. Januar 2007
von

Eine weitere Quellensammlung zum Thema CSS. Artikel, Anleitungen und Tutorials. Außerdem dabei: CSS Diagramme, Balkengrafiken, Star Rater, Drop Shadows, Image Maps, Image Switcher, gerundete Ecken, Sliding Galerien und noch einiges mehr. Alles auf Englisch.

  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll – Authentic Boredom
  • Cascading Style Sheets – von Andreas Lutz
    Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O’REILLY, 2004. Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden.
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS and HTML examples and tutorials by Ove Klykken
    Advanced CSS demos and bug reports
  • CSS Basics.com
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Demonstrations and Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Drop Shadows
    A List Apart Tutorial by Sergio Villarreal
  • CSS Intermediate Guide
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von w3schools.com
  • CSS TUTORIAL
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • Learn CSS Positioning in Ten Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial – CSS selectors
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour
    by Andrew Krespanis – Making Simple Work of Complex CSS Layouts
  • Stylemaster CSS Tutorial
    hands on css tutorial – This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets
    Cascading style sheets tutorials and style guide
  • Top 10 CSS Tutorials
    There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques…
  • Creating a graph
    Russ Weakley – Creating a graph using percentage background images
  • CSS FOR BAR GRAPHS
    Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph
  • Super simple CSS bars
    Tobias Lütke
  • Dynamic Pie Chart with CSS
    This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
  • CSS Diagrams
    Things to Do With CSS When You’re Bored at Work
  • CSS Image Maps
    Below is a sample image map that’s built entirely using CSS and XHTML…
  • Map Pop
    This experiment uses CSS to create an image map with CSS pop-ups
  • Star Rater
    Creating a Star Rater using CSS
  • CSS Star Rating
    CSS Star Rating Part Deux
  • Star Rater
    Example 1
  • CSS Ratings Selector
    Using a list item to create a star rater
  • Star Rater
    Example 3
  • All About CSS Drop Shadows
    By: John Gallant , Holly Bergevin
  • :BefTer Drop Shadows
    Using :before and :after pseudo elements to create beautiful drop shadow on standard browsers. Use built-in drop-shadow filter for Ie.
  • Fun with Drop Shadows
    Drop Shadows are a nice way to beautify images….
  • Simple CSS Image Switcher
    This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function…..
  • Simple(r) CSS Image Switcher
    I didn’t use nested unordered lists. Instead, I used just one unordered list……
  • A Two Step Photograph Gallery
    Stu Nicholls
  • Hoverbox Image Gallery
    …super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
  • Sliding Photograph Galleries
    Stu Nicholls Photo Galleries – vertical slide & horizontal slide
  • CSS and Round Corners
    Build Accessible Menu Tabs – by Trenton Moss
  • CSS Rounded Corners ‘Roundup’
    There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not…..
  • Navigation Magnification
    The idea behind this experiment is to create an unordered list of links scale according to your hover position, like the icons work in the Mac OS X Dock, using the magnification effect.

Christiane ist seit vielen Jahren der gute Geist des Magazins. Sie hat zahlreiche Beiträge im Listen-Stil vorbereitet und zusammengestellt, sich um Moderation und E-Mails gekümmert.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!