CSS: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(57 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==
 +
* [https://github.com/csswizardry/CSS-Guidelines CSS-Guidelines]
 +
* [http://flippinawesome.org/2013/08/12/writing-better-css/ Writing Better CSS]
 +
* [http://flippinawesome.org/2013/08/26/functional-css-fcss/? Functional CSS]
 +
 
 +
==Initialize==
 +
* [http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Box-sizing: Border-box]
 +
 
 +
==Web Components==
 +
* [http://ebidel.github.io/webcomponents/ Web Components Resources]
 +
* [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==
 +
* [http://www.fontsquirrel.com/ Font Squirrel] - handpicked free fonts for graphic designers with commercial-use licenses.
 +
 
 +
Heading Fonts:
 +
* [http://www.google.com/fonts/specimen/Montserrat Montserrat] ([http://theultralinx.com/2013/04/free-alternative-font-gotham-proxima-nova.html explanation])
 +
 
 +
Others:
 +
* [http://demo.amitjakhu.com/dripicons/ Dripicons] - a completely free, vector line-icon font.
 +
 
 +
===Typography===
 +
* [http://practicaltypography.com/ Butterick’s Practical Typography]
 +
 
 +
==Colors==
 +
* [http://harmonicolors.com/ Harmonic Colors]
 +
* [http://www.colourlovers.com/ COLOURlovers] - palettes and more.
 +
* [https://kuler.adobe.com/explore Adobe Kuler] - needs an Adobe account.
 +
* [http://vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/ Find the Perfect Colors for Your Website]
  
 
==Equal Height Columns==
 
==Equal Height Columns==
Zeile 9: Zeile 38:
 
** At the bottom are examples with 2, 3, 4 and 5 columns.
 
** At the bottom are examples with 2, 3, 4 and 5 columns.
  
−
==Two Horizontal Divs==
+
==Centering==
 +
* [http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ Absolute Horizontal And Vertical Centering In CSS]
 +
 
 +
==Layouts==
 +
===Two Horizontal Divs===
 
* http://stackoverflow.com/questions/10490256/given-two-divs-on-the-same-line-how-can-i-make-the-left-div-fill-the-remaining
 
* http://stackoverflow.com/questions/10490256/given-two-divs-on-the-same-line-how-can-i-make-the-left-div-fill-the-remaining
 
** http://jsfiddle.net/BsHpj/9/
 
** http://jsfiddle.net/BsHpj/9/
 +
===CSS Div Tables===
 +
* [http://jsfiddle.net/Hv3V4/4/ JSFiddle with display:table]
 +
 +
====Equal Height====
 +
* [http://codepen.io/basement31/pen/Ifaeu Codepen - Equal height boxes with minimal code]
 +
 +
====Rowspan====
 +
* [http://stackoverflow.com/questions/13585789/css-rowspan-like-effect CSS div rowspan effect] - [http://tinkerbin.com/Mdd8u3fK demo]
 +
 +
====Colspan====
 +
* http://tinkerbin.com/Mdd8u3fK
 +
 +
===Others===
 +
* [http://jsfiddle.net/KtgVN/20/ Left, Right, Centered Div]
  
 
==CSS3 gradient background==
 
==CSS3 gradient background==
 
* http://stackoverflow.com/questions/11719019/css3-gradient-background
 
* http://stackoverflow.com/questions/11719019/css3-gradient-background
 +
 +
==Menus==
 +
* [http://tympanus.net/Development/MultiLevelPushMenu/index3.html Multi-Level Push Menu]
 +
* [http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/ More Personal Circle Navigation]
 +
* [http://tympanus.net/Tutorials/CircularNavigation/index2.html Circular Navigation]
 +
 +
==Forms==
 +
* [http://arthurgouveia.com/prettyCheckable/ jQuery prettyCheckable] - replaces the default checkboxes and radio inputs for better looking ones.
 +
* [http://patrickkunka.github.io/easydropdown/ jQuery EasyDropDown] - a Drop-down Builder for Styleable Inputs and Menus.
 +
* [http://www.bartos.me/heapbox/ HeapBox] - jQuery HTML selectbox replacement.
 +
 +
==Modal==
 +
* [http://drublic.github.io/css-modal/ CSS-Modal] - Modals built out of pure CSS.
 +
* [http://tympanus.net/Development/ModalWindowEffects/ Nifty Modal Window Effects] ([http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ blog])
 +
* [http://taitems.github.io/iOS-Overlay/ iosOverlay.js] - iOS-style overlays/notifications for the web.
 +
 +
==Animations and Effects==
 +
* [http://h5bp.github.io/Effeckt.css/dist/ Effekt.css]
 +
* [http://inspiretrends.com/css3-transitions-and-animations-effects-tutorials/ 25 CSS3 Transitions and Animations Effects Tutorials]
 +
** [http://tympanus.net/Development/PseudoElementsAnimationsTransitions/ Examples of Pseudo-Elements Animations and Transitions]
 +
** [http://tympanus.net/Tutorials/CaptionHoverEffects/ Caption Hover Effects]
 +
** [http://tympanus.net/Tutorials/YouTubeLeftSideMenu/ Simple YouTube Menu Effect]
 +
** [http://tympanus.net/Tutorials/Animated3DBarChart/ Interactive Infographic with SVG and 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==
 +
* [http://tutorialzine.com/2013/08/slideout-footer-css/ Slide-out footer]
  
 
==Images==
 
==Images==
 
* 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==
Zeile 25: Zeile 102:
 
** [http://getpreboot.com/ Preboot]
 
** [http://getpreboot.com/ Preboot]
 
** [http://lesselements.com/ LESS Elements]
 
** [http://lesselements.com/ LESS Elements]
 +
 +
==Frameworks==
 +
* [http://getbootstrap.com Bootstrap]
 +
** [http://bootsnipp.com/ Bootsnipp] - snippets about Bootstrap.
 +
** [http://jaykanakiya.com/bootstrap-grid-builder bootstrap-grid-builder]
 +
** [http://pikock.github.io/bootstrap-magic/ Bootstrap Magic] - easily create your own Twitter Bootstrap theme.
 +
* [http://purecss.io/ Pure] - a set of small, responsive CSS modules that you can use in every web project. (4.3KB* minified and gzipped)
 +
 +
==Share==
 +
* [http://blog.codepen.io/2013/07/23/the-new-embed-builder-customize-every-aspect/ Codepen - The New Embed Builder – Customize Every Aspect of Embedded Pens ]
 +
 +
==CSS Processors==
 +
* [https://github.com/sindresorhus/cssprettifier-userscript cssprettifier-userscript]
 +
 +
==Structure==
 +
* [http://mvcss.github.io/ MVCSS] - Sass-based CSS architecture for creating predictable and maintainable application style.
 +
 +
==Code Styles==
 +
* [http://isobar-idev.github.io/code-standards/#_css Front-end Code Standards & Best Practices (CSS)]
 +
* [https://github.com/necolas/idiomatic-css Principles of writing consistent, idiomatic CSS]
 +
* [https://github.com/styleguide/css GitHub CSS Style Guide]
  
 
==Tutorials==
 
==Tutorials==
Zeile 30: Zeile 128:
 
** http://tympanus.net/Development/ModalWindowEffects/
 
** http://tympanus.net/Development/ModalWindowEffects/
 
* http://tympanus.net/codrops/collective/
 
* http://tympanus.net/codrops/collective/
 +
 +
==Follow==
 +
* [http://webtoolsweekly.com/#archive Webtools weekly] - newsletter and archive.
  
 
==Links==
 
==Links==

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

Abgerufen von „https://wiki.opensourceecology.de/index.php?title=CSS&oldid=13706“