Mein CSS

Hier meine style.css und darunter noch ein paar nette Gimmicks. Die Buttons dazu gibts hier.

html, body, div, span {
font-family:Arial;
font-size:14px;
}

.hinweis {
font-family:Arial;
font-size:14px;
font-weight: bold;
color: #FF0000;
}

.erledigt {
font-family:Arial;
font-size:16px;
font-weight: bold;
color: #008000;
}

.small {
font-family:Arial;
font-size:10px;
color: #000000;
}

.ja {
font-family:Arial;
font-size:12px;
color: #008000;
}

.nein {
font-family:Arial;
font-size:12px;
color: #FF0000;
}

.erfasser {
	font-family:Arial;
	font-size:16px; 
	color:#21759b;
}

form {
	font-family:Arial;
	font-size:14;
  /*padding-top: 3em;*/
  position: relative;
}
input {
  margin: 0 0 1em 0%;
  padding: .2em .5em;
  width: 100%;
  background-color: #f3f0e7; 
  border: 1px solid #D5CAAA;  
}
select {
    box-sizing: border-box;
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
		background-color: #f3f0e7; 
  	border: 1px solid #D5CAAA;  
}
textarea {
  background-color: #f3f0e7; 
  border: 1px solid #D5CAAA;  
}
label { 
  text-align: right;
  line-height: 1.5;
  width: 30%;
  position: absolute;
  left: 0;
}
label::after {
  content: ": ";
}
button {
  margin-left: 0%;
}
input:required + label::before {
  position: absolute;
  left: 310%;
  content: "???";
  color: red;
}
input:required:valid + label::before {
  content: "";
  color: green;
}
h1 {
	font-family:Arial;
	font-size:300%; 
	color:#21759b;
}

div.table { 
  display: table; 
  border-collapse:collapse; 
}
div.tr { 
  display:table-row; 
}
div.td { 
  display:table-cell; 
  border: 1px solid; 
  border-color: #C0C0C0;
  padding:5px; 
}

#headline {
	font-family:Arial;
	font-size:300%; 
	color:#21759b;
	margin:8px 8px 8px 0px;
}

.debug {
font-family:Arial;
font-size:8px;
font-weight: bold;
color: #C0C0C0;
}

/* Custom Button-CSS (http://red-team-design.com/just-another-awesome-css3-buttons/) */
.button {        
    display: inline-block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button_small {        
    display: inline-block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: 1.0em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover {
    background-color: #ddd;        
    background-image: linear-gradient(top, #fafafa, #ddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}

.button:active {
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}

.button:focus {
    outline: 0;
    background: #fafafa;
}    

.button:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;        
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;        
}

/* Hexadecimal entities for the icons */

.add:before {
    content: "\271A";
}

.edit:before {
    content: "\270E";        
}

.delete:before {
    content: "\2718";        
}

.save:before {
    content: "\2714";        
}

.email:before {
    content: "\2709";        
}

.like:before {
    content: "\2764";        
}

.next:before {
    content: "\279C";
}

.star:before {
    content: "\2605";
}

.spark:before {
    content: "\2737";
}

.play:before {
    content: "\25B6";
}

/* Scroll-barer Bereich in Div's */

.scroll {
    position: relative;
    float: left;
    width: 100%;
    overflow: auto;
    height: 500px;
}

.tr.heading {
    position: relative;
    float: left;
    width: 100%;
}

div.table {
    display: table;
    border-collapse: collapse;
    position: relative;
    float: left;
    width: 100%;
}

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.