Design-technisch sieht sowas ja immer echt hübsch aus. Das aber umzusetzen ist erstmal nicht ganz so einfach, da es keine fertige Lösung gibt. Hier muss mal wieder ein eigenes Element mit :before und einer absoluten Position helfen.
Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.
Aber zurück zu den Rändern. Hier erstmal mit "absolute":
Links (80% Länge):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Links (80% Länge und unten + oben Abstand):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Manchmal sind ganz einfache Dinge sehr komplex. CSS-Ellipsis ist an sich einfach. Aber mit Flexbox kann es plötzlich dazu kommen, dass es einfach nicht funktioniert. Alles funktioniert nur die "..." sind nicht zusehen, weil es einfach alles zur Seite rausragt und die Breite hält.
<div class=""flex-container">
<div class="flex-child">
<header>LONG TEXT</header>
</div>
</div>
.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Die Lösung hier ist [url=]https://css-tricks.com/flexbox-truncated-text/min-width: 0;[/url].
Also:
.flex-child {
min-width: 0;
}
.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Super schnelle Lösung.. aber wie sollte man da alleine drauf kommen, wenn man nur mal schnell Ellipsis einbauen will?
Ein kleiner Tipp, wenn man in einer Webapp zulange Listen- oder Tabelleneinträge zurecht schneiden möchte. Um anzuzeigen, dass der Text gekürzt ist will man oft ... am Ende stehen lassen. Das mit PHP, JavaScript, etc zu machen ist aber doof und overflow-hidden: hidden reicht nicht. Aber es gibt in CSS text-overflow.
.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Der Text wird einzeilig und abgeschnitten. Zusätzlich werden 3 Punkte angehängt. Alles gut? Nur solange man es nicht bei einem <li> mit Bullet-Points verwendet. Die gehen dabei leider auch verloren. Aber auch hier gibt es eine Lösung, wobei man aber die Abstände des <li> zum linken Rand neu anpassen muss.
li.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
list-style-position: inside;
}
Wenn man mit Bootstrap eine Oberfläche baut und auf einem nicht Link gerne den Pointer als Cursor hätte, gibt es da eine einfache Lösung:
<li role="button" ng-click="doSomething()">Blubb</li>
Ob sich die Entwickler von Bootstrap die Verwendung so gedacht haben, kann ich nicht sagen, aber es funktioniert.
Wählt möglichst weit aus einander liegende Farben aus der Auswahl aller Farben, wobei die Enden (Schwarz und Weiß) ausgelassen werden. Da bei wenigen Farben nur Grautöne heraus kommen, werden bei weniger als 8 Farben die Abstände zwischen den Farben geringer als möglich gewählt.
function ColorGeneratorService(){
this.generateColorList = function(neededColorCount){
var minColorsfactor = 1;
if(neededColorCount < 8){
minColorsfactor = 3;
}
var result = [];
var end = parseInt(0xFFFFFF);
var step = Math.round(end / ((neededColorCount * minColorsfactor) + 1));
for(var i = 1; i <= neededColorCount; i++){
result[result.length] = "#"+(step * (i * minColorsfactor)).toString(16);
}
return result;
};
}
<html>
<head>
<style type="text/css">
div.slider{
width:100%;
height: 300px;
overflow-x:hidden;
overflow-y:hidden;
border-bottom:1px solid #000000;
}
div.slider-item{
background-color:#44AAAA;
width:100%;
height:100%;
animation-name: slide-in;
animation-duration: 4s;
}
@-moz-keyframes slide-in{
0%{opacity: 0;margin-left:100%;}
20%{margin-left:0%;}
100%{opactiy:1;}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-item"></div>
</div>
</body>
</html>
einblenden: opacity 0 auf 1
von links: margin-left 100% auf 0%
von-rechts: margin-right 100% auf 0%
wachsen lassen: scale(0) auf scale(1)
schrumpfen lassen: scale(2) auf scale(1)
Ein Snap-In Effekt:
@-moz-keyframes snap-in{
0%{transform:scale(1.2);opacity:0;}
50%{opacity:0.2;}
95%{transform:scale(0.9);opacity:1;}
100%{transform:scale(1)}
}
Wenn man nicht möchte, dass ein CodeMirror Eingabefeld unkontrolliert in die Breite wächst und statt desen Scroll-Balken zeigt, hilft dieses CSS:
<style type="text/css">
.CodeMirror{
width:99%;
max-width:700px;
border:1px solid #000000;
}
</style>
bezahlt von 
Blog: Blog-entries by search-pattern/Tags:
