diedVIPs

html knowhow

CSS Schnipsel









  Was tuts CSS Schnipsel
a   1. a {text-decoration:none; font-weight:bold; font-size:1.3em}
2. a:hover{color: #fff; text-shadow: 0 0 10px #0099FF;}
3. a {color: blue; box-shadow: inset 0 -3px 0 -1px blue; padding: .25em 0; text-decoration: none; transition: all .5s;}
a:hover,a:focus {box-shadow: inset 0 -30px 0 skyblue;}
4. a[href$=".mp3"] span {background-image: url("mp3.svg");}
a    
align horizontal
Angaben zur Positionierung  left {padding-top: 30%; padding-left: 40%;}
align vertical
   
background   bgcolor {background-color: red; border: 10px dotted white; box-sizing: border-box; padding:20px; background-clip: border-box; }
body background
  body {background-image: url('/../Bilder/Life.png'); background-repeat: no-repeat; background-position: left; overflow: hidden; margin: 0; min-width: 250px; font-size: 1em;}
body font
   
border
  border {border: 1px solid  #000000;}
border color
   
border radius
  border {border-radius: 20px;} 
border image
  border {border-image: url('/../Bilder/Life.png') 30 round; }
border spacing
Bei Verwendung von „border-collapse: separate“ kann die Eigenschaft border-spacing verwendet werden, um den Abstand zwischen den Zellen festzulegen table {border-collapse: separate; border-spacing: 15px 50px; }
box sizing
  * {box-sizing: border-box; content: ""; display: table; float: left; width: 15%; padding: 0 8px; margin: 0; color: #666; font-family: 'Oxygen', san-serif;}
box {margin-left: 20%; width :40%; height: 200px; border: 3px solid blue;}
border style
   
box shadow
  box {box-shadow: 1px 1px 4px 0px #777777;}  
box {box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5); width: 550px; height: 30px; margin: 20px auto; overflow: hidden; border-radius: 4px; padding: 3px; -webkit-user-select: none}
button   button {cursor: pointer; font-size: 16px; font-family: Droid Arabic Naskh, sans-serif; letter-spacing: 1px; border-radius: 25px; float: left; min-width: 10px; max-width: 250px; display: block; margin: 1em; margin-left: 8px; margin-right: 8px;
padding: 1em 0em; border: none; background: none; vertical-align: middle; position: relative; z-index: 1;
-webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #FFFFFF; min-width: 210px; background-color: #2C323C; font-weight: bold; padding: 6px !important; transition: background-color 0.5s; background-color: transparent; color: white; width: 300px; border: Solid 0px rgba (86, 187, 248,0.8);}
center Angaben zur Positionierung    center {padding-top: 10%; padding-left:10%; padding-top: 5%}
circle
Um einen Kreis zu erstellen, können wir den Randradius für das Element festlegen. Dadurch werden gekrümmte Ecken am Element erzeugt. circle {background-image: radial-gradient( hsl(200,10%,50%) 29%, hsl(200,10%,60%) 30%, hsl(200,10%,90%) 50%, hsl(200,10%,60%) 70%, hsl(200,10%,90%) 73% ); }
circle {background: lightblue; border-radius: 50%; width: 100px; height: 100px; }
container img
  container {width: 600px; height: 400px; background:url ("../Bilder/Life.jpg"); background-size: cover; background-position: center; display: flex; position: relative; margin-left:30%; border: 3px solid green; text-align:center;}
container   container {content: ""; background: #F7F6F5; width: 100%; opacity: .5; transition: .5s ease; position: relative}
CSS, ID, CLASS
Positionieren von Elementen mit css, id und class. 1. img Bild 1 {text-align: center; width:150px; height:200px; border:2px solid red; box-shadow: 10px 10px 5px #ccc; -moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; -khtml-box-shadow: 10px 10px 5px #ccc;}
2. .img Bild 2 {width:150px; height:200px; border-width:0px; position:relative; top:2px; left:20px; outline: #4CAF50 solid 10px; border-radius: 25px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222)}
3. #img Bild 3 {width:150px; height:200px; opacity: 0.6; position:relative; top:10px; left:30px; transform: rotate(-10deg); border-width:4px; border-color:aqua}
cursor typs
  .alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;} .copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
css einbinden
   
div style
   
div Beispiele 1. div {background-color: #E4E4E4; padding: 0.5rem;}
sdssdssd
2. div {padding: 3px; background-color: #ebebeb; border: 1px solid #CCC; float: left; margin: 10px 10px 0 0; font-family: Arial, Helvetica, sans-serif;}
3. #div {position: absolute; left: 20px; top: 100px; width: 100px; height: 200px; background-color: #efefef; border: 1px solid #ff0000;}
4. div.fullscreen {background-image: url('../Bilder/Life.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; height: 650px; padding: 25px; border: Solid 1px Silver; color: transparent;}
div container
  div.container {color: rgb(255,255,255); background: linear-gradient (rgba(255,20,20,0.7), rgba(12,10,255,0.6)); padding: 35px;}
display
inline: ist nur so breit wie der Inhalt und wird innerhalb einer Zeile angeordnet, kann sich aber auch über mehrere Zeilen erstrecken.
inline-block erzeugt eine Box, die Eigenschaften von Inline- und Block-Boxen kombiniert.
block:
wird als Box dargestellt, die sich über dem gesamten verfügbaren Platz des Elternelements erstreckt
span.a {display: inline; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow;}
span.b {display: inline-block; width: 100px; height: 100px; padding: 5px; background-color: yellow;}
span.c {display: block; width: 100px; height: 100px; border: 1px solid blue;}
eventlistener
   
Event
   
figure figure ersetzt den div-Tag als Gruppe von zusammengehörenden Elementen. figure {max-width: 100%; height: auto; display: block; margin: 1rem auto 1rem auto; box-shadow: 1px 1px 5px #888888; border: solid 1px #000000;}
figure box
   
figcaption
figcaption kann man entweder an erster oder letzter Stelle innerhalb eines Figure Elements setzen. Das führt dazu dass die Überschrift entweder ganz oben oder ganz unten erscheint figure {display: table;}
figcaption {display: table-caption; caption-side: top; text-align: center;}
flex container   flex-container {-webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;}
float
Ausrichtung von Elementen mit umlaufendem Text /* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* Global values */
float: inherit;
float: initial;
float: unset;

<div style="float: left; width 300px">
<img style="float: right; margin-right: 10px">
font
   
footer Footer repräsentiert eine Fußzeile für den Sektionsinhalt oder das Sektionsquellen Element footer {text-align: center; position: absolute; bottom: -100px; left: 0; width: 100%; }
form action
Form umschließt alle Elemente eines Formulars und eine Schaltfläche zum Absenden des Formulars <form action="formular.php" method="post" id="eindeutig_id">
<input type="text" name="familienname">
<input type="submit" value="absenden">
</form><br>form {margin-left: 40px; padding: 5px 10px; font-family: Sigmar;}
funktion
   
h1, h2, h3 etc Angaben zu einer Überschrift h2 {font-family: 'Rock Salt', kursiv;}
hr Angaben zu einer Trennlinie  hr {height: 50px; background: url (stein.svg); }
img src
  1. img {-moz-transform: scaleY(-1); -o-transform: scaleY(-1);  -webkit-transform: scaleY(-1); transform: scaleY(-1); -ms-filter: "FlipH"; filter: FlipH;}
2. img {width: 10%; background: white; padding: 0.5rem; outline: solid thin lightgrey; box-shadow: 1px 1px 10px}
img hover
   
img position   img.position {position: absolute; animation: moveImage 10s linear infinite; left: -250px; top: 20px; left: 30px;}
@keyframes moveImage {100% { transform: translateX(calc(100vw + 500px)); } }
img rotation
   
img container    img {margin: 0; display: inherit; padding: 10px; width: 100px; height: 100px; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
img swing   swing.img {border: 5px solid #f8f8f8; width:100%; display: block; text-align:left;}
!important
Wird verwendet, um einer Eigenschaft einem Wert mehr Bedeutung als normal zu verleihen. #myid {background-color: blue !important;}
.myclass {background-color: gray !important;}
p {background-color: red !important;}
include PHP
  Als PHP-Seite
<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>
im HTML Seite einbinden
<link rel="stylesheet" href="CSS/main.css" type="text/css">
input
Eingabefeld mit Größenangabe  input[type=text] {width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box;}
keyframes
  @keyframes ticker {
0% {margin-top: 0}
25% {margin-top: -30px}
50% {margin-top: -60px}
75% {margin-top: -90px}
100% {margin-top: 0}}
label   label {width: 150px; display: inline-block;}
link
   
list   list {display: list-item; list-style-image: url(igel.png); margin-left: 38px; }
mask
Maskieren oder Freistellen von Motiven in Fotos. mask {margin-left:20%; -webkit-mask-image: ; mask-image: url(../Bilder/hkhlogo.png); -webkit-mask-size: 50%; mask-size: 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

mask {mask-image: url(../Bilder/hkhlogo.png); -webkit-mask-image: url("stoff-460-maske.webp"); mask-size: 100%; -webkit-mask-size: 100%;}
media screen Damit wird angegeben, wie die homepage auf verschiedenen Endgeräten aussehen soll.  @media screen and (max-width: 42em) {
tr {font-size: 1.2 em;}
td {font-size: 1.2em;}
table {width: 80%;}
body {width: 600px;}}
menu   menu {background-color: #595959; box-shadow: 0px 4px 5px #222222; height: auto; position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
    .mi {
--openText: "Click to open...";
--altText: "😎";
--img: url("https://picsum.photos/id/420/960/320");
--fullText: "html, css oder java bietet Ihnen die Möglichkeit Webseiten zu erstellen. Mit HTML Knowhow können Sie Ihre Möglichkeiten erheblich verbesser. Meine Seiten helfen Ihnen beim Design";
position: relative; width: 12em; height: 4em; background-image: var(--img); background-position: right; background-size: 300% 300%; transition: transform 0.5s 0s; transform-style: preserve-3d; perspective: 40em;}
navbar ul li   navbar ul li {clear: none !important; width: 16% }
onclick Was passiert beim Klicken button.onclick = function() { window.scrollBy ({ top: 300, left: 0, behavior: "smooth" }); }
onclick Was passiert beim Klicken   button.onclick = function() { window.scrollTo ({ top: 0, left: 0, behavior: "smooth" }); }
opacity
Irgendwas durchsichtig machen  opacity: 1.0;     /* Komplett undurchsichtig */
opacity: 0.6;     /* Durchscheinend */
opacity: 0.0;     /* Komplett transparent */
object position
   
outline
Outline ist eine Linie, die um ein Elemente AUSSERHALB der Grenzen gezogen wird, um das Element „hervorzuheben“. p {border: 2px solid black; outline: #4CAF50 solid 10px; margin: auto; padding: 20px; text-align: center;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
overflow Gibt an, ob der Inhalt, wenn er zu groß ist, abgeschnitten werden soll, um in den angegebenen Bereich zu passen.  div {overflow: scroll;}
div {overflow: hidden;}
div {overflow: visible;}
pointer Aussehen des Cursors  pointer {cursor: pointer;}
p Angaben zur Schrift  p {font-size: 30px; font-family: 'Tangerine', serif; position: relative; color: #D6D6D6; text-shadow: 4px 4px 10px #222222; text-shadow: 0 2px 10px #1F1F1F;}
position
Dieser Befehl gibt an, wo etwas dargestellt werden soll.  1. div.relative {position: relative; left: 30px; border: 3px solid #73AD21;}
2. div.fixed {position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21;}
3. div.absolute {position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;}
Ränder um etwas - margin border padding
   
rotate-img
  rotate img {transform-origin: center center; animation: rotateTurtle 10s linear infinite; }
@keyframes rotate { to { transform: rotate(359deg) } }
selector
  select {margin-left: 100px; color: blue; width: 350px; border-color: green; font-size: 1em;}
shape
   
span 1. span {font-size: 1.2rem; font-weight: bold; color: #000000; background-color: #FFFFFF; padding: 5px 10px 5px 10px;
2. span#prev:hover, span#next: hover {color: #FFFFFF; background-color: #777777; border: solid 1px #FFFFFF;}
3. span#number {display: inline-block; width: 2rem; text-shadow: 1px 1px 4px #777777;}
SVG
   
SVD viewbox
   
swing   swing {animation: swing ease-in-out 1s infinite alternate; width: 30%; transform-origin: center -20px; box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
table Größenangaben  einer Tabelle  table {margin-left: 20%; width : 50%; height: 200px; border: 3px solid red;}
target
   
textarea
   
text decoration
  -> unter- und oberstrichen, gepunktet in rot
1. a {text-decoration: underline overline dotted red;} 
-> unterstrichen, wellig in blau
2. a {text-decoration: underline blue 5px;} 
-> NICHT unterstrichen,
3. a  {text-decoration: none;} 
text transform   text {font-size: 2em; line-height: 3em; transform-origin: bottom left; transform:rotate(-90deg); }
text shadow
 positionieren  
text Farbverlauf   text-farbverlauf {background-image: linear-gradient (90deg, blue, yellow, red, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
text image   text-image {font-size: 6em; font-family: "Arial Black"; background-image: url('floral.jpg'); background-size: 50%;}
text overflow   textoverflow li {width: 48%; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
transform
Ermöglicht, ein Element im zweidimensionalen (2D) oder dreidimensionalen (3D) Raum zu transformieren. Sie können beispielsweise Elemente drehen, skalieren, neigen und vieles mehr. transform {-webkit-transform: skew(20deg) scale(1.4);  
->für Safari und Chrome-Browser
-moz-transform: skew(20deg) scale(1.4);  
->für Firefox-Browser
-ms-transform: skew(20deg) scale(1.4);  
->für Internet Explorer-Browser
-o-transform: skew(20deg) scale(1.4);   ->für Opera-Browser
transform: skew(20deg) scale(1.4);  -> für W3C-Browser
transform
   
transition
Wechselt irgendwas. Das Element hat einen Übergangseffekt mit hier einer Dauer von 2 Sekunden a {box-shadow: inset 0 0 #e6f2f7;}
tr1 {transition: all 2s;}
ul,ol,p   ul {float: left; padding-left: 20px; animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;  -webkit-user-select: none; margin: 0; padding: 0; width: 100px; text-align: left; color: black}
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ul.c {list-style-type: upper-roman;}
ul.d {list-style-type: lower-alpha;}
ul   ul li.checked::before {content: ''"; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px;}
vertical align
   
vertical-center   vertical-center {padding-top: 20%;}
z-index
z-index legt die Reihenfolge eines positionierten Elements fest. Überlappende Elemente mit einem größeren z-index überdecken diejenigen mit einem kleineren.
<div id="abs1"><b>DIV #1</b>position: absolute; z-index: 5;</div>
<div id="rel1"><b>DIV #2</b>position: relative; z-index: 3;</div>
&<div id="rel2"><b>DIV #3</b>position: relative; z-index: 2;</div>









Kontakt    Datenschutz   Impressum