Ich habe mich in letzter Zeit ein wenig mit CSS beschäftigt und möchte Euch gern daran teil haben lassen.
Es ging mir darum die Seite optisch auzubereiten und platzsparend Text unterzubringen der auch von Google leicht zu verarbeiten ist.
Erst mal eine eifache Variante (Bildwechsel) in HTML. Auf meiner Seite zella.de zB. oben die Social-Butten oder der Link zu Holiday-Check.
<a href="http://community.zeta-producer.com/" target="_blank"><img onmouseover="src='Bild2.png'" onmouseout="src='Bild1.png'" title="" border="0" alt="" src="Bild1.png" /></a>
Zusätzlich kann man die 2. Grafik vorladen lassen. Ganz am Ende der Seite diesen Quelltext:
<img src="Bild2.png" width="1" height="1" border="0" style="display:none;">
Was ich Euch aber eigentlich zeigen wollte ist die CSS-Variante die ihr weiter unten auf meiner Startseite sehen könnt.
Als erstes legt Ihr auf dem Server ein neues Verzeichniss mit dem Namen CSS an.
Nun erstellt Ihr Euere Grafiken sowie eine Hintergrundgrafik für den Text und ladet diese in Eueren ersellten CSS-Ordner.
Ihr nehmt nun einfach den Windoof-EDITOR und fügt dort folgenden Code ein, den Ihr noch anpassen müsst.
Zeile 2, 3, 20 und 21 die Größe eurer Grafik und Zeile 17 euere HG. Den Rest findet Ihr dann schon raus.
.view {
width: 276px;
height: 184px;
margin: 0em auto 0em auto;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 0 8px 10px -6px #222;
cursor: default;
background: #fff url(http://deineseite.de/css/deinehintergrundgrafik.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 276px;
height: 184px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
color: #006600;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.8);
margin: 10px 0 0 0;
}
.view p {
font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
font-style: italic;
font-size: 14px;
position: relative;
color: #fff;
padding: 10px 10px 2px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 2px 6px;
background: #fff;
color: #006600;
text-transform: uppercase;
border: 1px solid #006600;
border-radius: 5px;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #666666;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #006600;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #006600;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
Alles anzeigen
Steichert die Datei als hover.txt Danach benennt ihr die Datei um in hover.css
Diese Datei packt Ihr auch in den ersellten CSS-Ordner.
In Zeta öffnet Ihr die Attribute - Mobile-Script und fügt folgendes ein:
<link rel="stylesheet" type="text/css" href="http://deineseite.de/css/hover.css" />
Nun einen Neuen Artikel, entwerdet HTML-Quelltext oder Text und auf Html umschalten.
<div class="view view-tenth"><img src="http://deineseite.de/css/deinbild.jpg" />
<div class="mask">
<h2>Überschrift</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<a class="info" href="dein Link">weiter</a></div>
</div>
