CSS: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(6 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
==OSEG Wiki==
+
==Introduction==
See what CSS code you can use in the OSEG Wiki:
+
* [http://davidwalsh.name/starting-css Starting to Write CSS]
* in [[MediaWiki:Common.css|Commons.css]] under /** OSEG CSS Code **/
 
** The class .round makes tables, divs and spans (everything with a border) round with 10px.
 
  
 
==Guidelines==
 
==Guidelines==
Zeile 12: Zeile 10:
 
* [http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Box-sizing: Border-box]
 
* [http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Box-sizing: Border-box]
  
==Components==
+
==Web Components==
 +
* [http://ebidel.github.io/webcomponents/ Web Components Resources]
 
* [http://www.uibox.in/ UIBox] - curated HTML, CSS, JS UI Component Library
 
* [http://www.uibox.in/ UIBox] - curated HTML, CSS, JS UI Component Library
 +
* [http://customelements.io/ Custom Elements] - A Web Components Gallery for Modern Web Apps
  
 
==Fonts==
 
==Fonts==
Zeile 86: Zeile 86:
 
** [http://tympanus.net/Tutorials/Animated3DBarChart/ Interactive Infographic with SVG and CSS Animations]
 
** [http://tympanus.net/Tutorials/Animated3DBarChart/ Interactive Infographic with SVG and CSS Animations]
 
* [http://www.minimamente.com/magic-css3-animations/ Magic CSS Animations]
 
* [http://www.minimamente.com/magic-css3-animations/ Magic CSS Animations]
 +
* [http://www.justinaguilar.com/animations/ CSS3 Animation Cheat Sheet]
 +
* [http://tympanus.net/Development/TripleViewLayout/ Sliding Triple View Layout] - ([http://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/ Site])
 +
* [http://labs.bigroomstudios.com/libraries/animo-js animo.js] - a powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion.
  
 
==Footers==
 
==Footers==
Zeile 93: Zeile 96:
 
* http://placehold.it/ - a quick and simple image placeholder service.
 
* http://placehold.it/ - a quick and simple image placeholder service.
  
[[Category: -OSEG 301 - IT Administration‏‎]]
+
[[Category:OSEG - IT Administration]]
  
 
==Preprocessors==
 
==Preprocessors==

Aktuelle Version vom 5. April 2018, 20:46 Uhr

Introduction

Guidelines

Initialize

Web Components

Fonts

  • Font Squirrel - handpicked free fonts for graphic designers with commercial-use licenses.

Heading Fonts:

Others:

  • Dripicons - a completely free, vector line-icon font.

Typography

Colors

Equal Height Columns

Centering

Layouts

Two Horizontal Divs

CSS Div Tables

Equal Height

Rowspan

Colspan

Others

CSS3 gradient background

Menus

Forms

Modal

Animations and Effects

Footers

Images

Preprocessors

Frameworks

Share

CSS Processors

Structure

  • MVCSS - Sass-based CSS architecture for creating predictable and maintainable application style.

Code Styles

Tutorials

Follow

Links