Abermals Newsstyle #01

11. Januar 2015 -13:11 0 Lydia

So heute habe ich das Tutorial dabei, wie ich mein Newsstyle erstellt habe. Ich hoffe es ist soweit alles verständlich. Wichtig ist das ihr das Tutorial CSS:Trasition versteht. Weil im großen und ganzen ist es nichts anderes was wir gemacht haben. Wir erstellen vorerst unsichtbare Objekte (wie ein Button etc.) und lassen diesen dann, wenn die Maus über eine Fläche fährt, erscheinen. (Opacity: 0 zu Opacity: 1). Den Rest hab ich in den Kommentaren erklärt. Falls doch Fragen sind einfach mir Bescheid geben ich werde versuchen sie zu beantworten. (:

Demo anschaun
Html Code
<div class="post">    
   <div class="inhalt">
         <div class="date">
            25 <br /> September <br /> 2015
         </div>
         <h1 class="headline"><a href="#">Überschrift H1</a></h1>
         <h3>Kategorie: <a href="#">Tag 1</a>, 
                        <a href="#">Tag 2</a>, 
                        <a href="#">Tag 3</a> etc.</h3>
                            <div class="preview-text">
                                <p>Hier habt ihr die Möglichkeit einen kurzen Auszug aus euren Beitrag zu
                                zeigen. Vielleicht ein kleiner Lorem Ipsum ?? (; <br />
                            </div>
                            <div class="comment">
                                 <a href="#">Mehr Lesen</a>
                            </div>
   </div> 
              <div class="preview-image">
                     <a href="#"><img src="img/newsstyle-bild.png" class="preview-image"/></a>
              </div>
</div>
CSS Code



/*Newsstyle Container, dieser enthält alle Elemente*/
.post{
	padding:10px;
	width: 335px;
	background:rgba(85, 138, 178,1);
}

/*Bild Preview Image*/
.preview-image{
	max-width: 335px;
	max-height: 335px;
	width: 100%;
	height: 100%;
	margin:0px;
}

/*Inhalt, dieser erst beim Mouse Over erscheint*/
.post .inhalt{
	/* Objekt eigenschaften */
	position:absolute;
	background:rgba(85, 138, 178,1);
	margin:20px; 
    width: 300px;
    height: 300px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    overflow: hidden;
	/* Wie Die Animation ablaufen soll */
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	/* Hier beginnt was bei der Animation passieren soll */
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	/*WICHTIG das es nicht vorher angezeigt wird 
	sondern erst bei Hover*/ 
    opacity: 0; 
}

.post:hover .inhalt {
	/* Eigenschaften der Animation oben 0 wird auf die 
	Tatsächliche Größe 1 des Objekts skaliert */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Objekt Button Date */
.post .inhalt .date {
	/* Objekt eigenschaften */
	font: 12px  'Open Sans Condensed', sans-serif;
	font-weight:700;
	padding:8px;
	width:50px;
	height:50px;
	background:rgba(55, 108, 148,0.5);
	text-align:center;
	float:left;
	margin:25px;
	border-radius:50%;
	box-shadow: 0px 0px 0px 4px rgba(55, 108, 148,1);
	/* Hier beginnt was bei der Animation passieren soll: 
	erscheint nach  0.2 Sekunden */
	-webkit-transition: all 1s ease-in-out 0.2s;
	-moz-transition: all 1s ease-in-out 0.2s;
	-o-transition: all 1s ease-in-out 0.2s;
	-ms-transition: all 1s ease-in-out 0.2s;
	transition: all 1s ease-in-out 0.2s;
	opacity: 0;
}

.post:hover .inhalt .date{ 
	/* Bei Hover anzeigen */
	opacity: 1;
}

/* Hauptüberschrift der News Style*/
.post .inhalt h1.headline {
	margin:30px 0 0px 0;
	font: 25px 'Open Sans Condensed', sans-serif;
	color:rgba(55, 108, 148,1);
	/* Hier beginnt was bei der Animation passieren soll: 
	erscheint nach  0.4 Sekunden */
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
	opacity: 0;
}

.post:hover .inhalt h1.headline{ 
	/* Bei Hover anzeigen */
	opacity: 1;
}

/* Linkeigenschaften der Hauptüberschrift */
.post .inhalt h1.headline a{
	color: rgba(35, 78, 118,1);
	text-decoration:none;
}
/* Linkeigenschaften HOVER der Hauptüberschrift */
.post .inhalt h1.headline a:hover {
	color: rgba(210, 215, 207,1);
}

/* Untertüberschrift der News Style bzw Tags*/
.post .inhalt h3 {
	font: 15px 'Open Sans Condensed', sans-serif;
	font-weight:300;
	margin:0px 0 0 0;
	/* Hier beginnt was bei der Animation passieren soll: 
	erscheint nach  0.4 Sekunden */
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
	opacity: 0;
}

.post:hover .inhalt h3{ 
	/* Bei Hover anzeigen */
	opacity: 1;
}
/* Linkeigenschaften der Untertüberschrift  */
.post .inhalt h3 a{
	color: rgba(35, 78, 118,1);
	text-decoration:none;
}

/* Linkeigenschaften HOVER der Untertüberschrift  */
.post .inhalt h3 a:hover {
	color: rgba(210, 215, 207,1);
}

/* kleiner Text bzw Preview-Text  */
.post .inhalt .preview-text{
	clear:both;
	font: 12px 'Open Sans', sans-serif;
	line-height:18px;
	margin:30px 20px 30px 20px;
	padding:0px;
	border-top: 1px solid rgba(55, 108, 148,1);
	border-bottom: 1px solid rgba(55, 108, 148,1);
	/* Hier beginnt was bei der Animation passieren soll: 
	erscheint nach  0.6 Sekunden */
	-webkit-transition: all 1s ease-in-out 0.6s;
	-moz-transition: all 1s ease-in-out 0.6s;
	-o-transition: all 1s ease-in-out 0.6s;
	-ms-transition: all 1s ease-in-out 0.6s;
	transition: all 1s ease-in-out 0.6s;
	opacity: 0;
}

.post:hover .inhalt .preview-text{
	/* Bei Hover anzeigen */
	opacity: 1;
}


/* Comment Button */
.post .inhalt .comment{
	width:auto;
	margin:0px 20px;
	font: 15px 'Open Sans', sans-serif;
	color: rgba(255,255,255,1);
	padding:7px 20px 5px 20px;
	background:rgba(55, 108, 148,0.5);
	text-align:center;
    -webkit-border-radius: 15px;
	-moz-border-radius:  15px;
	border-radius:  15px;
	box-shadow: 0px 0px 0px 4px rgba(55, 108, 148,1);
	/* Hier beginnt was bei der Animation passieren soll: 
	erscheint nach  1 Sekunde */
	-webkit-transition: all 1s ease-in-out 1s;
	-moz-transition: all 1s ease-in-out 1s;
	-o-transition: all 1s ease-in-out 1s;
	-ms-transition: all 1s ease-in-out 1s;
	transition: all 1s ease-in-out 1s;
	opacity: 0;
}

.post:hover .inhalt .comment{ 
	/* Bei Hover anzeigen */
	opacity: 1;
}
/* Linkeigenschaften des Comment Buttons */
.post .inhalt .comment a{
	color: rgba(255, 255,255,1);
	text-decoration:none;
}
/* Linkeigenschaften HOVER des Comment Buttons */
.post .inhalt .comment a:hover{
	color: rgba(35, 88, 118,1);
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.