Mobile Apps mit HTML, CSS, Javascript
JQuery Mobile Goratchet –
WeiterlesenSchlagwort-Archiv: CSS
Bootstrap Cheat Sheet
.well .well-sm .well-lg Mixins .text-overflow()
WeiterlesenStatus der 3d CSS Transformation
https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/ http://css3gen.com/css-3d-transform/ https://desandro.github.io/3dtransforms/docs/perspective.html http://thewebrocks.com/demos/3D-css-tester/ Beispiele http://jsfiddle.net/jeanlescure/7y9ozyj6/ Code https://threejs.org/ https://threejs.org/examples/js/controls/OrbitControls.js https://threejs.org/examples/js/renderers/CSS3DRenderer.js
WeiterlesenjQuery Cheat Sheet
|
1 2 3 4 |
$("Vorfahre Nachkomme"); // Alle Nachfahren eines Tags $("Elternteil > Kind"); // ein direkt folgendes Kind $("Element ~ Geschwister"); // Alle Geschwister eines Tags $("Element + Nachfolger"); // Nur die Nachfolger eines Tags |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(".item div:even"); // $(".item div:odd"); // $(".item div:first"); // $(".item div:checked"); $(".item div:after"); $(".item div:not('.active')"); $(".item div:nth-child(2)"); $(".item div:nth-last-child(2)"); $(".item div:nth-of-type(2)"); $(".item div:nth-last-of-type(2)"); $(".item div:first-child"); $(".item div:last-child"); $(".item div:only-child"); $(".item div:only-of-type"); $(".item div:first-of-type"); $(".item *:eq(3)"); // Das 4. Element unter .item $(".item div:eq(3)"); // Das 4. DIV-Element unter .item |
|
1 2 3 4 5 6 7 8 |
$("a[title]") ; // Nur Links mit einem title-Attribut $("div[class='example']"); // Alle DIVs mit class-Attribut example $("div[class*='test']"); // Alle mit einer Klasse dertest atest usw. $("div[class^='test']"); // class Beginnt mit test $("div[href$='.jpg']"); // href endet mit .jpg $("div[class~='image']"); // in class-Attribut kommt image vor $("div[class*='e']:contains('Test')") $('[data-toggle="tooltip"]') |
Traversing Methoden
|
1 2 3 4 |
$(".item").parents('.main'); // Der nächste Vorfahre mit der Klasse .main $(".item").parent(); // Eltern Element $(".item").children(); // Alle Kind Elemente $(".item").siblings(); // Alle Geschwister |
Weblinks jQuery Quick API Reference 11
WeiterlesenMit Bootstrap Formular aufbauen
tutorialrepublic.com – Einige Formular Beispiele Einige Basis Formulare lokal formvalidation.io – Formular Beispiele auch mal etwas komplexer 556
WeiterlesenCSS Komponenten
Reset CSS Responsive Grid Responsive Typography Responsive Navigation Button Ripple Effekt Material Design Hover Click Effects with jQuery CSS3 – Hover & Click Effects Demo Google Material Design Click Effect using jQuery CSS3 – jQuery MAWButton Plugin Demo Color Palette material design color palette – zavoloklom.github.io Icons Material Design Iconic Font – zavoloklom.github.io Long Shadow […]
WeiterlesenTop Web UI Frameworks mit HTML5, CSS und Javascript
CSS UI Frameworks mit Javascript Unterstützung Bootstrap http://getbootstrap.com Das wohl am meist verbreitete CSS Framework mit Javascript Komponenten. Semantic UI http://semantic-ui.com Ein sehr interessantes CSS Framework ebenfalls mit Javascript Unterstützung. Im Vergleich enthält das Semantic UI Framework mehr Styles und Komponenten als Bootsrap. Materialize CSS Projektseite, Demos Materialize is a modern responsive CSS front-end framework […]
WeiterlesenDie idealen Breakpoints beim Responsive Design
Definitionen für die Benennung und Pixelgrößen Die folgenden Benennungen und Pixelgrößen will ich hier mal festhalten die ich z.B. immer so nutze. Ich weiß, das es da auch andere Sichtweisen und Definitionen gibt. Aber auf eine muss man sich ja einigen. Name Breakpoint Seitenbreite Rand (Gutter) optimal Colums Mobile Phone Portrait bis 479px 100% 15px […]
WeiterlesenCSS Codesnippets für Effekte
Fade colors on mouse hover
|
1 2 3 4 5 6 7 8 9 10 11 |
a.button { color: #fff; background: #000; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.button:hover { color: #000; background: #fff; } |
Weiterlesen
Formularelemente Designs per CSS
Es gibt einige sehr interessante Ansätze zum stylen HTML Formularelemente. Hier will ich einige Lösungen und Methoden dazu sammeln. Styling von Checkbox- und Radio-Elemente CSS Radio button Checkbox
Weiterlesen