CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(→Menus) |
K (Hilfe:Kategorisieren von Seiten: Entferne Kategorie:-OSEG 301 - IT Administration; Ergänze Kategorie:OSEG - IT Administration) |
||
| (47 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | == | + | ==Introduction== |
| − | + | * [http://davidwalsh.name/starting-css Starting to Write CSS] | |
| − | * | ||
| − | |||
==Guidelines== | ==Guidelines== | ||
* [https://github.com/csswizardry/CSS-Guidelines CSS-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== | ==Fonts== | ||
* [http://www.fontsquirrel.com/ Font Squirrel] - handpicked free fonts for graphic designers with commercial-use licenses. | * [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== | ==Colors== | ||
| Zeile 21: | 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== | ||
| Zeile 31: | Zeile 66: | ||
* [http://tympanus.net/Development/MultiLevelPushMenu/index3.html Multi-Level Push Menu] | * [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/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: | + | [[Category:OSEG - IT Administration]] |
==Preprocessors== | ==Preprocessors== | ||
| Zeile 45: | Zeile 106: | ||
* [http://getbootstrap.com Bootstrap] | * [http://getbootstrap.com Bootstrap] | ||
** [http://bootsnipp.com/ Bootsnipp] - snippets about 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== | ==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 ] | * [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 53: | 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
- Web Components Resources
- UIBox - curated HTML, CSS, JS UI Component Library
- Custom Elements - A Web Components Gallery for Modern Web Apps
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
- Harmonic Colors
- COLOURlovers - palettes and more.
- Adobe Kuler - needs an Adobe account.
- Find the Perfect Colors for Your Website
Equal Height Columns
- http://stackoverflow.com/questions/10987821/two-columns-equal-height-only-css-no-display-table-table-row-table-cell
- http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
- At the bottom are examples with 2, 3, 4 and 5 columns.
Centering
Layouts
Two Horizontal Divs
CSS Div Tables
Equal Height
Rowspan
Colspan
Others
CSS3 gradient background
Menus
Forms
- jQuery prettyCheckable - replaces the default checkboxes and radio inputs for better looking ones.
- jQuery EasyDropDown - a Drop-down Builder for Styleable Inputs and Menus.
- HeapBox - jQuery HTML selectbox replacement.
Modal
- CSS-Modal - Modals built out of pure CSS.
- Nifty Modal Window Effects (blog)
- iosOverlay.js - iOS-style overlays/notifications for the web.
Animations and Effects
- Effekt.css
- 25 CSS3 Transitions and Animations Effects Tutorials
- Magic CSS Animations
- CSS3 Animation Cheat Sheet
- Sliding Triple View Layout - (Site)
- animo.js - a powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion.
Images
- http://placehold.it/ - a quick and simple image placeholder service.
Preprocessors
Frameworks
- Bootstrap
- Bootsnipp - snippets about Bootstrap.
- bootstrap-grid-builder
- Bootstrap Magic - easily create your own Twitter Bootstrap theme.
- Pure - a set of small, responsive CSS modules that you can use in every web project. (4.3KB* minified and gzipped)
CSS Processors
Structure
- MVCSS - Sass-based CSS architecture for creating predictable and maintainable application style.
Code Styles
- Front-end Code Standards & Best Practices (CSS)
- Principles of writing consistent, idiomatic CSS
- GitHub CSS Style Guide
Tutorials
Follow
- Webtools weekly - newsletter and archive.