Schlagwort: CSS

Minify and obfuscate code with Maven

In a production site you always want to have minified and obfuscated code (i.e. CSS and JavaScript files) so that the file content is as small as possible because this will save bandwidth and loading time. The best known and easiest tool for this is the YUI Compressor from Yahoo!.

In a Java Enterprise application, the YUI Compressor can be integrated very easy with Maven. All you need is the Maven Minify Plugin. That’s how to use it:
Minify and obfuscate code with Maven weiterlesen

background image mittig im div platzieren

#header
{
  width: 100%;
  height: 142px;
  background-image: url('./images/header.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

Mirror background image with CSS3

Here you can see how to mirror a background image with some cool new CSS3 attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13

#background
{
  background-image: url('./images/myBackground.png');
  width: 1024px;
  height: 768px;
  /* Mirror the background image */
  -webkit-transform: scaleX(-1);
  -khtml-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

Div Element horizontal und vertikal zentrieren

Ein Code sagt mehr als tausend Worte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centering a Div horizontally and vertically</title>
    <style type="text/css">
      html
      {
        background-color: black;
      }
 
      body
      {
        width: 100%;
        height: 100%;
        position: static; /* don't make it relative! */
      }
 
      #centered
      {
        position: absolute;
        height: 396px;
        width: 400px;
        margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */
        top: 50%;
        left: 50%;
        background-color: violet;
        border: 1px solid white;
      }
    </style>
  </head>
  <body>  
    <div id="centered"></div>
  </body>
</html>

Schicke HTML Tabellen mit CSS

Der Artikel „Top 10 CSS Table Designs“ zeigt, wie man schnöde HTML-Tabellen mit CSS richtig schick machen kann. Im Anhang befindet sich eine „schnöde“ HTML-Tabelle nach dem Standard des W3C sowie eine schicke Tabelle mit abgerundeten Kanten.
Schicke HTML Tabellen mit CSS weiterlesen